How to use Flexbox in React Native ?
Last Updated :
17 Jun, 2021
Flexbox is used to provide consistency to a layout. It is used to make the layout adaptive to the screen size of the device it is running on. Using flexbox design you can specify that a certain element of layout will span to this fraction of the available space.
In React Native, Flexbox is the same as it is for basic CSS. The only difference being in default values.
- flexDirection: The default value for CSS is row whereas the default value in React Native is column.
- alignContent: The default value for CSS is stretch the default value in React Native is flex-start.
- flexShrink: The default value for CSS is 1 whereas the default value in React Native is 0.
Now let’s start with the implementation:
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 AwesomeProject
Step 3: Now go into your project folder i.e. AwesomeProject
cd AwesomeProject
Project Structure: It will look like this.
Project StructureFlex property: Flex property will define how the components in your layout are going to span over the available space along your main axis which by default is a column. Space will be divided in the ratio of each element's flex property.
Example: Write down the following code in the App.js file.
App.js
import React from 'react';
import {View } from 'react-native';
export default function App() {
return (
<View style={{
flex: 1
}}>
<View style={{ flex: 4, backgroundColor: "white" }} />
<View style={{ flex: 1, backgroundColor: "black" }} />
<View style={{ flex: 7, backgroundColor: "green" }} />
</View>
);
}
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.
OutputFlex Direction Property: The flexDirection property controls the direction in which the children of a node are laid out, that is, the main axis. There are four types of flexDirection given below:
- column (default value): This aligns children from top to bottom in a vertical manner.
- row: This aligns children from left to right in a horizontal manner.
- column-reverse: This aligns children from bottom to top in vertical space.
- row-reverse: This aligns children from right to left in horizontal space.
Example: Write down the following code in the App.js file.
App.js
import React from 'react';
import {View } from 'react-native';
export default function App() {
return (
<View style={{
flex: 1,
flexDirection: "row",
}}>
<View style={{ flex: 4, backgroundColor: "white" }} />
<View style={{ flex: 1, backgroundColor: "black" }} />
<View style={{ flex: 7, backgroundColor: "green" }} />
</View>
);
}
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.
OutputReference: https://reactnative.dev/docs/flexbox
Similar Reads
How to add Floating Buttons in React Native ? React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.In this article, we will
2 min read
How to use Paper Component in ReactJS ? In Material Design, the physical properties of paper are translated to the screen. Material UI for React has this component available for us and it is very easy to integrate. We can use the Paper Component in ReactJS using the following approach. Prerequisites:React JSMaterial UIApproachTo use Paper
2 min read
How to create a Banner in react-native ? React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render m
3 min read
How to add a Touchable Ripple in react-native ? React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render m
2 min read
How to create a Surface in react-native ? React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render m
3 min read
How to set Background Image in react-native ? In this article, we will see how to set background Image in react-native. In our project, we will simply set a background image and show a text input on top of it. Setting background images requires using the ImageBackground component in React Native. You can style it further to adapt to different s
5 min read
How to use Popper Component in ReactJS ? A Popper is used to show the part of the content on top of another. It's an alternative feature for react-popper. Material UI for React has this component available for us, and it is simple and very easy to integrate. For perfect positioning, it uses 3rd party library which is Popper.js.Prerequisite
3 min read
How to Create Card with Box Shadow in React Native ? Creating Card with box shadow in react native makes it stand out within the interface and display information in an appealing way. It will be done in React Native by using the expo cli. Expo simplifies cross-platform app development by providing a unified codebase for iOS, Android, and the web. With
4 min read
How to Implement Radio Button In React Native ? In this article, we will learn to implement a Radio Button in React Native. A radio button signifies a graphical user interface element enabling individuals to make an exclusive seÂlection among multiple alternativeÂs. React Native is a popular platform for creating native mobile apps for iOS and A
10 min read