Hack University
← All cheatsheets
React Native
Layout and Flexbox

React Native Cheatsheet

Layout and Flexbox

Use this React Native reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

Flexbox Basics

React Native uses Flexbox for all layout. Key differences from CSS: - Default flexDirection is 'column' (not 'row') - Default alignContent is 'flex-start' (not 'stretch') - flex only accepts a single number (not the CSS shorthand)

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
  <View style={{ flex: 1 }} />   {/* takes 1/3 of space */}
  <View style={{ flex: 2 }} />   {/* takes 2/3 of space */}
</View>

flexDirection

ValueMain axisCross axis
'column' (default)top → bottomleft → right
'column-reverse'bottom → topleft → right
'row'left → righttop → bottom
'row-reverse'right → lefttop → bottom
<View style={{ flexDirection: 'row' }}>
  <Text>Left</Text>
  <Text>Right</Text>
</View>

justifyContent (main axis)

ValueBehavior
'flex-start' (default)Pack to start
'flex-end'Pack to end
'center'Center
'space-between'Equal gaps between
'space-around'Equal gaps around
'space-evenly'Equal gaps including edges

alignItems (cross axis, per row)

ValueBehavior
'stretch' (default)Fill cross axis
'flex-start'Pack to cross-start
'flex-end'Pack to cross-end
'center'Center on cross axis
'baseline'Align text baselines

alignContent (cross axis, multi-line)

Only applies when flexWrap: 'wrap' and there are multiple lines.

ValueBehavior
'flex-start' (default)Lines at start
'flex-end'Lines at end
'center'Lines centered
'space-between'Equal gaps between lines
'space-around'Equal gaps around lines
'stretch'Lines stretch to fill

alignSelf (per child override)

<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
  <View style={{ alignSelf: 'flex-end' }} />   {/* overrides parent alignItems */}
  <View />
</View>

Same values as alignItems.

flex / flexGrow / flexShrink / flexBasis

// flex: N — shorthand (sets flexGrow:N, flexShrink:1, flexBasis:0)
<View style={{ flex: 1 }} />   // grows to fill available space

// Manual control
<View style={{ flexGrow: 1, flexShrink: 0, flexBasis: 100 }} />

// Fixed size, no grow/shrink
<View style={{ width: 100, height: 100 }} />
PropertyDefaultNotes
flex—Shorthand (RN only accepts a number)
flexGrow0How much to grow
flexShrink1How much to shrink
flexBasis'auto'Starting size before grow/shrink

flexWrap

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
  {items.map(item => <View key={item.id} style={{ width: '33%' }} />)}
</View>
ValueBehavior
'nowrap' (default)Single line
'wrap'Wrap to next line
'wrap-reverse'Wrap to previous line

gap / rowGap / columnGap

<View style={{ flexDirection: 'row', gap: 12 }}>
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
</View>

// Separate row and column gaps
<View style={{ flexWrap: 'wrap', rowGap: 8, columnGap: 16 }}>
  {items}
</View>

Note: gap requires React Native 0.71+ (Yoga engine update).

Common Layout Patterns

Full Screen

<View style={{ flex: 1 }}>
  {/* fills parent */}
</View>

Center Everything

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text>Centered</Text>
</View>

Header + Scrollable Content + Footer

<View style={{ flex: 1 }}>
  <View style={{ height: 56 }}>
    {/* Header */}
  </View>

  <ScrollView style={{ flex: 1 }}>
    {/* Content */}
  </ScrollView>

  <View style={{ height: 64 }}>
    {/* Footer / Tab Bar */}
  </View>
</View>

Two-Column Grid (with gap)

<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12, padding: 16 }}>
  {items.map(item => (
    <View key={item.id} style={{ width: '48%' }}>
      <Text>{item.name}</Text>
    </View>
  ))}
</View>

Sidebar + Content

<View style={{ flex: 1, flexDirection: 'row' }}>
  <View style={{ width: 240 }}>
    {/* Sidebar */}
  </View>
  <View style={{ flex: 1 }}>
    {/* Main content */}
  </View>
</View>

Absolute overlay

<View style={{ flex: 1 }}>
  <ScrollView>{/* content */}</ScrollView>

  <View style={{
    position: 'absolute',
    bottom: 24,
    right: 24,
  }}>
    <Pressable>
      <Text>FAB</Text>
    </Pressable>
  </View>
</View>

Spacer pattern

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <Text>Left</Text>
  <View style={{ flex: 1 }} />    {/* pushes Right to end */}
  <Text>Right</Text>
</View>

position: 'absolute'

// Covers entire parent
<View style={{
  position: 'absolute',
  top: 0, left: 0, right: 0, bottom: 0,
  backgroundColor: 'rgba(0,0,0,0.5)',
}} />

// OR
<View style={[StyleSheet.absoluteFillObject, { backgroundColor: 'rgba(0,0,0,0.5)' }]} />

Gotcha: Unlike CSS, absolutely positioned children are still constrained to their parent's bounds unless the parent has overflow: 'visible'. Android clips overflow by default — test both platforms.

aspectRatio

// Maintain 16:9
<View style={{ width: '100%', aspectRatio: 16 / 9, backgroundColor: '#000' }} />

// Square thumbnail
<Image source={...} style={{ width: 80, aspectRatio: 1 }} />

Debugging Layout

// Quick visual debug — red border
style={{ borderWidth: 1, borderColor: 'red' }}

// Element inspector — press `j` in Metro to open React Native DevTools,
// or shake the device → "Show Element Inspector"
// The React DevTools Components panel shows Yoga layout values