Component Layout with Flexbox
Flexbox provide a consistent layout on different screen sizes. Component can set layout of children using Flexbox.
For set right layout and place of child component we normally use combination of flexDirection, alignItems, and justifyContent .
Following are some properties that set layout
Example
I this example we apply all properties, You can change these values and see result in simulator for you practice.
App.js
import React from 'react';
import { StyleSheet, Text, View, Button, SafeAreaView, } from 'react-native';
export default class App extends React.Component {
render() {
return (
<SafeAreaView>
<View style={{flexWrap:'wrap',flex:1, justifyContent:'center',flexDirection:'row'}}>
<View style={{ width:150,height:150,backgroundColor:'red'}}></View>
<View style={{width:150,height:150,backgroundColor:'green'}}></View>
<View style={{width:150,height:150,backgroundColor:'blue'}}></View>
<View style={{width:150,height:150,backgroundColor:'cyan'}}></View>
</View>
</SafeAreaView>
);
}
}
Output:
