CODEWITHSUNDEEP
javascriptreactjsreact-native
letmethink02
letmethink02

Reputation: 33

How to add custom component inside an Flatlist in React Native?

I have a Flatlist on react native by which its working perfectly, recently saw an UI which has a custom designed compoenent in between the list, kindly check the below reference image

Check this image, a new design named "Safety+" has been added inside an list, How to do this ?

Need to add custom design like below randomly inside and already rendered flatlist ! How to achieve this , as i couldn't find or understand where to start

enter image description here

Please check the image and help in achieving this:

 <FlatList 
                    contentContainerStyle={{ paddingBottom: 50 }}
                    data={this.state.availableBusList}
                    keyExtractor={item => item.id}
                    renderItem={({item}) => {
                        return(
                            <TouchableOpacity style={styles.busCardContainer}
                                    onPress={() => {
                                        console.log(item);
                                        //this.props.navigation.navigate('SeatLayout')
                                    }}

                                <Text>{item.name}</Text>
                                >)}}
/>

This is my flatlist code

Upvotes: 1

Views: 5956

Answers (2)

Drew Reese
Drew Reese

Reputation: 202874

You can return a fragment with your component and a randomly included component. The condition for inclusion is up to you, i.e. complete chance, every 5th element, etc.

<FlatList 
  contentContainerStyle={{ paddingBottom: 50 }}
  data={this.state.availableBusList}
  keyExtractor={item => item.id}
  renderItem={({item}) => {
    return(
      <Fragment> 
        <TouchableOpacity style={styles.busCardContainer}
          onPress={() => {
            console.log(item);
            //this.props.navigation.navigate('SeatLayout')
          }}
        >
          <Text>{item.name}</Text>
        </TouchableOpacity>
        {Math.random() < 0.5 && ( // example 50% chance to include random component
          <RandomComponent>...</RandomComponent>
        )}
      </Fragment>
    )}}
/>

Upvotes: 4

Thanh Chương
Thanh Chương

Reputation: 160

You can render conditionally in your renderItem function: https://reactjs.org/docs/conditional-rendering.html

Additionally, if you want to render your custom component at specific indexes, you can also put index parameter into renderItem. Here is my example:

<FlatList
  contentContainerStyle={{ paddingBottom: 50 }}
  data={this.state.availableBusList}
  keyExtractor={item => item.id}
  renderItem={({ item, index }) => {
    return index % 5 === 0 ? <CustomComponent /> : <NormalComponent />;
  }}
/>

Upvotes: 4

Related Questions