React-native-router-flux: Get Current Scene Key

[b8ne]

I am currently running a tab bar.
I want to be able to control the android back button so if focus is on certain scenes it just returns to the home scene. Then only exit the app if on the home scene.
Basically so it operates as a standard navigation stack.
Is there an API call to get the key so i can use it within backAndroidHandler?

[toaa-media]

My question is the same here.
Anyone has an answer ?

[b8ne]

I really need this so may look at it this weekend and submit a pr if it can work. @toaa-media i havent looked at the src code yet but have you got any thoughts on how this should work?

[toaa-media]

Thank you @b8ne
I have found out a way to get current scene key. Something like this:

1. Create your own reducer to handle route navigation.
   this.reducerCreate = params=> { const defaultReducer = Reducer(params); return (state, action)=> { console.log("ACTION:", action); if (action.type == ActionConst.FOCUS) { let scene = action.scene; this.currentScene = scene.sceneKey; ===>>> this is your current scene. } return defaultReducer(state, action); } };
2. Add your reducer above to Router.
   render() { return ( <Router createReducer={this.reducerCreate}> ..................................

That's all. And it works fine now. :)

[b8ne]

Awesome @toaa-media, thanks for sharing. I havent had a chance to test anything yet but had a quick look at the source and may have another way given that all the data we need is already in the state. Ill test both over the weekend and let you know how i go. Either way i feel we have a result here so ill close this issue.

[b8ne]

Hey @toaa-media thats not working for me. I already had a reducer setup by following the drawer setup docs. So just checked what that was outputting, and I am getting the scene key but then also the root key every time, so obviously the root will override everytime as its 2nd. Have a feeling it may be to my scene hierarchy so ive included below. Can you see anything that may fix it?

<Provider store={store}>
        <RouterWithRedux
          animationStyle={animationStyle}
          onExitApp={() => {
            console.log(store.getState());
            /*
            if (store.getState().currentScene.sceneKey == 'home') {
              return true;
            }
            Actions.home();
            return true;
          }}
          */
          return true;
        }}

        >
          <Scene key="root">
            <Scene key="drawer" component={NavigationDrawer} open={false}>
              <Scene key="main" tabs style={tabBarStyles.tabBarStyle} tabBarIconContainerStyle={tabBarStyles.tabContainer}
              pressOpacity={1}>

                <Scene key="home" initial title="HOME" navigationBarStyle={tabBarStyles.topBar} drawerImage={null}>
                  <Scene
                    key="home_1"
                    component={Home}
                    title="Home"
                    titleStyle={tabBarStyles.titles}
                  />
                </Scene>

                <Scene key="teams" title="TEAMS" icon={TabIcon} navigationBarStyle={tabBarStyles.topBar} style={tabBarStyles.iconContainer}>
                  <Scene
                    key="teams_1"
                    component={Teams}
                    title="Teams"
                    titleStyle={tabBarStyles.titles}
                    renderBackButton={() => <BackButton back={() => Actions.home()}/>}
                  />
                </Scene>

                <Scene key="news" title="NEWS" icon={TabIcon} navigationBarStyle={tabBarStyles.topBar} style={tabBarStyles.iconContainer}>
                  <Scene
                    key="news_1"
                    component={NewsList}
                    title="News"
                    titleStyle={tabBarStyles.titles}
                    renderBackButton={() => <BackButton back={() => Actions.home()}/>}
                  />
                  <Scene
                    key="news_2"
                    component={NewsArticle}
                    title="News"
                    titleStyle={tabBarStyles.titles}
                    renderBackButton={() => <BackButton back={() => Actions.pop()}/>}
                  />
                </Scene>

                <Scene key="sponsors" title="SPONSORS" icon={TabIcon} navigationBarStyle={tabBarStyles.topBar} style={tabBarStyles.iconContainer}>
                  <Scene
                    key="sponsors_1"
                    component={SponsorList}
                    title="Sponsors"
                    titleStyle={tabBarStyles.titles}
                    renderBackButton={() => <BackButton back={() => Actions.home()}/>}
                  />
                  <Scene
                    key="sponsors_2"
                    component={Sponsor}
                    title="Sponsor"
                    titleStyle={tabBarStyles.titles}
                    renderBackButton={() => <BackButton back={() => Actions.pop()}/>}
                  />
                </Scene>

                <Scene key="more" title="MORE" icon={TabIcon}
                  navigationBarStyle={tabBarStyles.topBar}
                  style={tabBarStyles.iconContainer} tabBarIconContainerStyle={tabBarStyles.moreContainer}
                  component={More}
                  onPress={() => {this.openDrawer()}}
                />

                <Scene key="club" title="CLUB" navigationBarStyle={tabBarStyles.topBar}>
                  <Scene
                    key="club_1"
                    component={ClubData}
                    title="Club"
                    titleStyle={tabBarStyles.titles}
                    renderBackButton={() => <BackButton back={() => Actions.home()}/>}
                  />
                </Scene>

                <Scene key="lifemember" title="LIFE MEMBERS" navigationBarStyle={tabBarStyles.topBar}>
                  <Scene
                    key="lifemember_1"
                    component={LifeMember}
                    title="Life Members"
                    titleStyle={tabBarStyles.titles}
                    renderBackButton={() => <BackButton back={() => Actions.home()}/>}
                  />
                </Scene>

                <Scene key="auth" title="LOGIN" navigationBarStyle={tabBarStyles.topBar}>
                  <Scene
                    key="auth_1"
                    component={Auth}
                    title="Login"
                    titleStyle={tabBarStyles.titles}
                    renderBackButton={() => <BackButton back={() => Actions.home()}/>}
                  />
                  <Scene
                    key="login_1"
                    component={Login}
                    title="Login"
                    titleStyle={tabBarStyles.titles}
                    renderBackButton={() => <BackButton back={() => Actions.pop()}/>}
                  />
                  <Scene
                    key="register_1"
                    component={Register}
                    title="Register"
                    titleStyle={tabBarStyles.titles}
                    renderBackButton={() => <BackButton back={() => Actions.pop()}/>}
                  />
                </Scene>

              </Scene>
            </Scene>
          </Scene>
        </RouterWithRedux>
      </Provider>

So the home scene is initial, but doesnt have a tab, the next 3 scenes are tabbed. the final tab opens the side drawer, which contains the rest of the scenes - if that makes sense.

[bsiddiqui]

@toaa-media what about Actions.pop? No key is provided with back action

[code-by]

is there now simple way to determine current scene name?

[aksonov]

Yes. Actions.currentScene

[ChristianTucker]

@aksonov Something like Actions.prevScene would be nice too.

[y2k-shubham]

@aksonov but Actions.currentScene still gives the key 'root', which is basically known already;
isn't there a way to get the key of the innermost scene currently being rendered?

[vitorlsouza]

@aksonov work perfectly for me. Thank you

[lukaszmalec6]

@vitorlsouza Hi, can you tell me more about how you're using Actions.currentScene?

[vitorlsouza]

@lukaszmalec6
Hi,
I am using to issue an alert when the user returns to the login scene.

[vitorlsouza]

Using in condition for example.

if(Actions.currentScene === 'formPrincipal') {
here Alert with 2 options, when user click
if user click YES return Actions.pop()
if user click NO return false
}