React-native-router-flux: Actions.currentScene is prefixed with an underscore for Scenes inside of Tabs

Created on 17 Jan 2018  路  5Comments  路  Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

  • react-native-router-flux v4.0.0-beta.28
  • react-native v0.50.1

Expected behaviour

When I call Actions.currentScene, the value isn't prefixed with an undscore.

Actual behaviour

When I am calling Actions.currentScene in my code, all of my scene keys are getting prefixed with a _. For example, here is the Actions object that I'm inspecting in the debugger:

image

Notice the MY_WATER_KEY function that is used for the route. Then notice the value of currentScene - _MY_WATER_KEY. Why is this?

Most helpful comment

I was able to remove the underscore by setting wrap to false

All 5 comments

It seems to be any of my scenes which are in Tabs. Here's my entire Router:

<Router
    backAndroidHandler={this.onBackPress}
    sceneStyle={{
        backgroundColor: `white`,
    }}
>
    <Scene hideNavBar panHandlers={null} key={`modal`} modal>
        <Scene key={`root`} panHandlers={null} hideNavBar>
            <Tabs
                showLabel={false}
                lazy={true}
                tabBarStyle={styles.tabs}
                tabBarPosition={`bottom`}
                labelStyle={styles.label}
                swipeEnabled={false}
            >
                <Scene
                    hideNavBar
                    key={MY_WATER_KEY}
                    onEnter={() => onEnter(MY_WATER_KEY)}
                    component={MyWater}
                    icon={({ focused }) => (
                        <TabbarTab
                            active={focused}
                            icon={`drop2`}
                            label={getLocalizedString(
                                `myWater.title`,
                            )}
                        />
                    )}
                />
                <Scene
                    hideNavBar
                    key={INBOX_KEY}
                    onEnter={() => onEnter(INBOX_KEY)}
                    component={Inbox}
                    icon={({ focused }) => (
                        <TabbarTab
                            active={focused}
                            icon={`envelope`}
                            label={getLocalizedString(
                                `inbox.title`,
                            )}
                        />
                    )}
                />
                <Scene
                    hideNavBar
                    key={MY_ACCOUNT_KEY}
                    onEnter={() => onEnter(MY_ACCOUNT_KEY)}
                    component={MyAccount}
                    icon={({ focused }) => (
                        <TabbarTab
                            active={focused}
                            icon={`home3`}
                            label={getLocalizedString(
                                `myAccount.title`,
                            )}
                        />
                    )}
                />
            </Tabs>
            <Scene initial key={`initial`} component={Loader} />
            <Scene
                key={LOGIN_SCENE_KEY}
                onEnter={() => onEnter(LOGIN_SCENE_KEY)}
                component={Login}
            />
            <Scene
                key={FORGOT_PASSWORD_KEY}
                onEnter={() => onEnter(FORGOT_PASSWORD_KEY)}
                component={ForgotPassword}
            />
            <Scene
                hideNavBar
                key={HOUSEHOLD_ATTRIBUTES_SET_UP_KEY}
                onEnter={() =>
                    onEnter(HOUSEHOLD_ATTRIBUTES_SET_UP_KEY)
                }
                component={HouseholdSetUp}
            />
            <Scene
                hideNavBar
                key={ENABLE_NOTIFICATIONS_KEY}
                onEnter={() => onEnter(ENABLE_NOTIFICATIONS_KEY)}
                component={EnableNotifications}
            />
            <Scene
                hideNavBar
                key={COMPLETED_SET_UP_KEY}
                onEnter={() => onEnter(COMPLETED_SET_UP_KEY)}
                component={CompletedSetUp}
            />
            <Scene
                hideNavBar
                key={UTILITY_PICKER_SCENE_KEY}
                onEnter={() => onEnter(UTILITY_PICKER_SCENE_KEY)}
                component={UtilityPicker}
            />
            <Scene
                hideNavBar
                key={POKE_UTILITY_SCENE_KEY}
                onEnter={() => onEnter(POKE_UTILITY_SCENE_KEY)}
                component={PokeUtility}
            />
            <Scene
                hideNavBar
                key={REGISTER_SCENE_KEY}
                onEnter={() => onEnter(REGISTER_SCENE_KEY)}
                component={Register}
            />
            <Scene
                hideNavBar
                key={UTILITY_NOT_FOUND_SCENE_KEY}
                onEnter={() => onEnter(UTILITY_NOT_FOUND_SCENE_KEY)}
                component={UtilityNotFound}
            />
        </Scene>
        <Scene
            key={PROFILE_KEY}
            onEnter={() => onEnter(PROFILE_KEY)}
            component={Profile}
        />
        <Scene
            key={TIPS_KEY}
            onEnter={() => onEnter(TIPS_KEY)}
            component={Tips}
        />
        <Scene
            key={REBATES_KEY}
            onEnter={() => onEnter(REBATES_KEY)}
            component={Rebates}
        />
        <Scene
            key={NOTIFICATION_SETTINGS_KEY}
            onEnter={() => onEnter(NOTIFICATION_SETTINGS_KEY)}
            component={NotificationSettings}
        />
        <Scene
            key={INBOX_MESSAGE_KEY}
            onEnter={() => onEnter(INBOX_MESSAGE_KEY)}
            component={InboxMessage}
        />
        <Scene
            key={SUPPORT_KEY}
            onEnter={() => onEnter(SUPPORT_KEY)}
            component={Support}
        />
    </Scene>
</Router>

@dwilt You probably need to have a key prop for Tab
Check out the example
https://github.com/aksonov/react-native-router-flux/blob/master/Example/Example.js

@Jun711 You had me really excited there but it didn't end up working. Any other ideas?

I also tried wrapping each Scene in a Stack and giving it a key but that didn't work either

I was able to remove the underscore by setting wrap to false

Was this page helpful?
0 / 5 - 0 ratings

Related issues

fgrs picture fgrs  路  3Comments

moaxaca picture moaxaca  路  3Comments

basdvries picture basdvries  路  3Comments

VictorK1902 picture VictorK1902  路  3Comments

wootwoot1234 picture wootwoot1234  路  3Comments