How to remove space between flexes in react native?(flexWrap) - react-native

Question

How to remove space between flex. (spaces is marked in green)
I am currently using flex-wrap: 'wrap', and flat list with 2 columns. I am trying to archive something like google keep
My code:-
<FlatList
data={[
{ storeName: 'The Look' },
{ storeName: 'STYLO' },
{ storeName: 'Bombshell studio' },
{ storeName: 'STYLO1' },
{ storeName: 'The Look2' },
{ storeName: 'STYLOe' },
{ storeName: 'STYdLO1' },
{ storeName: 'Thed Look2' },
{ storeName: 'STdYLOe' },
]}
numColumns={2}
columnWrapperStyle={{
flex: 1,
flexWrap: 'wrap',
flexDirection: 'row',
alignItems: 'flex-start',
paddingLeft: 15,
}}
containerStyle={{
width: '100%',
}}
renderItem={({ item }) => (
<ARecentBooking key={item.storeName} storeName={item.storeName} />
)}>
</FlatList>

Answer 1

You can implement the UI as shown below
import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Dimensions } from 'react-native';
import Constants from 'expo-constants';
const DeviceWidth = Dimensions.get('window').width;
export default function App() {
const renderItem = ({ item }) => (
<View style={styles.Card}>
{/* ALl Other COde here...Like the 15 AUG and everything */}
</View>
);
return (
<View style={styles.container}>
<FlatList
data={[
{ storeName: 'The Look' },
{ storeName: 'STYLO' },
{ storeName: 'Bombshell studio' },
{ storeName: 'STYLO1' },
{ storeName: 'The Look2' },
{ storeName: 'STYLOe' },
{ storeName: 'STYdLO1' },
{ storeName: 'Thed Look2' },
{ storeName: 'STdYLOe' },
]}
numColumns={2}
columnWrapperStyle={{
flex: 1,
flexWrap: 'wrap',
flexDirection: 'row',
}}
containerStyle={{
width: '100%',
}}
renderItem={renderItem}></FlatList>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: 'white',
},
Card: {
flex: 1,
backgroundColor: '#FFEAEC',
minHeight: 150,
margin: 10,
borderRadius: 12,
maxWidth: DeviceWidth / 2 - 20,
},
});
Here is a Snack for the same.
Here's a Screenshot of the result.

Answer 2

method 1:- I manage to get the result with some workaround:-
<ScrollView style={{flexDirection:'row'}}>
//put two faltlist
<Flatlist scrollEnabled={false}/>
<Flatlist scrollEnabled={false}/>
<ScrollView/>
put items of the odd index in the first flatlist
and even items in the second flatList
function separateArrays(array) {
let arr1=[]
let arr2=[]
for(i=0; i<array.length; i++) {
if(i%2 === 0) {
arr1.push(array[i])
}
else{
arr2.push(array[i])
}
}
return [arr1, arr2]
}
method 2:-It also can be done using .map function
<ScrollView>
<View style={{ flexDirection: 'row', paddingLeft: 15 }}>
<View>
{arr1.map((item, index) => {
return <ARecentBooking key={item.storeName} item={item} />
})}
</View>
<View>
{arr2.map((item, index) => {
return <ARecentBooking key={item.storeName} item={item} />
})}
</View>
</View>
</ScrollView>