React-native-router-flux: Changed behavior of scenes into stack (always opens the first one after switching)

[Komalov]

Version

• react-native-router-flux v4.0.1
• react v16.5
• react-native v0.57

Expected behaviour

I'd like to save behaviour from previous versions of scenes into stacks.

We have stacks with scenes (tab stacks, actually). We navigate in one stack between scenes, get scene №3 (for example) and tap on tab for entering another stack.

When we'll open previous stack, we get scene №3 (like at the moment we left this stack) and continue to use the app

Actual behaviour

When we'll open previous stack, we'll lose our state and see a pop to first scene in stack.

[daviscabral]

I believe to have it working you will need to create a stack inside the tab with your scenes. But I am not sure - a sample code would make it easier to understand - it's really hard to see what you are doing and see if this is going to do what you need.

[Komalov]

It's simple model of what I have. I drop unnecessary component props, but all other is in place

<Stack
  key="app"
  {...navigationProps} // tabs={true} for iOS, drawer={true} with contentComponent for android
  lazy={true}
  tabBarStyle={styles.tabBar}
  activeTintColor="#f55c6e"
  inactiveTintColor="#cbcfd3"
  hideNavBar={true}
  initial={true}
  backToInitial
>
  <Stack
    key="stack"
    title={'stack title'}
    icon={({ tintColor }) => <Icon name="check" size={24} color={tintColor} />}
  >
    <Scene
      key="scene 1"
      component={() => <SceneComponent
        /* component props */
      />}
      on={() => {
        InteractionManager.runAfterInteractions(/* fetches for scene */)
      }}
    />
   ... another scenes ...
  </Stack>
  <Stack
    key="stack_two
    title={'stack title'}
    icon={({ tintColor }) => <Icon name="check" size={24} color={tintColor} />}
  >
    <Scene
      key="scene 2"
      component={() => <SceneComponent
        /* component props */
      />}
      on={() => {
        InteractionManager.runAfterInteractions(/* fetches for scene */)
      }}
    />
    ... another scenes ...
  </Stack>
</Stack>

I am not sure this is stackOverflow question like it labeled, cos there is no description about this behaviour in docks and it is actually important thing for ux

[daviscabral]

What I meant is that is not actually a bug - we are trying to keep issues here focused on bugs and moving general help and questions there. I am also spending some time there answering questions.

I found something about what you want to do here:
https://itnext.io/handle-tab-changes-in-react-navigation-v2-faeadc2f2ffe

react-navigation in the version 2 removed and introduced several behaviors - that's reflects on react-native-router-flux as well.

[daviscabral]

Checking react-navigation code, I found this: https://github.com/react-navigation/react-navigation/blob/master/src/routers/TabRouter.js

It might help with what you want.

[aksonov]

Davis, could we just set backBehavior not to initialRoute within RNRF, to preserve v1 behavior?

25 сент. 2018 г., в 17:16, Davis Z. Cabral [e-mail] написал(а):

Checking react-navigation code, I found this: https://github.com/react-navigation/react-navigation/blob/master/src/routers/TabRouter.js https://github.com/react-navigation/react-navigation/blob/master/src/routers/TabRouter.js
It might help with what you want.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/3292#issuecomment-424383458, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcQMIZ_pZfXkv8csmVNf_B2-yLI3aks5uekjogaJpZM4W4Znf.

[daviscabral]

Pavel, yes - that's something I also need for the tabs I work with. That's supposed to be the default behavior, so I will check tomorrow morning about what might be causing it - smells like a bug.

[Komalov]

Thanks a lot for helping so fast! v4 works just great

[daviscabral]

Thanks a lot for helping so fast! v4 works just great

Sorry - is that already working? I mean, with the last version? 4.0.3?

[Komalov]

Sorry - is that already working? I mean, with the last version? 4.0.3?

Pardon, I mean it's cool it's gonna be resolved. I'll be in touch about this thing, maybe I could find a solution

[mikaelrosquist]

What's the status on this? Is there a simple workaround in the meantime? Really appreciate the work you guys put in. I'm using v4.0.5.

[Q8hma]

hello any update ?
im in 4.0.6 and still same bug

thnx

[Komalov]

@Q8hma
Everything is cool, there was a little misundertanding. If you want to preserve the behavior which backToInitial did erlier, just remove it from stack property. This is the default behaviour for now. If your goal is to reset scene and pop initial every time you touch tabbar, add backToInitial.

So just remove backToInitial was fine for me

[Komalov]

@daviscabral I think this issue can be closed if what I describe above is acceptable

[GrishmaM]

Im facing the same issues whenever i route from one scene to another always the first scene renders, im using the below mentioned versions.

• react-native-router-flux v4.0.6
• react v16.6.0
• react-native v0.57.7

and the way im using the senes is mentioned below.

<Scene key="root">
   <Scene component={one} key={"one"} passProps={true} type={"REACT_NATIVE_ROUTER_FLUX_RESET"}/>
   <Scene component={two} key={"two"} passProps={true} type={"REACT_NATIVE_ROUTER_FLUX_RESET"}/>
   <Scene component={three} key={"three"} passProps={true} type={"REACT_NATIVE_ROUTER_FLUX_RESET"}/>
 </Scene>

[mikaelrosquist]

@Q8hma
Everything is cool, there was a little misundertanding. If you want to preserve the behavior which backToInitial did erlier, just remove it from stack property. This is the default behaviour for now. If your goal is to reset scene and pop initial every time you touch tabbar, add backToInitial.

So just remove backToInitial was fine for me

Can confirm that removing backToInitial worked for me. Thanks for the help!