javascript - How to add custom component inside an Flatlist in React Native? - Stack Overflow

admin管理员组

文章数量:1394153

I have a Flatlist on react native by which its working perfectly, recently saw an UI which has a custom designed poenent 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

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

I have a Flatlist on react native by which its working perfectly, recently saw an UI which has a custom designed poenent 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

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

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Sep 30, 2020 at 7:39 letmethink02 asked Sep 30, 2020 at 7:09 letmethink02letmethink02 3311 silver badge55 bronze badges 2

• Do you want a custom ponent separating each item? or only "randomly" include it? What have you tried? Please be more specific with what your desired output should/could be. – Drew Reese Commented Sep 30, 2020 at 7:21
• Randomly include it . I dont know where to start, as the flatlist renders a list - i dont know how to intrude it and add a custom ponent – letmethink02 Commented Sep 30, 2020 at 7:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can return a fragment with your ponent and a randomly included ponent. The condition for inclusion is up to you, i.e. plete 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 ponent
          <RandomComponent>...</RandomComponent>
        )}
      </Fragment>
    )}}
/>

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

Additionally, if you want to render your custom ponent 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 />;
  }}
/>

本文标签： javascriptHow to add custom component inside an Flatlist in React NativeStack Overflow