React-native: how to highlight a flatlist item when it is touched

user_10792914 0
Viewed 1009

I have a flatlist and I want a background color to appear on an item in the list when it is touched. See image below; this is what should happen if I touch "game_name3":

enter image description here

But nothing happens; it stays looking like the screen on the left.

Here is my code:

constructor (props) {
    super(props);
    this.state = {
        ...
        game_names: [
            {game_name:"game_name1", players:4},
            {game_name:"game_name2", players:4},
            {game_name:"game_name3", players:4},
            {game_name:"game_name4", players:4},
            {game_name:"game_name5", players:4},
            {game_name:"game_name6", players:4},
        ],
        game_selected: '',
        ...
    }
}
...
selectPublicGame = (game) => {
    this.setState({game_selected: game});
}

renderItem = ({item}) => {
  const unselected_game =
  <View style={{flexDirection: 'row', flex: .5, justifyContent: 'space-between'}}>
    <Text style={[styles.listText, styles.textPaddingHorizontal]}>
      {item.game_name}
    </Text>
    <Text style={[styles.listText, styles.textPaddingHorizontal]}>
      ({item.players}/6)
    </Text>
  </View>;

  const selected_game =
  <View style={{flexDirection: 'row', flex: .5, justifyContent: 'space-between', backgroundColor: colors.JBTealTrans}}>
      <Text style={[styles.listText, styles.textPaddingHorizontal]}>
        {item.game_name}
      </Text>
      <Text style={[styles.listText, styles.textPaddingHorizontal]}>
      ({item.players}/6)
    </Text>
  </View>;

  let selection;

  if (item.game_name == this.state.game_selected) {
      selection = selected_game
  } else {
      selection = unselected_game
  }

  return (
    <TouchableWithoutFeedback
      onPress={() => this.selectPublicGame(item.game_name)}
    >
      {selection}
    </TouchableWithoutFeedback>
  )
}
...
render() {
  ...
  return(
    ...
    <FlatList
      data={this.state.game_names}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => index.toString()}
    />
    ...
  )
}
...

Each item in the flatlist is wrapped in TouchableWithoutFeedback, onPress sets the game_selected state to the game name that was selected. The items are conditionally rendered. If the game name is the same as the game_selected state, it should render the "selected_game" constant, which has the backgroundColor style, but is not doing anything for some reason.

react-native
1 Answers

FlatList is a pure component and only re-renders if strict equality checking on its data or extraData props returns false. Since your component rendering depends on state.game_selected that will need to be included in extraData:

<FlatList
      data={this.state.game_names}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => index.toString()}
      extraData={this.state.game_selected}
    />
user_118471250
Related