I want to add some spacing in react native using flatlist, but it seems more difficult than it should be at the moment.
Turns out that react native does not support gap
property, which makes this very complicated.
I solved the horizontal spacing, by making my item 49.5%
wide which means I have 1%
space horizontally, now how do I do the same for vertical spacing?
Most importantly how do i ensure that both horizontal and vertical "gaps" are EQUAL.
const renderItem = ({ item }) => (<Pressable onPress={() => alert(item.name)} style={{ aspectRatio: 1, width: "49.5%", position: "relative", }}><Image style={{ width: "100%", height: "100%" }} source={{ uri: item.url, }} /><View style={{ position: "absolute", zIndex: 3, bottom: 0, paddingHorizontal: 2, paddingVertical: 8, flexDirection: "row", // justifyContent: "center", alignItems: "center", }}><Text style={{ color: "white", fontSize: 16 }}>{item.name}</Text></View></Pressable>);export default function App() { return <FlatList numColumns={2} data={people} renderItem={renderItem} columnWrapperStyle={{ justifyContent: "space-between" }} />}