React Native style Prop

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