React-native-router-flux: Selecting current screen tab instantiates a new component

Created on 3 Mar 2017 · 9Comments · Source: aksonov/react-native-router-flux

I have a listview in a screen (in my case, a tab) and if I select the tab again (being already selected), a new component gets instantiated.

For example, if I scroll the list and then tap the tab button, the scroll will go to the top. It only happens the first time, so if you tap the tab button again, nothing will happen (and that's the expected behaviour, I guess).

Same happens "sometimes" (don't know exactly when) when moving within scenes and I don't think that's what should happen because you'll lose previous components state.

Versions I'm using:

react-native-router-flux v3.38.0
react-native v0.42.0
Android simulator

bug

Source

emipc

👍1

Most helpful comment

With react-native-router-flux v3.37.0 works as expected (not re-rendering the screen), so it seems a bug with v3.38.0 or its dependencies.

emipc on 3 Mar 2017

👍3 ❤1 🎉1

All 9 comments

With react-native-router-flux v3.37.0 works as expected (not re-rendering the screen), so it seems a bug with v3.38.0 or its dependencies.

emipc on 3 Mar 2017

👍3 ❤1 🎉1

Yes, facing the same issue, rolling back to 3.37.0

Amurmurmur on 3 Mar 2017

I face the same issue even in 3.37

ousat on 4 Mar 2017

I can confirm that issue disappears in 3.37.0 but does exist in 3.38.0.

@sk15973
Make sure that you restart the react-native packager after youve installed a new package.

And also make sure that you use componentDidMount/componentWillMount/componentWillReceiveProps accordingly, and dont do many unnecessary changes to the state.

Amurmurmur on 4 Mar 2017

Same issue here.

@sk15973 In your package.json file please make sure that your react-native-router-flux dependency does not include the caret (^) symbol:

"dependencies": {
    "react-native-router-flux": "3.37.0",   // Good
    "react-native-router-flux": "^3.37.0", // Bad
}

With the caret symbol you will actually use v3.38.0 when you do a fresh npm install. This is because react-native-router-flux seems to have broken semver by introducing a change in behaviour in a minor release.

Please forgive me @aksonov for tagging you, but I believe this to be somewhat serious because the caret ^ is inserted by default when using npm install react-nativer-router-flux --save. Over time users of this library might find themselves in cryptic troubles after doing fresh npm install. But I totally understand if you don't have the time : )