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
Class | Native (StyleSheet) | Web (CSS) |
---|---|---|
gap-{n} | ✅ | ✅ |
gap-[n] | ✅ | ✅ |
gap-x-{n} | ✅ | ✅ |
gap-x-[n] | ✅ | ✅ |
gap-y-{n} | ✅ | ✅ |
gap-y-[n] | ✅ | ✅ |