Reputation: 117
I have the following flat list in react native with the following items.
key name type
Now i also have the following renderItem function that is used to render the elements of the flatlist.
renderItem={({ item }) => (
<View>
<View style={styles.navBarLeftButton}>
<Avatar
medium
rounded
source={{uri:item.name}}
activeOpacity={0.7}
onPress={() => console.log(this.state.data)}
/>
<Text style={styles.textbutton}>{item.type}</Text>
<Text>{item.description}</Text>
<Text>{item.request} <Emoji name={item.request} style={{fontSize: 15}} />
<Emoji name="pray" style={{fontSize: 15}} /></Text>
</View>
</View>
)}
I want to render a different render function base on the item key of the flatlist Is there away i can do conditional rendering with react native flatlist base on key?
Upvotes: 6
Views: 21662
Reputation: 101
This works for me:
renderItem={({ item }) => (
item.isDeleted == false ?
<View>
<Activity isRunning={item.isRunning} />
</View>
: null
)}
keyExtractor={(item) => item.title}
/>
Upvotes: 4
Reputation: 977
Based on 'theme' values in variable DATA (as keys) FlatList renderItem prop is conditionally accepting different Views/Components returned by separate functions
<FlatList
data={DATA}
renderItem={({ item, index }) => {
if (item.theme === 1) {
return this.renderTheme1({ item });
}
return this.renderTheme2({ item });
}}
keyExtractor={item => item.id}
/>
Upvotes: 4
Reputation: 1
I think it will help you
renderItem={({ item, index })=>
<View>
{index == 0 ? <Text>Some Text</Text> : <Text>Some Text</Text> }
</View>
}}
Upvotes: 0
Reputation: 1506
Are you looking to return two different template sets? Something like:
renderItem={({item, index}) => {
if (index == 0) {
return <View style={{flex: 1, flexDirection: 'row'}}>
<Image source={item.image} style={styles.flatList_imageView} resizeMode="contain"/>
</View>
}
return <View style={{flex: 1, flexDirection: 'row'}}>
<Text>{item.key}</Text>
</View>
}
Upvotes: 2
Reputation: 3210
The renderItem
prop for Flatlist can accept 2 arguments, the second being index, so you can do something like
renderItem={({ item, index })=>{
if(index = 0){
//do something
}
}}
Then just throw in a switch or some if statements and you can render conditionally.
Upvotes: 5