Centering a View component on screen

The View component is the fundamental building block used to create layouts in React Native. It acts as a container that supports styling, layout, and nesting of other components.

• It represents a container, similar to <div> in web development.
• It can contain other components, including nested Views and UI elements.
• It supports layout, styling, and Flexbox properties for designing the interface.

Approach

To center a View component on the screen, we can use two approaches: 

• Using flexbox: This most common method to center components in React Native. It provides a responsive layout without using float or positioning.
• Using CSS position property: Th is another way to center components in React Native. It uses absolute positioning to place the component relative to its parent.

Centering components involves using justifyContent and alignItems properties within a View container. Achieving pixel-perfect alignment requires careful attention to layout properties.

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

Step 3: Start Coding

Example 1: Using flexbox

We will use a single View Component with nested Text components as its children. To center our View component, we will use the flex property, which is set to 1, along with the justifyAlign and alignItems properties (both set to center since the View component is required to be centered on the screen).

Output

Example 2: Using the CSS position property

We will use a single View Component with nested Text components as its children. To center our View component, we will use the position property, which is set to absolute. We will also use the top, bottom, left and right values and set them to 0 (since the View component is required to be centered on the screen). As before, we will also require the justifyAlign and alignItems properties with their values set as center.

Output