How do you style your React Native component?

Every React Native component like View, Text, Image etc… accepts a style prop which is an object of CSS rules. The only difference between CSS rules and CSS object used in React Native is key in CSS object has CSS rules in camelCase, for example, CSS rule background-colour will become backgroundColour in React Native. There are few restrictions over values of some CSS rules. But still, available CSS rules are enough to style a mobile app UI beautifully. React Native supports CSS flexbox to build UI layouts. We style our mobile screen like below snippet:

const styles = StyleSheet.create({
   container: {
       flexDirection: 'row',
       borderRadius: 5,
       borderWidth: 1,
       borderColor: '#1a91b8',
       padding: 5,
       backgroundColor: '#eaf7fd'
   },
   text: {
       color: '#015169',
       fontWeight: 'bold',
       fontSize: 20,
       padding: 15
   }
});
Then we can use these style with View component like below:
<View style={styles.container}></View>

Stylesheet object is provided by React native library which has the method “create”. It takes an argument of type object and this object is the collection of CSS rules. As you can see in the above example, font-size CSS property in the web becomes font size in React native and flex-direction becomes flexDirection. I hope you got the idea about styling in React native application development. You can find the complete code on https://gist.github.com/PavanKu/98f92103af84faaf540aa348cf1a1126