React native flatlist leaves empty spaces, for items that don't match conditions - react-native

Question

The first row shows a single card, this is because the item suppose to be there doesn't match the condition stated. But I want to remove this space, and put the next card which is currently on the next line there.
{state.data ? <FlatList
data={state.data}
renderItem={({ item }) => {
console.log(item)
return (
<View style={{ justifyContent: 'space-evenly', marginHorizontal: 0 }}>
<View>
{item.available == 1 ?
<TouchableOpacity activeOpacity={.8} onPress={() => navigation.navigate('Appointment', { id: item.id, name: item.name, phone: item.phone, email: item.email, session: item.session, player_id: item.player_id, picture: item.picture })} >
<Card style={{ width: width / 2.05, alignItems: 'center', justifyContent: 'center', borderRadius: 15, paddingTop: 10, height: height / 2.4 }}>
<CardItem cardBody>
<Image
source={{ uri: 'http://example.com/storage/' + item.picture }}
style={{ height: 200, width: null, flex: 1 }}
/>
</CardItem>
<CardItem>
<Text> {item.name} </Text>
</CardItem>
</Card>
</TouchableOpacity>
: null}
</View>
</View>
)
}}
numColumns={2}
/> : <ActivityIndicator size="large" style={{ alignItems: 'center', justifyContent: 'center', flex: 1, flexDirection: 'row' }} />}
The null value just shows that empty space, is there a way to completely remove this empty space?

Answer 1

You need to filter your data. Otherwise, your code will create empty Views.
Try to filter your data as follows.
It would be good if you move this filter logic from your render method.
{state.data ? <FlatList
data={state.data.filter(item => item && item.available === 1)}
renderItem={({ item }) => {
return (
<View style={{ justifyContent: 'space-evenly', marginHorizontal: 0 }}>
<TouchableOpacity activeOpacity={.8}
onPress={() => navigation.navigate('Appointment', { id: item.id, name: item.name, phone: item.phone, email: item.email, session: item.session, player_id: item.player_id, picture: item.picture })} >
<Card style={{ width: width / 2.05, alignItems: 'center', justifyContent: 'center', borderRadius: 15, paddingTop: 10, height: height / 2.4 }}>
<CardItem cardBody>
<Image
source={{ uri: 'http://example.com/storage/' + item.picture }}
style={{ height: 200, width: null, flex: 1 }}
/>
</CardItem>
<CardItem>
<Text> {item.name} </Text>
</CardItem>
</Card>
</TouchableOpacity>
</View>
)
}}
numColumns={2}
/> : <ActivityIndicator size="large" style={{ alignItems: 'center', justifyContent: 'center', flex: 1, flexDirection: 'row' }} />}