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. 

In order to style components of React Native app, we can use StyleSheet.create. StyleSheet in React Native shares several attributes with CSS, including color, height, top, right, bottom, and left. A StyleSheet in React Native is an abstraction resembling CSS StyleSheets.

Why StyleSheet.create is useful?

There are several ways to add styles to elements in React Native. Usage of inline styling and style through the use of a StyleSheet are two popular choices. 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. 

As soon as our code base even significantly expands, the problems with inline styles become obvious. In order to get away with the cons of inline styles we use StyleSheet.create. 

Syntax:

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

Creating Application: Follow the below steps to create an application:

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: The project structure should look like this:

Initial Project Structure

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

App.js

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. Here we are adding CSS-like properties eg. flex, padding, backgroundColor, margin, fontSize, fontWeight, textAlign, etc. Most of the properties are similar to CSS.

App.js

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.

App.js

Output:

Example 2 Output

By using StyleSheet.create, we can easily add styling in React native component.