CODEWITHSUNDEEP
iosreact-nativereact-native-flatlist
Oleksii Lyhun
Oleksii Lyhun

Reputation: 113

How add separator into FlatList after some data portion?

How can I add separator in React-Native FlatList after rendered some data?

I'm tried use React-Native SectionList, but I can't add fetchNext function like in FlatList.

This is my current code

<FlatList
  data={data}
  keyExtractor={keyExtractor}
  renderItem={renderItem}
  fetchNext={fetchNextPage}
  numColumns={2}
  ItemSeparatorComponent={<View style={this.separatorStyles} />}
  ListFooterComponent={isFetching && <LoaderView notExpand />}
/>

|####| |####|
|####| |####|
|####| |####|

|####| |####|
|####| |####|
|####| |####|
------------- (need add some separator)
|####| |####|
|####| |####|
|####| |####|

|####| |####|
|####| |####|
|####| |####|

Upvotes: 0

Views: 2594

Answers (2)

Konstantin Paulus
Konstantin Paulus

Reputation: 2195

For documentation purposes I'll post a more detailed answer. Here is the important code:

const data = [{ id: 1 }, { id: 2 }, { separator: true, id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }];

renderItem = ({ item }) => item.separator ? (
  <Text>-------- separator -------</Text>
) : (
  <Text>{`------${item.id}------`}</Text>
);

<FlatList
  renderItem={this.renderItem}
  data={data}
  numColumns={2}
/>

Notice that if the separator takes the full screen width, item 4 will be rendered outside the screen. You could render an empty View for instance after the separator.

Upvotes: 1

Tim
Tim

Reputation: 10719

You can easily achieve this by modifying your data and creating a more advanced renderItem function. First we start with modifying the data. I used the following example data: 

    data: [
        { id: '1'},{ id: '2'},{ id: '3'},{ id: '4'},{ id: '5'},{ id: '6'},{ id: '7'},{ id: '8'},{ id: '9'},{ id: '10'}
    ]

Now let's modify it, see code comments for explanation: 

modifyData(data){
    const numColumns = 2; // we want to have two columns
    const separator = 4;  // after 4 elements we want to have a separator 
    var tmp = []; // temporary array to store columns
    var newData = [];
    data.forEach((val, index) => {
      // check if column is full, if yes push it to the new array
      if (index % numColumns  == 0 && index != 0){
        newData.push(tmp);
        tmp = [];
      }
      // inject separator element if necessary, we mark them with id: -1
      if ( index % separator == 0 && index != 0){
        newData.push({ id: -1 })
      }
       tmp.push(val);
    }); 
    if (tmp.length > 0){
        // add remaining elements
        newData.push(tmp);
    }
   return newData;
  }
  render() {
    // modify your data, afterwards pass it to the FlatList 
    const newData = this.modifyData(this.state.data);
    return (
      <View style={styles.container}>
       <FlatList
        data={newData}
        renderItem={({item, index}) => this.renderItem(item, index)}
       />
      </View>
    );
  }

Now the data looks like: 

    data: [
        [{ id: '1'},{ id: '2'}],[{ id: '3'},{ id: '4'}], {id: -1},[{ id: '5'},{ id: '6'}],[{ id: '7'},{ id: '8'}], { id: -1 },[{ id: '9'},{ id: '10'}]
    ]

Now we enhance the renderItem function: 

renderItem(item, index){
    // check if the current item is a separator
    if (item.id == -1){
      return (
        <View key={index} style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
            <Text> --------SEPERATOR -------- </Text>
        </View>
      )
    }
    // otherwise loop over array
    const columns = item.map((val, idx) => {
      return (
        <View style={{flex: 1, justifyContent: 'center'}} key={idx}>
          <Text style={{textAlign: 'center'}}> ID: {val.id} </Text>
        </View>
      )
    });
    return (
      <View key={index} style={{flexDirection: 'row', flex: 1}}>
        {columns}
      </View>
    )
  }

Output:

demo

Working example:

https://snack.expo.io/SJBUZ4i2V

Upvotes: 1

Related Questions