Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native Template for Flexbox Layout
// This expands on the React Native docs
// https://facebook.github.io/react-native/docs/height-and-width.html
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{flex: 5, backgroundColor: 'powderblue'}}>
<Text style={{ fontSize: 18, fontFamily: fonts.base}}>Box 1</Text>
</View>
<View style={{flex: 2, backgroundColor: 'skyblue'}}>
<Text>Box 2</Text>
</View>
</View>
<View style={{flex: 1, backgroundColor: 'steelblue'}}>
<Text>Box 3</Text>
</View>
</View>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.