How to set state to child component in React Native - ios

Question

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

Answer 1

State in react-native is the same as react (web). So you can refer to the documentation here: https://facebook.github.io/react/docs/component-api.html
state is local to each component. In your reload method you setState to this which is the testapp Component and not the categories Component.
You must pass your state to the categories component via props.