I want to make sure that the selected item is always in the middle of the flatlist. The middle item is selected. The style of the chosen one is different than the others.

 <FlatList data={items}
                                      style={styles.listStyle}
                                      ref={(ref) => {
                                          this.flatListRef = ref;
                                      }}
                                      snapToAlignment={'center'}
                                      horizontal

                                      onPress={this.onPressButton}
                                      showsHorizontalScrollIndicator={false}
                                      renderItem={({item, index}) => (
                                          <TouchableWithoutFeedback style={{justifyContent: 'center'}}
                                                                    onPress={this.onPressButton}>
                                              <View style={{justifyContent: 'center'}}>
                                                  <View   style={styles.containerView}>
                                                      <View
                                                          style={[styles.circlesBack, (this.state.selectedId === index) ? styles.circles : styles.circlesBack]}>
                                                          {this.state.selectedId === index ?
                                                              <FontAwesome size={24} name={item.icon} color="white"/> :
                                                              <FontAwesome size={24} name={item.icon} color="#BEBEBE"/>}
                                                      </View>
                                                      {this.state.selectedId === index ? <Text
                                                              style={[styles.itemText, (this.state.selectedId === index) ? styles.itemText : styles.itemTextBack]}>{item.title}</Text> :
                                                          <Text> </Text>}

                                                  </View>
                                              </View>
                                          </TouchableWithoutFeedback>
                                      )}
                                      keyExtractor={item => item.id}/>

this is what it looks like now

it should look like this

How to do it?

Thank you

I want to make sure that the selected item is always in the middle of the flatlist. The middle item is selected. The style of the chosen one is different than the others.

 <FlatList data={items}
                                      style={styles.listStyle}
                                      ref={(ref) => {
                                          this.flatListRef = ref;
                                      }}
                                      snapToAlignment={'center'}
                                      horizontal

                                      onPress={this.onPressButton}
                                      showsHorizontalScrollIndicator={false}
                                      renderItem={({item, index}) => (
                                          <TouchableWithoutFeedback style={{justifyContent: 'center'}}
                                                                    onPress={this.onPressButton}>
                                              <View style={{justifyContent: 'center'}}>
                                                  <View   style={styles.containerView}>
                                                      <View
                                                          style={[styles.circlesBack, (this.state.selectedId === index) ? styles.circles : styles.circlesBack]}>
                                                          {this.state.selectedId === index ?
                                                              <FontAwesome size={24} name={item.icon} color="white"/> :
                                                              <FontAwesome size={24} name={item.icon} color="#BEBEBE"/>}
                                                      </View>
                                                      {this.state.selectedId === index ? <Text
                                                              style={[styles.itemText, (this.state.selectedId === index) ? styles.itemText : styles.itemTextBack]}>{item.title}</Text> :
                                                          <Text> </Text>}

                                                  </View>
                                              </View>
                                          </TouchableWithoutFeedback>
                                      )}
                                      keyExtractor={item => item.id}/>

this is what it looks like now

it should look like this

How to do it?

Thank you

• javascript
• node.js
• reactjs
• react-native

• Is this answer what you want ? stackoverflow./a/43512934/13107433 – 高鵬翔 Commented Apr 6, 2020 at 1:22
• I tried. Unfortunately, that didn't help. – ntx2 Commented Apr 6, 2020 at 6:47

1 Answer 1

You should use like this:

this.flatListRef.scrollToIndex({animated: true, index: 30, viewPosition:0.5})

Valid params keys are:

'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to true.

'viewPosition' (number) - A value of 0 places the item specified by index at the top, 1 at the bottom, and 0.5 centered in the middle.

Here is someone's code for example, you can instead the line

this.flatListRef.scrollToIndex({animated: true, index: 30,viewPosition:0.5});

of

this.flatListRef.scrollToIndex({animated: true, index: randomIndex});

then you can see it works(at right choose android or ios to run will be better)

docs

But the several begins item seems can't go to middle because of there are no data before. Or you can use react-native-infinite-looping-scroll to let other data at bottom connect back to first. Maybe can achieve this problem.