React Native style Prop
Last Updated :
28 Apr, 2021
In React Native, we can style our 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.
The style prop can be a plain old JavaScript object. We can also pass an array of styles.
Syntax:
<component_tag style={styles.bigBlue}>...</component_tag>
OR
<component_tag style={[styles.bigBlue, styles.red]}>...</component_tag>
Now let’s start with the implementation:
-
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
-
Step 2: Now create a project by the following command.
expo init myapp
-
Step 3: Now go into your project folder i.e. myapp
cd myapp
Project Structure:
Example: Now let’s style any text or any component by using the style prop. Here we will set the background-color green to make the button center.
App.js
import React from 'react' ;
import { StyleSheet,
Text,
View,
Button,
Alert
} from 'react-native' ;
export default function App() {
const alert = ()=>{
Alert.alert(
"GeeksforGeeks" ,
"A Computer Science Portal" ,
[
{
text: "Cancel" ,
},
{
text: "Agree" ,
}
]
);
}
return (
<View style={styles.container}>
<Button title={ "Register" } onPress={alert}/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'green' ,
alignItems: 'center' ,
justifyContent: 'center' ,
},
});
|
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.
Reference: https://reactnative.dev/docs/style
Share your thoughts in the comments
Please Login to comment...