ListItem not rerendering in FlatList when observable array changes - react-native

Question

I have component called CheckListItem that contains:
<ListItem
leftAvatar={this.props.leftAvatar}
title={this.props.title}
leftIcon={this.state.icon}
onPress={(event) => {
this.props.onSelect();
}}
containerStyle={{ backgroundColor: this.state.color }}
switch={{ value: this.props.isSelected, disabled: true }} // <-- this switch
/>
I export it as an observer:
export default (observer(CheckListItem));
And use it from my so called CountryPage:
render() {
console.log(toJS(this.props.store.countries)); // <-- prints the expected updated list
return (
<View style={{ flex: 1 }}>
<Text>{this.state.ouputText}</Text>
<FlatList
data={this.props.store.countries}
renderItem={({ item }) =>
<CheckListItem
title={item.name}
leftAvatar={{ source: { uri: item.flag } }}
onSelect={() => { SearchParameters.getInstance().setCountrySelected(item.key); }}
isSelected={item.isSelected} //<-- won't update
/>
}
/>
</View>
);
}
I inject my store which is the singleton instance of SearchParameters
export default inject('store')(observer(CountryPage));
Whenever I get my SearchParameters instance and change any of the properties inside the list (isSelected) that resides there. CountryPage rerenders and log the expected updated list. My problem is that this don't update CheckListItem - and rerenders it. How can I make my CheckListItem component receive the updated props whenever the list elements change and rerender?

Answer 1

I found my answer is the second answer here: React Native mobx binding to FlatList not working. Adding Observer around CheckListItem made it so that the 'isSelected' was passed down thus updating the switch.
render() {
console.log(toJS(this.props.store.countries));
return (
<View style={{ flex: 1 }}>
<Text>{this.state.ouputText}</Text>
<FlatList
data={this.props.store.countries}
renderItem={({ item }) =>
<Observer>
{() =>
<CheckListItem
title={item.name}
leftAvatar={{ source: { uri: item.flag } }}
onSelect={() => { SearchParameters.getInstance().setCountrySelected(item.key); }}
isSelected={item.isSelected}
/>
}
</Observer>
}
/>
</View>
);
}