Skip to content
Related Articles

Related Articles

Improve Article

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() {
  
// Alert function
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




My Personal Notes arrow_drop_up
Recommended Articles
Page :