Space between
Usage
Please refer to the
documentation on the Tailwind CSS website
How it works
React Native does not have support child selectors, however styled
components are context aware and can pass down information.
// With this code
<View className="space-x-1">
<Text>0</Text>
<Text>1</Text>
<Text>2</Text>
</View>
// It will output as this
<View>
<Text>0</Text>
<Text style={{ marginLeft: 4 }}>1</Text>
<Text style={{ marginLeft: 4 }}>2</Text>
</View>
Compatibility
Class | Native (StyleSheet) | Web (CSS) |
---|---|---|
space-{n} | ✅ | ✅ |
space-[n] | ✅ | ✅ |
space-x-{n} | ✅ | ✅ |
space-x-[n] | ✅ | ✅ |
space-y-{n} | ✅ | ✅ |
space-y-[n] | ✅ | ✅ |
space-x-reverse | ❌ | ✅ |
space-y-reverse | ❌ | ✅ |