Skip to content

Instantly share code, notes, and snippets.

@jungchris
Created March 16, 2017 20:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jungchris/96326ae0f42efc477c0f8ec0ad4f7ebb to your computer and use it in GitHub Desktop.
Save jungchris/96326ae0f42efc477c0f8ec0ad4f7ebb to your computer and use it in GitHub Desktop.
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