title: How to set state to child component in React Native
body: <p>I'm trying to create a React Native app for managing categories and items. It uses <strong>React Native Store</strong> to save all local data. The app should not and will not use an internet API. It will be local and offline only.</p>
  
  <p>I managed to push items to the DB when calling the <code>addCategory(title)</code> function but it does not update the state inside <code>categories.js</code></p>
  
  <p>Since there is a spectacular lack of documentation concerning the <code>state</code> in react-native, I wondered if anyone here knows how to make it update through the listview and when changing from the <code>categories</code> to the <code>items</code> to <code>details</code> Components.</p>
  
  <p>I'm using React Native 0.26</p>
  
  <p><strong>index.ios.js</strong>:</p>
  
  <pre><code>... // default imports
  import Store from 'react-native-store'
  
  const categorieslist = require('./categories')
  const DB = {
    'categories': Store.model('category'),
    'items': Store.model('item')
  }
  
  class testapp extends Component {
    componentDidMount() {
      this.reload()
    }
    reload() {
      DB.categories.find().then(resp =&gt; this.setState({
        categories: resp
      }))
    }
    addCategory(title) {
      var newTitle = title;
      DB.categories.add({
        title: newTitle,
        games: []
      })
      this.reload()
    }
    render() {
      return (
        &lt;View&gt;
          &lt;NavigatorIOS
            ...
            initialRoute={{
              component: categorieslist,
              title: 'Categories',
              rightButtonTitle: 'New',
              onRightButtonPress: () =&gt; {this.addCategory('title')},
              passProps: {
                categories: this.state.categories
              }
            }}
          /&gt;
        &lt;/View&gt;
      )
    }
  }
  ... // AppRegistry registerComponent and stuff
  </code></pre>
  
  <p>and <strong>categories.js</strong>:</p>
  
  <pre><code>... // default imports
  class categories extends Component {
    constructor(props) {
      super(props)
      var ds = new ListView.DataSource({rowHasChanged: (row1, row2) =&gt; row1 !== row2})
      this.state = {
        dataSource: ds.cloneWithRows(props.categories)
      }
    }
    render() {
      if (this.state.dataSource.getRowCount() === 0) {
        ... // shows 'no categories' screen
      } else {
        return(
          &lt;ListView 
            dataSource={this.state.dataSource}
            renderRow={(rowData) =&gt; &lt;View&gt;&lt;Text&gt;{rowData}&lt;/Text&gt;&lt;/View&gt;}
          /&gt;
        )
      }
    }
  }
  module.exports = categories
  </code></pre>