Reputation: 517
Deep inside my application, I have a component as follows:
import React, {Component} from 'react'
import {View, Text, FlatList, TouchableOpacity} from 'react-native'
export default class Screen extends Component {
constructor(props) {
super(props);
this.state = {
selected: null
}
}
renderText(item, index) {
return (
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: '#bbbbbb',
backgroundColor: this.state.selected == index ? 'blue' : 'white',
marginTop: index == 0 ? 0 : 10
}}
onPress={() => {
this.setState({selected: index})
}}
>
<Text style={{padding: 10}}>{item.text}</Text>
</TouchableOpacity>
)
}
renderArray() {
return (
<FlatList
data={this.props.data}
renderItem={({item, index}) => this.renderText(item, index)}
keyExtractor={(item, index) => index.toString()}
/>
)
}
render() {
return (
<View style={{margin: 10}}>
{this.renderArray()}
</View>
)
}
}
As you can see I'm rendering a FlatList
and for each item, in the array, there is a Text
component inside TouchableOpacity
. When you click on each item, this.setState({selected: index})
will set the selected
in state
to the index of that item. this.state.selected
is connected to the style of TouchableOpacity
and I'm expecting with clicking on an item the background of it turns to blue, But this is not happening and there is no color change at all. I'll be grateful if you help me with this.
Upvotes: 4
Views: 102
Reputation: 5186
<FlatList
data={this.props.data}
renderItem={({item, index}) => this.renderText(item, index)}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
/>
By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.
Upvotes: 1
Reputation: 56
The reason is that FlatList only re-renders when this.props.data
changes. You need to "hint" it to also watch changes for this.state
. To do so, set extraData={this.state}
on the FlatList. See https://facebook.github.io/react-native/docs/flatlist
Upvotes: 4