Transfer your CSS style to React Native style skills

2018-11-01

You already know a lot about styling for the web and are unsure about taking on an app? Good news! You can transfer a lot of what you know from styling the Web to styling an app.

For example, look at this React Native code:

<View
  style={{
    flex: 1,
    backgroundColor: 'lightgreen',
  }}
>
  <Text style={{margin:'auto'}}>Welcome</Text>
</View>

Without an further explanation, you can probably see what’s going on there already. It looks familiar doesn’t it?

Generally, if you know of a CSS property, you can probably use it as a property of the style attribute of a React Native component. If that CSS property happens to have a hyphen in its name, then removing the hyphen and capitalising all words but the first allows you to use this property in React Native. You can now use a huge chunk of the knowledge you’ve built up while styling the Web to style an app.

However, there are a couple of differences when transferring your CSS skills. Everything is flex by default. In the example above, the View component is going to be sized like a flex element would on the Web. Further, wrap content with ScrollView if you want it to scroll beyond the screen.

Have fun testing out your CSS skills in a React Native app!