Flexbox is used to specify the layout of a component's children. the main thing is that it provides a consistent layout on different screen sizes. It works in the same way as it does in CSS. The difference is only that the react-native flex only supports a single number and the default direction of flex is a column instead of a row.
React Native Flex
It will define how a component going to fill over the available space along with the parent component. let's take an example to understand it properly.
import React from 'react';
import { StyleSheet, View} from 'react-native';
export default class App extends React.Component{
render(){
return(
<View style={styles.container}>
<View style={styles.first}></View>
<View style={styles.second}></View>
<View style={styles.third}></View>
<View style={styles.fourth}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
first: {
flex: 1,
backgroundColor: 'red'
},
second: {
flex: 2,
backgroundColor: 'green'
},
third: {
flex: 3,
backgroundColor: 'yellow'
},
fourth: {
flex: 1,
backgroundColor: 'blue'
}
});
Here in the above example, we define a parent View component and then we set flex: 1 property using container style.
It means it will take all the available space of its parent component that is the complete screen and inside the parent View component, we define our four View components and set the flex: 1, flex: 2, flex: 3, flex: 4 to the first, second, third and fourth child View component.
So the parent View space is divided into 1+2+3+1 = 7 equal blocks. So the first View component only takes space of one block and the second View component will take space of 2 blocks.
Similarly third View component takes the space of 3 blocks. and fourth will take space of one block as you see in the above-given image.
In react native flex can also have some other properties that are used to achieve the right layout for our app. let's see all the properties one by one.
React Native flexDirection
This property used to control the direction of the component. the default value for flexDirection is a column that means all the components will start from top to bottom.
React Native flexDirection:row
If flexDirection is set to row then all the children items inside a component will start from left to right.
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
return (
<View style={{flex: 1, flexDirection: 'row', marginTop: 40}}>
<View style={{width: 100, height: 100, backgroundColor: 'blue', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >1</Text>
</View>
<View style={{width: 100, height: 100, backgroundColor: 'green', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >2</Text>
</View>
<View style={{width: 100, height: 100, backgroundColor: 'red', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
</View>
</View>
);
};
export default App;
Here we define flexDirection: 'row' to the parent View. so all the child View start from left to right as you see in the above-given image.
React Native flexDirection:column
If we set flexDirection: 'column' then all the children items inside a component will fill by a column that is from top to bottom direction as you see in the given below image.
React Native flexDirection:row-reverse
If we set flexDirection: 'row-reverse' then all the children items inside a component will fill by right to left direction.
React Native flexDirection:column-reverse
If we set flexDirection: 'column-reverse' then all the children items inside a component will fill by the bottom to top direction.
React Native justifyContent
This property is used to align the child items inside a parent component using the main axis. the default value for justifyContent is flex-start means all the child components will fill from the top-left corner of the parent component.
React Native justifyContent:space-between
By using justifyContent: 'space-between' all the child items will get equal space between them.
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
return (
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', marginTop: 40}}>
<View style={{width: 100, height: 100, backgroundColor: 'blue', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >1</Text>
</View>
<View style={{width: 100, height: 100, backgroundColor: 'green', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >2</Text>
</View>
<View style={{width: 100, height: 100, backgroundColor: 'red', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
</View>
</View>
);
};
export default App;
Here we set flexDirection: 'column', and justifyContent: 'space-between' to parent View component. so all the child components will fill from top to bottom direction and also they will get the equal space between all of them using the vertical axis. because we define flexDirection to the column so our main axis is vertical as you could see in the given image above.
React Native justifyContent:flex-start
This property justifyContent: 'flex-start' is used to fill all the child components from the start corner of the parent component.
React Native justifyContent:flex-end
This property justifyContent: 'flex-end' is used to fill all the child components from the end corner of the parent component.
React Native justifyContent:center
This property justifyContent: 'center' is used to align all the components to the center of the parent component.
React Native justifyContent:space-around
This property justifyContent: 'space-around' is used to Evenly distribute all the available space between all the child components.
React Native alignItems
This property is similar to justifyContent but instead of applying a style to the main axis, it will apply throughout the cross axis. the default value that applies to this property is stretch.
React Native alignItems:stretch
This property is used to fill complete space to the cross axis of the parent component.
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
return (
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-around', alignItems: 'stretch' ,marginTop: 40}}>
<View style={{ height: 100, backgroundColor: 'blue', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >1</Text>
</View>
<View style={{ height: 100, backgroundColor: 'green', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >2</Text>
</View>
<View style={{ height: 100, backgroundColor: 'red', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
</View>
</View>
);
};
export default App;
Here to the main View component, we set flexDirection: 'column' so all the child components fill from top to bottom direction. and the property justifyContent: 'space-around' will give the equal space around the main axis to all the child components. after applying the alignItems: 'stretch' property all the components will fill all the available space of the parent axis through the cross axis that is the horizontal axis.
React Native alignItems:flex-start
This property alignItems: 'flex-start' is used to align the Items from the start corner of the parent's cross axis.
React Native alignItems:flex-end
This property alignItems: 'flex-end' is used to align the Items from the end corner of the parent's cross axis.
React Native alignItems:center
This property alignItems: 'center' is used to align the Items in the center of the parent's cross axis.
React Native flexWrap
This property is used to control the overflow condition of child items when the overall length of all the child components is greater than the parent component. The default value of this property is set to nowrap.
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
return (
<View style={{flex: 1, flexDirection: 'row' , flexWrap: 'nowrap', marginTop: 40}}>
<View style={{ height: 100, width: 100, backgroundColor: 'blue', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >1</Text>
</View>
<View style={{ height: 100, width: 100, backgroundColor: 'green', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >2</Text>
</View>
<View style={{ height: 100, width: 100, backgroundColor: 'red', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
</View>
<View style={{ height: 100, width: 100, backgroundColor: 'black', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
</View>
<View style={{ height: 100, width: 100, backgroundColor: 'pink', justifyContent: 'center'}} >
<Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 30}} >3</Text>
</View>
</View>
);
};
export default App;
Here, we apply the flexWrap: 'nowrap' property to the parent View component. and here we define 5 child components inside the parent View. but the total height of the all child View component is greater than the parent component. so here component will overflow and only the four-child view will display on the screen. here to overcome this condition we can apply flexWrap: 'wrap' property to the parent component. so all the child components will automatically wrap to the available screen as you could see in the given below image.
You may also like:
