In this tutorial we will see ‘How to use style in react native’.
React native use JavaScript for styling your Application .All of the core components accept a prop named style. The style’s name and value are similar to web css. The style props can be javascript object or You can also pass an array of styles.
You can use styles direct in tag like <View style:{{backgroundColor: ‘red’}}/> or you can create style object and pass it in style for this we have to import StyleSheet from react-native.
Then create stylesheet object using StyleSheet.create().
const styles = StyleSheet.create({
root: {
backgroundColor: 'red',
}
});
then assign this object in components like <View style={styles.root}/>
React native style example
In this example we will see ‘How to use style in react native’
App.js
import React ,{Component} from 'react';
import {
StyleSheet,
SafeAreaView,
View,Text,Button,
} from 'react-native';
const App = () => {
constData = "Some Data";
return (
<SafeAreaView>
<View style={styles.root}>
<Text style ={styles.bigText}>
Style Review Example
</Text>
<Text style ={styles.yelloText}>
Style Review Example
</Text>
<Text style ={[styles.bigText, styles.text]}>
Style Review Example
</Text>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
root: {
backgroundColor:"red",
},
bigText:{
color:'blue',
fontSize:50
},
text: {
backgroundColor:'green',
},
yelloText: {
backgroundColor:'yellow',
}
});
export default App;
Output:
