react-native component lifecycle methods not firing on navigation

Question

I am having an issue where I setState in multiple components based on the same key in AsyncStorage. Since the state is set in componentDidMount, and these components don't necessarily unmount and mount on navigation, the state value and the AsyncStorage value can get out of sync.

Here is the simplest example I could make.

Component A

A just sets up the navigation and app.

var React = require('react-native');
var B = require('./B');

var {
    AppRegistry,
    Navigator
} = React;

var A = React.createClass({
    render() {
        return (
            <Navigator
                initialRoute={{
                    component: B
                }}
                renderScene={(route, navigator) => {
                    return <route.component navigator={navigator} />;
                }} />
        );
    }
});

AppRegistry.registerComponent('A', () => A);

Component B

B reads from AsyncStorage on mount, and then sets to state.

var React = require('react-native');
var C = require('./C');

var {
    AsyncStorage,
    View,
    Text,
    TouchableHighlight
} = React;

var B = React.createClass({
    componentDidMount() {
        AsyncStorage.getItem('some-identifier').then(value => {
            this.setState({
                isPresent: value !== null
            });
        });
    },

    getInitialState() {
        return {
            isPresent: false
        };
    },

    goToC() {
        this.props.navigator.push({
            component: C
        });
    },

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>
                    {this.state.isPresent
                        ? 'Value is present'
                        : 'Value is not present'}
                </Text>

                <TouchableHighlight onPress={this.goToC}>
                    <Text>Click to go to C</Text>
                </TouchableHighlight>
            </View>
        );
    }
});

module.exports = B;

Component C

C reads the same value from AsyncStorage as B, but allows you to change the value. Changing toggles both the value in state and in AsyncStorage.

var React = require('react-native');
var {
    AsyncStorage,
    View,
    Text,
    TouchableHighlight
} = React;

var C = React.createClass({
    componentDidMount() {
        AsyncStorage.getItem('some-identifier').then(value => {
            this.setState({
                isPresent: value !== null
            });
        });
    },

    getInitialState() {
        return {
            isPresent: false
        };
    },

    toggle() {
        if (this.state.isPresent) {
            AsyncStorage.removeItem('some-identifier').then(() => {
                this.setState({
                    isPresent: false
                });
            })
        } else {
            AsyncStorage.setItem('some-identifier', 'some-value').then(() => {
                this.setState({
                    isPresent: true
                });
            });
        }
    },

    goToB() {
        this.props.navigator.pop();
    },

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>
                    {this.state.isPresent
                        ? 'Value is present'
                        : 'Value is not present'}
                </Text>

                <TouchableHighlight onPress={this.toggle}>
                    <Text>Click to toggle</Text>
                </TouchableHighlight>

                <TouchableHighlight onPress={this.goToB}>
                    <Text>Click to go back</Text>
                </TouchableHighlight>
            </View>
        );
    }
});

module.exports = C;

If you toggle in C and then return to B, the state in B and value in AsyncStorage are now out of sync. As far as I can tell, navigator.pop() does not trigger any component lifecycle functions I can use to tell B to refresh the value.

One solution I am aware of, but isn't ideal, is to make B's state a prop to C, and give C a callback prop to toggle it. That would work well if B and C would always be directly parent and child, but in a real app, the navigation hierarchy could be much deeper.

Is there anyway to trigger a function on a component after a navigation event, or something else that I'm missing?

Answer 1

Ran into the same issue as you. I hope this gets changed, or we get an extra event on components to listen to (componentDidRenderFromRoute) or something like that. Anyways, how I solved it was keeping my parent component in scope, so the child nav bar can call a method on the component. I'm using: https://github.com/Kureev/react-native-navbar, but it's simply a wrapper around Navigator:

class ProjectList extends Component {
  _onChange(project) {
    this.props.navigator.push({
      component: Project,
      props: { project: project },
      navigationBar: (<NavigationBar
        title={project.title}
        titleColor="#000000"
        style={appStyles.navigator}
        customPrev={<CustomPrev onPress={() => {
          this.props.navigator.pop();
          this._sub();
        }} />}
      />)
    });
  }
}

I'm pushing a project component with prop data, and attached my navigation bar component. The customPrev is what the react-native-navbar will replace with its default. So in its on press, i invoke the pop, and call the _sub method on my ProjectList instance.

Answer 2

I think the solution to that should be wrapper around the AsyncStorage and possibly using "flux" architecture. https://github.com/facebook/flux with the help of Dispatcher and Event Emitters - very similar to flux chat example: https://github.com/facebook/flux/tree/master/examples/flux-chat

First and most important. As noted in AsyncStorage docs: https://facebook.github.io/react-native/docs/asyncstorage.html

It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.

So I believe you should build your own specific "domain" storage which will wrap the generic AsyncStorage and will do the following (see storages in the chat example):

1. expose specific methods (properties maybe?) for changing the values (any change should trigger "change" events after async change finishes)
2. expose specific methods (properties maybe?) for reading the values (those could become properties read synchronously as long as the domain storage caches the values after the async change finishes)
3. expose a "register for change" method (so that components that need to respond to change can register)
4. in such "change" event handler the component's state should be set as read from the storage (reading the property)
5. last but not least - I think it's best if following react's patterns, you make changes to the storage's through Dispatcher (part of flux). So rather than components calling the "change" method directly to the "domain storage", they generate "actions" and then the "domain" storage should handle the actions by updating it's stored values (and triggering change events consequently)

That might seem like an overkill first, but It solves a number of problems (including cascading updates and the like - which will be apparent when the app becomes bigger - and it introduces some reasonable abstractions that seem to make sense. You could probably to just points 1-4 without introducing the dispatcher as well - should still work but can later lead to the problems described by Facebook (read the flux docs for more details).