React-native-router-flux: Animation when nesting in a DefaultRenderer

Created on 24 Mar 2016  路  6Comments  路  Source: aksonov/react-native-router-flux

Hi,

My push animations are not taken into account when I set a component in my "loggedIn" Scene.
My Layout component contains a DefaultRenderer.

<Scene key="root" component={connectMeteorWithProps(getMeteorData)} selector={selector} tabs={true}>
        <Scene key="loading" hideNavBar={true} component={Loading} />
        <Scene key="login" hideNavBar={true} component={Login} />

        <Scene key="loggedIn" hideNavBar={true} component={Layout}>
          <Scene key="menu" component={Menu}  />
          <Scene key="settings" component={Settings} />
        </Scene>
</Scene>
export default class Layout extends Component {
  render() {
    const { navigationState } = this.props;

    const navState = navigationState.children[navigationState.index];

    return (
      <Drawer navigationState={navState}>
        <NavBar navigationState={navState} />
        <DefaultRenderer navigationState={navState} />
      </Drawer>
    );
  }
}

Thanks !

Most helpful comment

Ok thanks !

For those with same issue, this is wrong

<Scene key="loggedIn" hideNavBar={true} component={Layout}>
          <Scene key="menu" component={Menu}  />
          <Scene key="settings" component={Settings} />
</Scene>

You have to do this

<Scene key="loggedIn" hideNavBar={true} component={Layout}>
    <Scene key="main">
          <Scene key="menu" component={Menu}  />
          <Scene key="settings" component={Settings} />
    </Scene>
</Scene>

All 6 comments

+1
I can't change the duration of the animation. Looks like it is taking the default one in NavigationCardStack.js

@Mokto You have to include inner composite stack into your 'Layout', check docs.
@evollu Should be fixed within 3.1.6

I'm sorry but what docs ?

There is no mention of inner composite stack neither in your plugin, neither in https://github.com/ericvicenti/navigation-rfc

README. There is sample for Drawer.

Ok thanks !

For those with same issue, this is wrong

<Scene key="loggedIn" hideNavBar={true} component={Layout}>
          <Scene key="menu" component={Menu}  />
          <Scene key="settings" component={Settings} />
</Scene>

You have to do this

<Scene key="loggedIn" hideNavBar={true} component={Layout}>
    <Scene key="main">
          <Scene key="menu" component={Menu}  />
          <Scene key="settings" component={Settings} />
    </Scene>
</Scene>

@Mokto Thanks so much for this! I had the same issue when reading the docs for the drawer.

Was this page helpful?
0 / 5 - 0 ratings