Open In App

How to style React Native Application ?

Last Updated : 10 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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

Table of Content

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>


Using StyleSheet

StyleSheets separates the style code from the main elements. It makes the code easier to understand and increases its usability. In large code bases adding inline styles for each element can become messed up that's why stylesheets are used.

To use the stylesheet in your code, first import the stylesheet:

import { StyleSheet} from 'react-native';

Syntax:

const styles = StyleSheet.create({     style1Name: { },     style2Name: { },     style3Name: { }});


Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.


It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.


Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:


Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

  • For the Android users,
    • For the Android Emulator, press "a" as mentioned in the image below.
    • For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
  • For iOS users, simply scan the QR code using the Camera app.
  • If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.


Style Props Example

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

App.js:

App.js 
import React from 'react'; // Import React library to use React components and hooks
import {
  View, // Import View component to create a container
  Text, // Import Text component to display text
} from 'react-native'; // Import components from react-native library

// Define the main App component as the default export
export default function App() {
  // Return the UI of the App component
  return (
    <View
      style={{
        flex: 1, // Set flex to 1 to fill the entire screen
        justifyContent: 'center', // Center align items vertically
        alignItems: 'center', // Center align items horizontally
      }}
    > {/* Outer container view */}
      <View
        style={{
          backgroundColor: 'green', // Set background color to green
          height: 200, // Set height of the container to 200
          width: 200, // Set width of the container to 200
          justifyContent: 'center', // Center align items vertically
          alignItems: 'center', // Center align items horizontally
        }}
      >
        <Text
          style={{
            fontSize: 20, // Set font size of the text to 20
            color: 'white', // Set text color to white
            textAlign: 'center', // Center align the text
            margin: 10, // Add margin around the text
          }}
        >
          GeeksforGeeks {/* Text to be displayed */}
        </Text>
      </View>
    </View>
  );
}


Output:

style_prop


Using StyleSheet Example

Example 2: Let's convert the Example 1 code into styleSheet to demonstrate the use of Stylesheet. Write the below code in the App.js file.

App.js:

JavaScript 
import React from 'react'; // Import React library to use React components and hooks
import {
  View, // Import View component to create a container
  Text, // Import Text component to display text
  StyleSheet, // Import StyleSheet to create styles for components
} from 'react-native'; // Import components from react-native library

// Define the main App component as the default export
export default function App() {
  // Return the UI of the App component
  return (
    <View
      style={{
        flex: 1, // Set flex to 1 to fill the entire screen
        justifyContent: 'center', // Center align items vertically
        alignItems: 'center', // Center align items horizontally
      }}
    > {/* Outer container view */}
      <View
        style={styles.container} // Apply styles to the inner container view
      >
        <Text
          style={styles.text} // Apply styles to the text component
        >
          GeeksforGeeks {/* Text to be displayed */}
        </Text>
      </View>
    </View>
  );
}


// Define styles for the components
const styles = StyleSheet.create({
  container: { // Style for the container view
    backgroundColor: 'black', // Set background color to green
    height: 200, // Set height to 200
    width: 200, // Set width to 200
    justifyContent: 'center', // Center align items vertically
    alignItems: 'center', // Center align items horizontally
  },
  text: { // Style for the text component
    fontSize: 20, // Set font size to 20
    color: 'white', // Set text color to white
    textAlign: 'center', // Center align the text
    margin: 10, // Add margin around the text
  }
});


Output:

Using_StyleSheet



Next Article
How to create a basic button in React Native ?

S
sdeadityasharma
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox