Skip to main content

Gap

Usage​

Please refer to the documentation on the Tailwind CSS website

How it works​

React Native does not have support for gap within flexbox, however we can provide something similar via margins. This is not a complete replacement for gap and should be used with caution. You most likely also need to add widths and overflow-hidden to achieve your desired effect.

// With this code
<View className="gap-4">
  <Text>0</Text>
  <Text>1</Text>
  <Text>2</Text>
</View>

// It will output as this
<View style={{ marginLeft: -4, marginTop: -4 }}>
    <Text style={{ marginLeft: 4, marginTop: 4  }}>0</Text>
    <Text style={{ marginLeft: 4, marginTop: 4  }}>1</Text>
    <Text style={{ marginLeft: 4, marginTop: 4  }}>2</Text>
</View>

Example​

Compatibility​

ClassNative (StyleSheet)Web (CSS)
gap-{n}✅✅
gap-[n]✅✅
gap-x-{n}✅✅
gap-x-[n]✅✅
gap-y-{n}✅✅
gap-y-[n]✅✅
Legend

Class​

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon​

✅ Full support

✔️ Partial support

❌ Not supported