Current scene pushes over the same scene when drawer is closed on IOs

[donnes]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.19 (v3 is not supported)
• react-native v0.47.1

Expected behaviour

Close drawer and stay the current scene "statically opened".

Actual behaviour

When drawer is closed the current scene is pushed over the same scene.

Steps to reproduce

https://youtu.be/p2nMPAHm77o

Example code:

const scenes = Actions.create(
  <Scene key="lightbox" lightbox>
    <Scene key="modal" modal>
      <Stack
        key="root"
        navigationBarStyle={styles.navBar}
        titleWrapperStyle={styles.navBarTitleWrapper}
        titleStyle={styles.navBarTitle}
        hideBackImage={true}
        renderBackButton={() => <BackButton />}
        hideNavBar
        hideTabBar
      >
        <Scene key="splash" modal component={Splash} initial />

        <Scene key="auth">
          <Scene key="login" component={requireNotAuth(Login)} hideNavBar />
          <Scene
            key="loginSelection"
            component={requireNotAuth(Selection)}
            hideNavBar
          />
        </Scene>

        <Scene
          key="drawer"
          drawer
          contentComponent={Sidebar}
          renderLeftButton={() => (
            <FontAwesome name="bars" size={24} style={styles.navBarIcon} />
          )}
          hideNavBar
        >
          <Scene key="list" component={requireAuth(List)} />
          <Scene
            key="components"
            component={requireAuth(ComponentsList)}
            title="Components List"
          />
        </Scene>

        <Scene key="filter" back>
          <Scene
            key="filterModal"
            component={Filter}
            title={I18n.t('titles.filterModal')}
          />
        </Scene>
      </Stack>
    </Scene>
  </Scene>
);

[mcabs3]

@donnes I ran into this bug too in the example project, try wrapping your scenes that are children of the Drawer in a Scene, so that the Drawer has one direct child Scene and then that child has your components and list Scenes

[aksonov]

Also you have to always latest version before reporting.

[donnes]

@asokol I upgraded to the latest version and tried the solution that @mcabs3 mentioned and the problem still happening.

Do you have any idea why this occurs?

[mcabs3]

@asokol try looking at the Example project, I think I have what I fixed in there. Can you provide your current router/scenes as well as the methods you are running to navigate?

[donnes]

@mcabs3 I tried to wrap my scenes inside the drawer.

My current scenes code:

I'm navigating using simple Actions.ROUTE_KEY()

const scenes = Actions.create(
  <Scene key="lightbox" lightbox>
    <Scene key="modal" modal>
      <Stack
        key="root"
        navigationBarStyle={styles.navBar}
        titleWrapperStyle={styles.navBarTitleWrapper}
        titleStyle={styles.navBarTitle}
        hideBackImage={true}
        renderBackButton={() => <BackButton />}
        hideNavBar
        hideTabBar
      >
        <Scene key="splash" modal component={Splash} initial />

        <Scene key="auth">
          <Scene key="login" component={requireNotAuth(Login)} hideNavBar />
          <Scene
            key="loginSelection"
            component={requireNotAuth(Selection)}
            hideNavBar
          />
        </Scene>

        <Scene
          key="drawer"
          drawer
          contentComponent={Sidebar}
          renderLeftButton={() => <DrawerButton />}
          hideNavBar
        >
          <Scene key="main">
            <Scene key="list" component={requireAuth(List)} />
            <Scene key="detail" component={requireAuth(Detail)} back />
            <Scene
              key="components"
              component={requireAuth(ComponentsList)}
              title="Components List"
            />
          </Scene>
        </Scene>

        <Scene key="filter" back>
          <Scene
            key="filterModal"
            component={Filter}
            title={I18n.t('titles.filterModal')}
          />
        </Scene>
      </Stack>
    </Scene>
  </Scene>
);