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]	✅	✅

Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Full support

✔️ Partial support

❌ Not supported