React Native Layout

Introduction to React Native Layout

In react native, React Native layout helps us in structuring the application which makes the user interface more attractive and inspiring for the users. React native component uses flexbox to layout the applications based on react native. Flexbox works in the same way as it works over CSS with some exceptions. The defaults are quite different on react native, like flex Direction defaults to column instead of row, and only a single number is supported by the flex parameter.

Properties of React Native Layout

React native flexbox uses the properties like align-items, flex-direction, justify-content for placing the children in a layout. The flexDirection of a component is determined by the primary axis of the layout. The axis will be vertical if the flexDirection is column otherwise it would be horizontal. Below is the diagram which will illustrate how flexDirection, primary and secondary axis are related to each other.

1. flexDirection

Syntax:

import React, { Component } from 'react';
import { View } from 'react-native';
export default class FlexDirectionBasics extends Component { render() {
return (
// Try setting `flexDirection` to `column`.
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};

2. layoutDirection

Layout direction is used to specify the direction to layout the children and text. Edge start and end are also affected by Layout direction. React Native is laid out with the LTR layout direction by default. Start is referred to left and right is referred for the end in this mode.

LTR which is the default value has the Text and children laid out from left to right. Margin and padding are applied on the left side of the element. RTL has the Text and children laid out from right to left. Margin and padding are applied on the right side of the element.

3. justifyContent

• justifyContent helps in aligning the children under the main axis of the container. This property can be used to center a child within the container horizontally and the flex-direction should be set to row or vertically if the flex-direction is set to the column.
• Flex-start which is a default value helps in aligning the children to the start of the main axis of the container.
• Flex-end helps in aligning the children to the end of the main axis of the container. The center helps in aligning the children to the center of the main axis of the container.
• Space-between provides even space between the children throughout the main axis of the container.
• Space-around provides even space around the children throughout the main axis of the container, it distributes the remaining space around the children. Unlike space between, space-around provides evenly distributed space to the beginning of the child and at the end of the last child.
• Space-evenly provides Evenly distributed space along the main axis. The spaces are provided between the pairs of adjacent items.

Syntax:

import React, { Component } from 'react';
import { View } from 'react-native';
export default class JustifyContentBasics extends Component {
render() { '
return (
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};

How to Create a New React Native Layout?

Let’s see how to create a new react native layout:

Code:

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.firstrow}></View>
<View style={styles.secondrow}></View>
<View style={styles.thirdrow}></View>
<View style={styles.fourthrow}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#1f2041',
},
firstrow: {
flex: 1,
backgroundColor: "#ffc857"
},
secondrow: {
flex: 1,
backgroundColor: "#4b3f72"
},
thirdrow: {
flex: 1,
backgroundColor: "#119da4"
},
fourthrow: {
flex: 1,
backgroundColor: "#19647e"
}
});

Output:

flexDirection

Let try and change the flexDirection of the parent component from the default column to row.

Code:

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
backgroundColor: '#1f2041',
},
}

Output:

Now that we have an idea of how flex works, we will move over to justifycontent. The code snippet is below and note that the only thing we will be changing is the justifyContent value.

Code:

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.firstrow}></View>
<View style={styles.secondrow}></View>
<View style={styles.thirdrow}></View>
<View style={styles.fourthrow}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 40,
backgroundColor: '#1f2041',
justifyContent: 'flex-start'
},
firstrow: {
width: 160,
height: 160,
backgroundColor: "#ffc857"
},
secondrow: {
width: 160,
height: 160,
backgroundColor: "#4b3f72"
},
thirdrow: {
width: 160,
height: 160,
backgroundColor: "#119da4"
},
fourthrow: {
width: 160,
height: 160,
backgroundColor: "#19647e"
}
});

justifyContent

Justify component is used to distribute child components in their parent component along the primary axis.

1. Flex-start

 In flex-start, the child components are aligned at the start of the page. Space is left at the bottom of the page.

2. Center

When we pass a value of center as justifyContent, we can see that the child view is at the center of the screen either vertical or horizontal which depends on the primary axis direction. Equal space is distributed at the top and bottom of the page.

3. Flex-end

 When we assign the value of justifyContent to flex-end, it will result in the opposite of what we got when we used flex-start.

4. Space-around

 With space-around, all of the child components are distributed with equal spacing around them.

5. Space-between

 With space-width, the child components are given equal spacing between.

Recommended Articles

This is a guide to the React Native Layout. Here we discuss how to create a new react-native layout along with properties. You may also look at the following articles to learn more-

1. React Native Architecture
2. React Native SectionList
3. React Native State
4. React Native ScrollView