React Native flatlist conditional rendering

Question

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?

Answer 1

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.

Answer 2

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}
/>

Answer 3

This works for me:

                renderItem={({ item }) => ( 
                  item.isDeleted == false ?  
                  <View>
                       <Activity isRunning={item.isRunning} />
                    </View>
                     : null
                )}
                keyExtractor={(item) => item.title}
              />

Answer 4

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>
}

Answer 5

I think it will help you

renderItem={({ item, index })=>
    <View>
        {index == 0 ? <Text>Some Text</Text> : <Text>Some Text</Text> }
    </View>
}}