Initial Scene remounts (twice) after appstate going to inactive/background

[mightym]

Version

• react-native-router-flux v4.0.5 (happening on older version too)
• react v16.2.0
• react-native v0.5.2

Android/iOS

Expected behaviour

Using only react native and one component:

• app is going to appstate inactive/background
• component unmounts
• thats it

Actual behaviour

Using rnrf and one view:

class AppRouter extends React.Component {
  render() {
    return (
      <Router >
        <Stack hideNavBar key="root">
          <Scene
            init
            initial
            key="start"
            hideNavBar
            component={StartView}
          />
        </Stack>
      </Router>
    );
  }
}

• app is going to appstate inactive/background
• component lifecycle methods called:

1. componentWillMount
2. componentWillUnmount
3. componentDidMount
4. componentWillMount
5. componentWillUnmount
6. componentDidMount

This only happens for the first scene in your routes. Others are not affected.
I'm pretty sure that this is around since a few versions.
I encountered the issue on several other projects in the past that the the component gets remounted in the background. For most usecases this is not a big deal.

In my current case I'm starting an interval on componentDidMount for that view. And I wondered why its always started again when my app went to inactive/background.

Whats also weird is that componentWillMount is called before componentDidMount

[forsen]

How do you navigate to that stack? If you navigate directly to the scene, Actions.push('start'), the scene will be mounted twice. To avoid that the first scene is mounted twice, one should navigate to the stack, not the first scene. Try pushing the stack instead, Actions.push('root'), and see if that helps.

[mightym]

Its the initial scene. It just gets rendered. No Actions involved. And the issue is not about that its mounting initially twice. The issue is about the scence getting remounted twice when the app goes to background/is getting inactive.

[aksonov]

@mightym Could you reproduce it with RNRF's example?