on a Scene, componentDidMount only gets called once and componentWillReceiveProps never gets called

[r88r]

Version

Using:

• react-native-router-flux v3.26.1
• react-native v0.26.1

I have some simple scene components that are set up as such:

<Router>
  <Scene key="root">
    <Scene key="tabbar" tabs={true}
            rightButtonImage={require('./img/settings-icon-small.png')}
            onRight={Actions.settings}
            >
        <Scene key="tab2" icon={TabIcon} title="Component 1">
            <Scene key="component1" component={Component1} title="Title 1" />
        </Scene>
        <Scene key="tab3" icon={TabIcon} initial={true} style={{flex:1, backgroundColor:'transparent'}} title="Component 2">
            <Scene key="component2" component={Component2} title="Title 2" />
        </Scene>
        <Scene key="tab1" icon={TabIcon} title="Component 3">
            <Scene key="component3" component={Component3} title="Title 3" />
        </Scene>
    </Scene>
    <Scene key="settings" title="Settings" component={Settings} />
  </Scene>
</Router>

The tab components are supposed to use a setting from AsyncStorage to decide what content to show.

The "settings" component does a simple action, allows a user to set an option that is saved in AsyncStorage. This is confirmed as working, by setting, then reloading the app and checking the saved value.

Navigating to the Settings component is achieved by a link in top right of Navigation Bar, and then returning to the main three tabbed components is done by simply using the Navigation Bar "back" button behavior.

Current trials and errors:

Pass as a prop from AppRoot to Scene

• AppRoot is where the is set up, render() has above code snippet
• works great on initial load, but no subsequent life-cycle events are triggered so the AppRoot is never triggered to re-load the AsyncStorage value, and thus never generates a new prop value to pass down to Scene components.

Attempting to read the AsyncStorage from the independent components.

• works great on initial load, but no subsequent life-cycle events are triggered so the components never know when to look again.

How should I accomplish this?
Am I doing something wrong in the implementation?
Am I making a wrong assumption of how RNRF works?

[hartmamt]

+1

[cridenour]

This is a limitation of how tabs are implemented in react-native in general AFAIK. They are all mounted with the TabBar. You can check if the tab is selected through it's props though - which makes me think there might be a bug if that lifecycle event is never called. Can you fork the Example for a simple example for us?

[hartmamt]

I was actually having a similar issue but it was related to redux. If my scene points to a container component that I've 'connected' to my store everything works. I had my container too high up and the props weren't passing down to the scene.

[aksonov]

@cridenour answered, closing this issue.