how to Use if in FlatList - react-native

Question

I have array which has images. I want to give show images in flatlist everything is ok now. But I want to show some of them I mean if condition is true show that image.
this is my code:
renderItem={ ({ item }) =>
{
if (true) {
<View style={{ width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' }} >
<TouchableOpacity onPress={() => this.props.navigation.navigate('DescriptionPage', { data: item.call })}>
<ImageBackground source={item.img} style={{ width: 60, height: 60 }} />
</TouchableOpacity>
</View>
}
else {
...
}
}
}
if I use like this there is no error and it shows all images.
<FlatList
data={images}
keyExtractor={(item, index) => index.toString()}
numColumns={4}
renderItem={ ({ item }) =>
<View style={{ width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' }} >
<TouchableOpacity onPress={() => this.props.navigation.navigate('DescriptionPage', { data: item.call })}>
<ImageBackground source={item.img} style={{ width: 60, height: 60 }} />
</TouchableOpacity>
</View>
}
/>
There is mistake here I dont know why :
{
if (true)
{
...
}
else
{
...
}
}

Answer 1

you forgot to add return inside if else condition:
do it like this:
renderItem={ ({ item }) =>
{
if (true) {
// add return
return(
<View style={{ width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' }} >
<TouchableOpacity onPress={() => this.props.navigation.navigate('DescriptionPage', { data: item.call })}>
<ImageBackground source={item.img} style={{ width: 60, height: 60 }} />
</TouchableOpacity>
</View>
)
}
else {
// add return
return(
...
)
}
}
}

Answer 2

Just use this kind of setup:
return (isTrue) ?
<TouchableOpacity onPress={() => this.props.navigation.navigate('DescriptionPage', { data: item.call })}>
<ImageBackground source={item.img} style={{ width: 60, height: 60 }} />
</TouchableOpacity> : null;
This should render the component if it is true, else, it won't render anything.