CODEWITHSUNDEEP
javascriptcssreact-nativereact-native-flatlist
Abraham
Abraham

Reputation: 9885

Separating items inside a list

I have a list of items inside a Flatlist and I want to separate them with a point (‧) like this:

Eg

I have something like this: (snack.expo.io/@abranhe/flatlist-separator)

<FlatList
  data={[ 'foo', 'bar', 'hello', 'word' ]}
  renderItem={({ item }) => <Text>{item} ‧ </Text>}
  horizontal={true}
  keyExtractor={(item, index) => index.toString()}
/>

Unfortunately, it will add an extra point (‧) at the end of the items.

foo ‧ bar ‧ hello ‧ world ‧

Is there a simple way to remove the last separator from the list?

foo ‧ bar ‧ hello ‧ world

Thanks in advance!

Upvotes: 2

Views: 1706

Answers (2)

Sanyam Jain
Sanyam Jain

Reputation: 1194

Use ItemSeparatorComponent

<FlatList
  data={data}
  horizontal
  renderItem={({ item }) => <Text>{item}</Text>}
  keyExtractor={(item, index) => index.toString()}
  ItemSeparatorComponent={() => <Text> ‧ </Text>}
/>

Upvotes: 2

bennygenel
bennygenel

Reputation: 24680

renderItem prop has a property called index which tells you the index of the current rendering item. You can check that to see if it is the last item.

Example

<FlatList
  data={this.state.someData}
  renderItem={({ item, index }) => (
    <Text>{(index !== (this.state.someData.length -1) ? `${item} -` : item)} </Text>
  )}
  horizontal={true}
  keyExtractor={(item, index) => index.toString()}
/>

Upvotes: 0

Related Questions