How to style React Native Application ?

In this article, we’ll learn how to style React Native applications. There are two major ways to style your React Native Application:

  1. Style Props
  2. Using StyleSheet

Method 1: Style Props: To style an element with the style props, the value must be a JavaScript Object. You just have to add a style prop to your element. 

Syntax:

<View style={{}}> </View>

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. StyleExample

cd Project

Project Structure: The project structure should look like this:

Project Structure

Example 1: This example will demonstrate the style of props. Write the below code in the App.js file.

App.js