Styling in React Native Application

Styling in React Native is used to design and customize the appearance of components like layout, colors, size, and position. It is similar to CSS but uses JavaScript objects instead of CSS files.

• React Native uses the StyleSheet API to create reusable and organized styles.
• Styles are applied using the style prop on components like View, Text, and Button.
• It supports styling properties like flexbox, margin, padding, color, and fontSize for layout and design.

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.

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

2. For iOS users, simply scan the QR code using the Camera app.

3. 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 will demonstrate the style of props. Write the below code in the App.js file.

App.js:

Output:

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:

Output: