CODEWITHSUNDEEP
react-nativereact-native-flatlist
Graig Peru
Graig Peru

Reputation: 117

React Native flatlist conditional rendering

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

Answers (5)

Omar Odaini
Omar Odaini

Reputation: 101

This works for me:

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

Upvotes: 4

imKrishh
imKrishh

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

Swathy Ashokan
Swathy Ashokan

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

James Jones
James Jones

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

Nerdragen
Nerdragen

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

Related Questions