RN(7) Layout With Flexbox

Layout with Flexbox

1. Flex Direction

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View } from 'react-native';
class MyFirstReactNativeProject extends Component {
render() {
return (
// Try setting `flexDirection` to `column`.
<View style={{flex : 1, flexDirection : 'row'}}>
<View style={styles.smallBlue} />
<View style={styles.middleBlue} />
<View style={styles.bigBlue} />
</View>
);
}
}
const styles = StyleSheet.create({
smallBlue : {
backgroundColor : 'powderblue',
width : 50,
height : 50
},
middleBlue : {
backgroundColor : 'skyblue',
width : 50,
height : 50
},
bigBlue : {
backgroundColor : 'steelblue',
width : 50,
height : 50
}
});
AppRegistry.registerComponent('MyFirstReactNativeProject', () => MyFirstReactNativeProject);

20:52:04.jpg

2. Justify Content

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View } from 'react-native';
class MyFirstReactNativeProject extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
<View style={{flex : 1, flexDirection : 'row', justifyContent : 'space-between'}}>
<View style={styles.smallBlue} />
<View style={styles.middleBlue} />
<View style={styles.bigBlue} />
</View>
);
}
}
const styles = StyleSheet.create({
smallBlue : {
backgroundColor : 'powderblue',
width : 50,
height : 50
},
middleBlue : {
backgroundColor : 'skyblue',
width : 50,
height : 50
},
bigBlue : {
backgroundColor : 'steelblue',
width : 50,
height : 50
}
});
AppRegistry.registerComponent('MyFirstReactNativeProject', () => MyFirstReactNativeProject);

20:54:00.jpg

3. Align Items

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View } from 'react-native';
class MyFirstReactNativeProject extends Component {
render() {
return (
// Try setting `alignItems` to 'flex-start'
// Try setting `justifyContent` to `flex-end`.
// Try setting `flexDirection` to `row`.
<View style={{flex : 1, flexDirection : 'column', justifyContent : 'center', alignItems : 'center'}}>
<View style={styles.smallBlue} />
<View style={styles.middleBlue} />
<View style={styles.bigBlue} />
</View>
);
}
}
const styles = StyleSheet.create({
smallBlue : {
backgroundColor : 'powderblue',
width : 50,
height : 50
},
middleBlue : {
backgroundColor : 'skyblue',
width : 50,
height : 50
},
bigBlue : {
backgroundColor : 'steelblue',
width : 50,
height : 50
}
});
AppRegistry.registerComponent('MyFirstReactNativeProject', () => MyFirstReactNativeProject);

21:01:40.jpg

More info: Layout Props