How to update another tab`s state - tabs

Question

I have two tabs in side a TabBarIOS.
First tab is offer function to add new item into AsyncStorage
Second tab display all item from AsyncStorage
But when i run my app, after adding a new item from First Tab, navigate to second tab i don`t see page re-render, i will need to do a Command+R then i see my new data.
One way to resolve the issue is to read asyncStorage in shouldComponentUpdate, but notice that shouldComponentUpdate will be called constantly by react. While i want to only force update the UI on demand.
So in react native, what is the right way to update state of another UI component?
sample app:
https://drive.google.com/file/d/0B8kAIsj2xDnUMklIQmc0b3NiSVE/view?usp=sharing

Answer 1

Here's what I'm talking about. You will probably want to refactor this a bit once done, but in general here's how I think this would look in the end. I've still a lot to learn about using the lifecycle functions properly, and I'm not sure you'll need them now that I think about it.
appContainer.js
I've essentially removed your NavigatorIOS. I think those were a mistake. Instead, I'm replacing them with the components, passing down the data as props, including a callback function for the button press. I've moved the addData function up a level.
class AppContainer extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'data-list',
dataLen: 0
}
AsyncStorage.getItem("all-data")
.then((data)=>{
if(!data)
{
data = "[]";
}
var dataObj = JSON.parse(data);
this.setState({
dataLen : dataObj.length
});
});
this.addData.bind(this);
}
addData() {
AsyncStorage.getItem("all-data")
.then((data)=>{
if(!data)
{
data = "[]";
}
var dataObj = JSON.parse(data);
dataObj.push({
val: Date.now()
});
AsyncStorage.setItem("all-data", JSON.stringify(dataObj));
this.setState({
dataLen: dataObj.length
});
});
}
render() {
return (
<TabBarIOS style={styles.container}>
<TabBarIOS.Item
title="Add Data"
selected={this.state.selectedTab == 'add-data'}
onPress={()=> this.setState({selectedTab: 'add-data'})}
>
<AddData onButtonPress={this.addData} dataLen={this.state.dataLen} />
</TabBarIOS.Item>
<TabBarIOS.Item
title="Data List"
selected={this.state.selectedTab == 'data-list'}
onPress={()=> this.setState({selectedTab: 'data-list'})}
badge={this.state.dataLen}
>
<DataList dataLen={this.state.dataLen} />
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
addData.js
This will simplify your sub-components significantly...
class AddData extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<Text>{this.props.dataLen}</Text>
<TouchableHighlight
onPress={this.props.onButtonPress}
style={styles.button}>
<Text style={styles.buttonText}>Plus One</Text>
</TouchableHighlight>
</View>
);
}
}
dataList.js
class PlayerList extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<Text>{this.props.dataLen}</Text>
</View>
);
}
}

Answer 2

Use Redux
Have you ever thought about using Redux or something equally?
I had the same problem. Eventually the use of Redux solved it for me.
Official documentation
I highly recommend you the official documentation of Redux.
Example
I will not try to teach you Redux, since the documentation is already really good. But I will try to outline some parts, to give you an idea how to use Redux. I really can't update your existing app, since it's not a trivial tweak. It wouldn't be really sufficient, if the most changes would be cryptic for you.
In your action creators you need to call AsyncStorage and use the values in your reducer to update your state. The important part is the connection of your components with the Redux store. You have to connect it with the component, which you load via NavigatorIOS, since NavigatorIOS doesn't update when passProps update.
<NavigatorIOS
initialRoute={{
component: MyView,
title: 'My View Title',
}}
/>
// MyView Component
...
class MyView extends Component {
...
}
// Prepare the information of the global state and only pass the relevant values as `props` to the component.
function mapStateToProps(state) {
const { isFetching, isError, lastUpdated } = state.posts;
const { entities: posts } = state.posts || { entities: {} };
return {
posts,
isFetching,
isError,
lastUpdated
}
}
export default connect(mapStateToProps)(MyView);