NavigationExperimental Modal Transition

I’ve been experimenting NavigationExperimental with my team and we’ve run into a little transition problem. Most of the code is taken from the example, which is why more questions were brought. We expected the direction of the transition of the modal would pop out the same direction it was pushed in, but it doesn’t.

Here’s the gif with the occuring transition error:

Our code

// This is our root component, which is later rendered inside the <Provider /> and has the state and actions connected
const Root = ({navigationState, navigatePop}) => {

  const renderScene = ({scene}) => {
    const { route } = scene

        switch(route.key) {
        case 'First':
            return <First />
        case 'Second':
            return <Second />
      case 'Third':
            return <Third />
        case 'Modal':
            return <Modal />
        }
  };

  return (
            <NavigationCardStack
                navigationState={navigationState}
                onNavigateBack={navigatePop}
                style={styles.container}
                direction={navigationState.routes[navigationState.index].key === 'Modal' ? 'vertical' : 'horizontal' }
                renderOverlay={props => (
                    <NavigationHeader
                        {...props}
                        onNavigateBack={navigatePop}
                        renderTitleComponent={props => {
                            const title = props.scene.route.title
                            return <NavigationHeader.Title>{title}</NavigationHeader.Title>
                        }}
                    />
                )}
                renderScene={renderScene}
            />
        )
};

Project specification

• Versions
  • react-native-cli: 1.0.0
  • react-native: 0.31.0
• Current OS:
  • Mac
• Tested on
  • Android & iOS

[ptomasroos]

@Hitabis Looks something like this

  _render = (transitionProps) => {
    const { router } = this.context;

    return transitionProps.scenes.map((scene, i) => {
      const sceneProps = {
        ...transitionProps,
        scene,
      };

      const route = router.getRouteByKey(sceneProps.scene.route.key);

      const style = [
        this._getStyle(sceneProps),
        route.type === 'popup' && styles.transparentNavigationCard,
      ];

      return (
        <NavigationCard
          {...sceneProps}
          style={style}
          panHandlers={this._getPanHandlers(sceneProps)}
          renderScene={this._renderScene}
          onNavigateBack={this._pop}
          key={sceneProps.scene.route.key}
        />
      );
    });
  }```

[ericvicenti]

@hedgerwang, maybe we should consider removing the ‘direction’ prop. It is working as intended but is not meeting people’s needs.

Instead, I think we should consider introducing NavigationModalStack for vertical transitions, and NavigationCardStack can always be horizontal.

cc @skevy