Flexbox

React Native uses Flexbox for layout. Note: unlike CSS, flexDirection defaults to column (not row) in React Native.

Key Properties

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',   // 'row' | 'column' (default: column!)
    justifyContent: 'center',  // main axis alignment
    alignItems: 'center',      // cross axis alignment
    flexWrap: 'wrap',          // wrap items
  }
})

justifyContent values

• flex-start — pack at start (default)
• flex-end — pack at end
• center — center
• space-between — equal gaps between items
• space-around — equal gaps around items
• space-evenly — equal gaps everywhere

alignItems values

• flex-start, flex-end, center, stretch

Example: Centered Layout

const CenteredScreen = () => (
  <View style={{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }}>
    <Text>I am centered!</Text>
  </View>
)