What does StyleSheet.create do and why is it useful ?

We can create a stylesheet by using StyleSheet.create. A stylesheet is a set of guidelines used to determine how a webpage or document is laid out and designed. StyleSheet in React Native shares several attributes with CSS, including color, height, top, right, bottom, and left.

Why StyleSheet.create is useful?

There are several ways to add styles to elements in React Native. The simplest approach to style any React application is via inline styles. We don’t need to make a separate CSS if you style elements inline. Inline styles are only a viable option for extremely small applications, despite a few immediate benefits. 

Syntax:

const styles = StyleSheet.create({
    container: {
        // Write CSS like property here.
        flex: 2,
        padding: 19,
        backgroundColor: "#123f45"
    }
},

Steps to Create React Application And Installing Module:

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 Project

Step 3: Now go into your project folder i.e. stylesheetdemo

cd Project

Project Structure:

Initial Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
     "react-native-paper": "4.9.2",
     "@expo/vector-icons": "^13.0.0",
}

Example 1: Below is the example, first we’ll see the output without using the StyleSheet.create:

Javascript

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
    return (
        <View >
            <Text >
                GeeksForGeeks
            </Text>
        </View>
    );
};
export default App;

Steps to Run the application: Write the below code in the terminal to run the application:

npm start or expo start

Output:

Initial Output

Now we will add styles to Text Component. We can do this by using StyleSheet.create.

Javascript

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.paragraph}>
                GeeksForGeeks
            </Text>
        </View>
    );
};

export default App;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        padding: 8,
        backgroundColor: 'white',
    },
    paragraph: {
        margin: 24,
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
        color: 'green'
    },
});

Steps to Run the application: Write the below code in the terminal to run the application:

npm start or expo start

Output: Below is the output after applying the stylesheet is given below:

Output after applying the stylesheet

Example 2: In this Example, We are going to add multiple styles to Pressable (like a button), Text & View Component by using StyleSheet.create. We are using Pressable here in place of Button because the Button Component of React Native doesn’t accept style prop.

Javascript

import React from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';

export default function App() {
    return (
        <View style={styles.container}>
            <View style={styles.box}>
                <Text style={styles.heading}>
                    GeeksForGeeks</Text>
                <Text style={styles.paragraph}>
                    This part is a text in the paragraph.
                    This is example of StyleSheet.create
                </Text>
                <Pressable style={styles.btn} >
                    <Text style={styles.btnText}>
                        Button
                    </Text>
                </Pressable>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ebfaeb',
        alignItems: 'center',
        justifyContent: 'center',
    },
    box: {
        height: 200,
        width: 250,
        overflow: 'hidden',
        borderRadius: 10,
        borderColor: "green",
        borderWidth: 2,
        margin: 24

    },
    heading: {
        fontSize: 26,
        padding: 10,
        fontWeight: 'bold',
        textAlign: 'center',
        color: 'green'
    },
    paragraph: {
        padding: 5,
        fontSize: 14,
        color: 'green',
        justifyContent: 'center',
        fontStyle: 'italic',
        textAlign: 'center'
    },
    btn: {
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 10,
        paddingHorizontal: 15,
        margin: 15,
        borderRadius: 10,
        elevation: 5,
        backgroundColor: 'green',

    },
    btnText: {
        color: 'aliceblue'
    }
});

Steps to Run the application: Write the below code in the terminal to run the application:

npm start or expo start

Output:

Output