How to update the state of another tab

Question

I have two tabs in TabBarIOS.

The first tab offers the function of adding a new item to AsyncStorage

The second tab displays the entire item from AsyncStorage

But when I launch my application, after adding a new element from the first tab, go to the second tab, I do not see the page being rendered again, I will need to do the + R command, after which I will see my new data.

One way to solve the problem is to read asyncStorage in the mustComponentUpdate file, but note that shouldComponentUpdate will be called constantly, reacting. Although I only want to force the user interface to be updated on demand.

So, how to respond to native, what is the correct way to update the state of another component of the user interface?

Application example: https://drive.google.com/file/d/0B8kAIsj2xDnUMklIQmc0b3NiSVE/view?usp=sharing

Answer 1

That is what I am talking about. You will probably want to reorganize this a few times, but in general here, as I think, it will look at the end. I have yet to learn how to use life cycle functions correctly, and I'm not sure if you will need them right now when I think about it.

appContainer.js

I substantially deleted your NavigatorIOS. I think it was a mistake. Instead, I replace them with components, passing the data in the form of props, including a callback function for pressing a button. I moved the addData function to 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 greatly simplify your subcomponents ...

 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 have the same problem. In the end, using Redux solved it for me.

Official documentation

I highly recommend you the official Redux documentation.

Example

I will not try to teach you Redux, as the documentation is already really good. But I will try to describe some parts to give you an idea of ​​how to use Redux. I really can’t upgrade an existing application, since this is not a trivial setup. That would not be enough if most of the changes were cryptic to you.

In your action creator, you need to call AsyncStorage and use the values ​​in the reducer to update your state. An important part is connecting your components to the Redux store. You must connect it to the component that you download using NavigatorIOS , since NavigatorIOS does not update when the folders are updated.

 <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);