React Native List View Not Changing Style on State Change - reactjs

Question

My aim is to toggle a switch component and for that change in value to affect the state of the parent which will be rendered with a different style than from the default rendered style.
At the moment the state updates fine but the component isn't re-rendered.
import React, {
AppRegistry,
Component,
Image,
ListView,
StyleSheet,
Text,
View,
Switch
} from 'react-native';
var SONGS_DATA = {
"songs" : [
{
"title" : "I Heard React Was Good",
"artist" : "Martin",
"played" : false
},
{
"title" : "Stack Overflow",
"artist" : "Martin",
"played" : false
}
]
}
class BasicSwitchExample extends Component{
constructor(props){
super(props);
this.state = {
played: false
};
this.handlePlayed = this.handlePlayed.bind(this);
}
handlePlayed(value){
console.log('handlePlayed value: ' + value);
this.setState({played: value});
this.props.callbackParent(value);
}
render() {
return <View> // this has to be on the same line or it causes an error for some reason
<Switch
onValueChange={this.handlePlayed}
style={{marginBottom: 10}}
value={this.state.played} />
</View>
}
}
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.renderSong = this.renderSong.bind(this);
this.togglePlayed = this.togglePlayed.bind(this);
this.fetchData = this.fetchData.bind(this);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false
};
}
componentDidMount() {
this.fetchData();
}
togglePlayed(value) {
// this is never reached
this.setState({played: value});
console.log('Song has been played? ' + this.state.played);
}
fetchData() {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(SONGS_DATA.songs),
loaded: true,
});
}
render() {
if (!this.state.loaded) {
return this.renderLoadingView();
}
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderSong}
style={styles.listView}
/>
);
}
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading songs...
</Text>
</View>
);
}
renderSong(song) {
let bgStyle = this.state.played ? styles.played : styles.container;
console.log('style : ' + bgStyle); // prints 2 for some reason
return (
<View style={this.state.played ? styles.played : styles.container}>
<View style={styles.half}>
<Text style={styles.title}>{song.title}</Text>
<Text style={styles.artist}>{song.artist}</Text>
</View>
<View style={styles.half}>
<BasicSwitchExample callbackParent={this.togglePlayed} />
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
/* styles here */
},
played: {
/* styles here */
},
});
AppRegistry.registerComponent('SampleApp', () => AwesomeProject);
React Native Playground
For some reason when rendering the style, it's printed out as 2. This only happens when the app is first loaded and is never reached after a switch is toggled.

Answer 1

You're not mutating any state that's relevant to the ListView rendering. In togglePlayed you have to change parts of the state that will change the rendered list: https://rnplay.org/apps/z0fKKA