React-native-router-flux: Components are mounted twice

[ghost]

Version

• react-native-router-flux v4.0.6
• react v16.6.1
• react-native v0.57.5
• ios 12.x

Expected behaviour

Navigate back to a component and navigate back again. Didmount should be executed once.

Actual behaviour

Navigate to the component again immediately after a component back , it should not cause the component to be mounted twice .

Steps to reproduce

Navigate from "home" to ”productList“

          <Router style={styles.container}>
            <Modal key='modal' hideNavBar>
              <Stack key='root'>
                <Tabs key='tabs'
                      initial
                      hideNavBar>
                  <Scene key='home' tabBarLabel='home' title='home' component={Home}/>
                  <Scene key='profile' tabBarLabel='profile' title='profile' component={Profile}/>
                </Tabs>
                <Stack key='productList' title='productList' component={ProductList}/>
              </Stack>
            </Modal>
          </Router>

Reproducible Demo

The official demo can reproduce this bug

I think this may be because I re-entered the component immediately after exiting the component.

My English is not very good, I hope you can understand, God bless 🙏

[chaudhryjunaid]

👍 same here. in fact the initial scene component in a nested stack loaded for the first time is also mounted twice. @aksonov this is deal-breaking for us in using this library. Could you please help?

[chaudhryjunaid]

@aksonov there are multiple components mounted twice issues in this repo but none open of the same nature in React Navigation which tells me either the React Native base navigation version needs to be updated or something wrong with this module itself instead of some bug in React Navigation.

[chaudhryjunaid]

Reference issues are: https://github.com/aksonov/react-native-router-flux/issues/3349
https://github.com/aksonov/react-native-router-flux/issues/2651
https://github.com/aksonov/react-native-router-flux/issues/2382
And another possibly related issue: https://github.com/aksonov/react-native-router-flux/issues/2254

Even the closed ones present no solutions or PRs targeted towards solving this problem.

[chaudhryjunaid]

Perhaps moving to React Navigation 3.x will fix this.

[ev3nst]

I had the same problem but not for same reason i believe. i was using AsyncStorage to get saved localization and using states to make it wait to render Router component. The problem i had was not rendering anything when loading.

if (this.state.isLoading == true) {
    return (
        <ActivityIndicator/>
    )
} else {
    return (
        <Router>

so this kind of logic worked for me.

[sandeep-sethia]

any solution till date for this issue? I am facing the same in "react-native-router-flux": "^4.0.6",

[jariwalabhavesh]

@sandeep-sethia : I am also facing same issue with "react-native-router-flux": "4.0.6",

[syntax-e]

Also facing the same issue with "react-native-router-flux": "4.0.6"

[Srijans-nd]

Facing the same issue. RNRF v:"4.0.6".
In my case I was trying to open a component from deep link, when it was already mounted with a different data set, so I was navigating back, and navigating again to same component. In this scenario, constructor was getting called twice.

[Karthiksheety]

@Srijans-nd
I am facing same issue from Deep link, when component was mounted with deep link route , it was navigating back for root component and it was called twice.

example consider 2 screens home and challenge
on app.js file I am taking deep link URL matching with parameter then navigating to specified screen. Data will load on challenge screen componentDidMount() function will call but after that it will call Home screen componentDidMount().

I hope you found a solution for this process, please help how I can resolve in my scenario.