React Native – Style

With React Native, you style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color.

As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. We have to import the StyleSheet from the react-native library.

The style names and values are similar to CSS that works for the web. There is the only difference in the way of writing names using camel casing, e.g fontSize rather than font-size.

The style prop can be a plain old JavaScript object. That’s what we usually use for example code. You can also pass an array of styles – the last style in the array has precedence, so you can use this to inherit styles.

As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <Text style = {styles.myStyle}>
            {this.state.myState}
         </Text>
         </View>
      );
   }
}

const styles = StyleSheet.create ({
   myStyle: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

There are many ways to create styles for your component. Some developers prefer adding it to the bottom of each file, while others use a separate file and keep all the component’s styles in one place. By moving styles away from the render function, you’re making the code easier to understand. 

Like CSS, we can also provide inline styling to React Native.

<Text style={{fontSize: 24,color: "#fff"}}>Random Text</Text>
//styling with class styles and inline styles
<Text style={[styles.title,{fontSize: 24,color: "#fff"}]}>
  Random Text
</Text>