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.