Constructing and applying styles
Let's begin our exploration of component styling by first answering two key questions: what should my style code look like and where does it go inside of my project?
Inline styles
Similar to HTML, styles in React Native can be applied inline by setting the value of the style property, as shown in the following code:
<View style={{ backgroundColor: 'blue', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: '#fff', fontSize: 22 }}>Hello World</Text>
</View>
The output of the code will be as shown in the following screenshot:
You can think of a View much like a div and Text similar to a span or label. Those differences aside, the style properties and values should feel pretty familiar. The color property sets the text color just like in CSS. fontSize, backgroundColor, justifyContent, and alignItems are by and large the camel case version of their CSS equivalents.
