React-native-router-flux: Switch is not rendering the right scene correctly

Created on 30 May 2016  路  4Comments  路  Source: aksonov/react-native-router-flux

  • react-native-router-flux v3.26.5
  • react-native v0.26.2

After upgrading to RN v0.26 and the the latest RNRF something doesn't work very well using Switch and Redux. Everything was working fine with RN v0.22. I'm using the built-in reducer for the router.

Test repo: https://github.com/zelphir/switchtest

I have something like that

const selectorCheck = (props) => {
  console.log(props.group)
  if (props.group && props.group === 'group1') return 'group1'
  if (props.group && props.group === 'group2') return 'group2'
}

to switch from one group of scenes to the other if an auth.token is available.

Expected behaviour

Using the Redux debugger or a button to reset the state it should "switch" to the guest group of scenes (like it was doing with RN v0.22)

Actual behaviour

Doesn't switch to the guest scene, the only way to do that is reloading the app using cmd+R
I've noticed that using the navbar the title is updated, I've put some console.log and the selector is returning the right value. Everything is updated (navbar, props) but the scene. The DefaultRenderer in the Switch is returning the right navigationState. I've just seen the the right scene is in the background, and the old/wrong one is still in the foreground.

Steps to reproduce

  1. change the state in order to load the "isAuthenticated" group of scenes
  2. reset the state using the redux debugger or a button (tried both)

This is how my scenes look like:

const scenes = Actions.create(
  <Scene
    key="root"
    tabs={true}
    component={ connect(({ group }) => ({ group }))(Switch) }
    selector={ (props) => selectorCheck(props) }
  >

    <Scene key="group1">
      <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
      <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
    </Scene>

    <Scene key="group2">
      <Scene key="pageThree" component={PageThree} title="PageThree" />
      <Scene key="pageFour" component={PageFour} title="PageFour" />
    </Scene>

  </Scene>
)

Most helpful comment

@zelphir Could you provide github clone of Example with modification to reproduce issue. Sorry, code snippets give too little help here.

All 4 comments

@zelphir Could you provide github clone of Example with modification to reproduce issue. Sorry, code snippets give too little help here.

@aksonov there you go: https://github.com/zelphir/switchtest

I've created 2 groups (group1 and group2). Each group contains 2 scenes (PageOne and PageTwo for group1 and PageThree and PageFour for group2).

As you can see, if you change group from 1 to 2 you go to the next one (group2, scene PageThree) but once there if you change again group with the button the navbar is updated but not the scene, you are still on PageThree.

@zelphir Great, looks like i've found issue - RN0.26 changes, please check latest 3.26.7

@aksonov Thanks! Everything works as expected now!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

wootwoot1234 picture wootwoot1234  路  3Comments

jgibbons picture jgibbons  路  3Comments

moaxaca picture moaxaca  路  3Comments

llgoer picture llgoer  路  3Comments

willmcclellan picture willmcclellan  路  3Comments