React-native-router-flux: Switch Scene only recognizes the first child Scene and it's key

[nschoen]

Version

Tell us which versions you are using:

• react-native-router-flux v3.?.?
  3.35.0
• react-native v0.?.?
  0.31.0

Expected behaviour

Switch Scene recognizes child Scenes and their keys and can switch between them depending on the selector's return value.

Actual behaviour

Only the first child is recognized. If the selector callback returns the keyname of the second child (here scene2) the error A scene for key "scene2" does not exist. occurs. If you inspect the props.navigationState.childrenvalue in ./src/Switch.js you can see that the array only contains the first value.

Steps to reproduce

Use the following example:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import { Scene, Switch, Router, ActionConst } from 'react-native-router-flux';

const scene1 = (props) => {
  return (
    <Text>
      Welcome to React Native!
    </Text>
  );
}

const scene2 = (props) => {
  return (
    <Text>
      To get started, edit index.ios.js
    </Text>
  );
}

class testrouter extends Component {
  render() {
    return (
      <Router>
        <Scene
          key="root"
          component={Switch}
          selector={() => { return "scene2" }}
        >
          <Scene key="scene1" component={scene1} />
          <Scene key="scene2" component={scene2} />
        </Scene>
      </Router>
    );
  }
}

AppRegistry.registerComponent('testrouter', () => testrouter);

Important is, that the selector returns the keyname for the second child. For the first child it's working.

[batuhan]

Are there any workarounds for this? I've just hit this bug as well.

[m860]

i hava the same problem , whta time can be fixed?

[twavis]

Same issue

[hcrub]

+1

[mlevkovsky]

+1 it's a pretty big blocker. Any ideas on how to go around this?

[spltTrevor]

The documentation basically answers this already, with it's current implementation it only works correctly with scenes that have 'tabs={true}'. You can just set tabs to true for the parent scene and it works. So I don't think this is a bug since it is the intended purpose for this component to be used on tabs.

New feature for 3.x release is custom scene renderer that should be used together with tabs={true} property. It allows to select tab scene to show depending from app state. Add the prop "unmountScenes" to your switch scene if the tabs should be unmounted when switched. It could be useful for authentication, restricted scenes, etc. Usually you should wrap Switch with redux connect to pass application state to it: Following example chooses scene depending from sessionID using Redux:

 <Scene
          key="root"
          component={Switch}
          selector={() => { return "scene2" }}
          tabs={true}
        >
          <Scene key="scene1" component={scene1} />
          <Scene key="scene2" component={scene2} />
        </Scene>

[braco]

The key seems to be changed for some reason. When I started using Switch (or maybe after an upgrade, I need to investigate), I noticed that my nav buttons weren't highlighting correctly. The key name for the child route is changed from "Foo" to "Foo_"

[mlevkovsky]

@spltTrevor but even if you do tabs = {true} and you console logs the navigation children, you will notice that some of the scene keys are simply missing :/
Is that the expected behaviour? Also in their docs they do mention that this is a good way to have restricted (i.e. loggedin/out) scenes.

[spltTrevor]

@mlevkovsky Adding tabs={true} fixes the original issue posted by @nschoen. The switch expected functionality does work with this. Also, when I console log the navigation state using tabs={true}, it does show all of the proper scenes (not just the first one), but @braco is correct in saying using the switch does nest these children further into a scene nested in the switched to scene. It puts Foo into Foo_.

[mlevkovsky]

@spltTrevor hmm interesting. I wonder if it's because I am doing ActionConst.RESET as the navigation type, because even with tabs={true} I was having the issue of the disappearing scene.
I'll investigate more and hopefully it's what @braco noticed.

[rseemann]

@spltTrevor I'm getting this error, even with tabs={true}.

My case is very similar to the example you posted, the weird thing is: this was working before, but doesn't seem to be working anymore.

A quick inspection on the parameter sent to the connect(state => ({ user: state.user }))(Switch) selector shows that the Scene children are deleted after the second time the selector is called.

[rseemann]

I was experiencing this error while using the latest version (installing with commit number). After reverting to 3.35 I don't see this happening anymore (but I lost passing props to tabs). Could this be related to #1057? @benstepp

[braco]

There are 172 open issues, the API is unstable, and these problems are so substantial that I'm wondering if it isn't time to move away to a simpler, more stable package. Or just bare metal:

https://github.com/fbsamples/f8app/blob/master/js/F8Navigator.js
https://github.com/react-native-simple-router-community/react-native-simple-router
https://medium.com/@dabit3/react-native-navigator-navigating-like-a-pro-in-react-native-3cb1b6dc1e30#.cjciz4qnw
https://github.com/satya164/Croma/blob/master/src/components/Scene.js#L74

[aksonov]

@braco You are free to choose any package you want, nobody asked you to use this component. It is open source component, why you don't try to fix it and submit PR? Or do you want just to use some other labor for free?

Btw, use master to your own risk (like react-native master itself). Do you have this issue with 3.35?

[aksonov]

@braco Ask for stable API from React Native Experimental team.
API of this component is almost not changed for more than year. Community (but not you, sure) adds more and more props, but it is not called 'unstable API'.

[aksonov]

Huh, are you joking guys? @spltTrevor is fully correct. Switch could be used only with tabs, it is clearly stated in docs
"New feature for 3.x release is custom scene renderer that should be used together with tabs={true} property."

Unfortunately i can't review all such "bugs" in time...

[blackxored]

As you guys might know (or not :P) i've been following pretty closely, and I also experience this bug with Switch on latest HEAD. Something definitely broke but not sure what exactly.

EDIT:
Bit more detail (for bisect purposes):
Failing: HEAD
Working:
f541ffb38af879f73e9d34b26a2b3bdb2bbdd573
Also working (but can't use since it broke navbar for me):
2ff66a2f7bf20362ba37490460cd532362f1d6ec

[aksonov]

Do you use ‘tabs’ as stated in docs?

On 07 Sep 2016, at 02:31, Adrian Perez [email protected] wrote:

As you guys might know (or not :P) i've been following pretty closely, and I also experience this bug with Switch on latest HEAD. Something definitely broke but not sure what exactly.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/1081#issuecomment-245138761, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcU4VD1HBjq09U5tqw3XVp655kJWDks5qngXugaJpZM4JpJ6z.

[rseemann]

I am using the tabs as stated in the docs, so much that everything works on 3.35. But just as @blackxored stated, on latest HEAD (which I'm using for passing props to tabs) this error occurs.

[aksonov]

@rseemann Could you check if it would work with latest master but without #1057 ?

[rseemann]

@aksonov can try it later today.

[rseemann]

@aksonov I haven't been able to test this yet, if anyone feels like taking this over, please feel free.

[ptfly]

Guys, is there any way to recognize the requested scene within the Switch selector so I can decide weather to pass that scene (ex. it's public and don't require a valid user):

Something like this pseudo Switch selector code:

`

if(requestedScene.props.isPublic === true){
    return requestedScene.key;
}

return props.user.data ? "home" : "start";`

For example, I'll have two buttons on start (Register & SignUp) which are public scenes and I'd like to render them.

@aksonov, the lib looks very promising, thanks for sharing and for the effort supporting it!