React Native Style

React Native simply uses JavaScript for styling our core components. We don't require any special language or syntax for defining styles. All the core components use a prop (property) named style. 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 is a plain old JavaScript object which is the simplest way for styling our code.

There are different ways to design our component, by using inline style and by using StyleSheet.create. As the component increases in complexity, it is better to use StyleSheet.create to define several styles in one place.

React Native style Example 1

In this example, we will use both inline style as well as StyleSheet.create. Inline styles are applied at where the components are created.

App.js

1.  import React, { Component } from 'react';  
2. import { AppRegistry, StyleSheet, Text, View } from 'react-native';  
3.   
4. export default class ImplementingStyle extends Component {  
5.     render() {  
6.         return (  
7.             <View>  
8.                 <Text style={{ backgroundColor: '#a7a6a9', color: 'yellow', fontSize: 20 }}>this is inline style</Text>  
9.                 <Text style={styles.green}>just green</Text>  
10.                 <Text style={styles.biggray}>just biggray</Text>  
11.                 <Text style={[styles.biggray, styles.green]}>biggray, then green</Text>  
12.                 <Text style={[styles.green, styles.biggray]}>green, then biggray</Text>  
13.             </View>  
14.         );  
15.     }  
16. }  
17. const styles = StyleSheet.create({  
18.     biggray: {  
19.         color: 'gray',  
20.         fontWeight: 'bold',  
21.         fontSize: 30,  
22.     },  
23.     green: {  
24.         color: 'green',  
25.     },  
26. });  

Output

React Native style Example 2

We can also use the external JavaScript file to style our application. In this example, we create external JS file and import it into our App.js file.

StyleComponent.js

1. import React, { Component } from 'react'  
2. import { Text, View, StyleSheet } from 'react-native'  
3.   
4. const StyleComponent = (props) => {  
5.     return (  
6.         <View>  
7.             <Text style = {styles.myState}>  
8.                 {props.myState}  
9.             </Text>  
10.         </View>  
11.     )  
12. }  
13. export default StyleComponent  
14.   
15. const styles = StyleSheet.create ({  
16.     myState: {  
17.         marginTop: 20,  
18.         textAlign: 'center',  
19.         color: 'green',  
20.         fontWeight: 'bold',  
21.         fontSize: 20  
22.     }  
23. })  

App.js

1.  import React from 'react';  
2. import { StyleSheet, Text, View } from 'react-native';  
3. import StyleComponent from './StyleComponent'  
4.   
5. export default class App extends React.Component {  
6.     state = {  
7.         myState: 'This is my state, style through external style'  
8.     }  
9.     render() {  
10.         return (  
11.             <View>  
12.                 <StyleComponent myState = {this.state.myState}/>  
13.             </View>  
14.         );  
15.     }  
16. }  

Output