title: React Native - Conditional Styles on Parent Based on Child State
body: <p>I was following the React Native tutorial and have tried to adapt it to show a list of songs rather than movies and add in a toggling ability using the <code>Switch</code> component.</p>
  
  <p>I managed to get this to work but now I am trying to send the value of the switch back to the parent so that a conditional style can be applied.</p>
  
  <p>When I attempted to do this, I get an error saying</p>
  
  <pre><code>undefined is not an object (evaluating 'this.state.played')
  </code></pre>
  
  <p>which seems sensible since the <code>console</code> statement in the <code>togglePlayed</code> never seems to be called.</p>
  
  <pre><code>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
      }
    ]
  }
  
  var BasicSwitchExample = React.createClass({
    getInitialState() {
      return {
        played: false
      };
    },
    handlePlayed(value) {
      console.log('Switch has been toggled, new value is : ' + value)
      this.setState({played: value})
      this.props.callbackParent(value);
    },
    render() {
      return (
        &lt;View&gt; 
          &lt;Switch
            onValueChange={this.handlePlayed}
            style={{marginBottom: 10}}
            value={this.state.played} /&gt;
        &lt;/View&gt;
      );
    }
  });
  
  class AwesomeProject extends Component {
    constructor(props) {
      super(props);
      this.state = {
        dataSource: new ListView.DataSource({
          rowHasChanged: (row1, row2) =&gt; row1 !== row2,
        }),
        loaded: false,
      };
    }
  
    componentDidMount() {
      this.fetchData();
    }
  
    getInitialState() {
      return {
        played: false
      };
    }
  
    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 (
        &lt;ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderSong}
          style={styles.listView}
        /&gt;
      );
    }
  
    renderLoadingView() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text&gt;
            Loading songs...
          &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  
    renderSong(song) {
      return (
        // not sure if this syntax is correct
        &lt;View style={this.state.played ? 'styles.container' : 'styles.played'}&gt;
          &lt;View style={styles.half}&gt;
            &lt;Text style={styles.title}&gt;{song.title}&lt;/Text&gt;
            &lt;Text style={styles.artist}&gt;{song.artist}&lt;/Text&gt; 
          &lt;/View&gt;
          &lt;View style={styles.half}&gt;
            &lt;BasicSwitchExample callbackParent={() =&gt; this.togglePlayed} /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  var styles = StyleSheet.create({
    /* styles here */
  });
  
  AppRegistry.registerComponent('AwesomeProject', () =&gt; AwesomeProject);
  </code></pre>
  
  <p><a href="https://rnplay.org/apps/mnanvw" rel="nofollow">React Native Playground</a></p>
  
  <p>Any pointers would be great as I am new to React and especially React Native.</p>