NavigationExperimental Modal Transition

[Quaggie]

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

[satya164]

Try NavigationTransitioner which should meet your needs.

[Quaggie]

@satya164 Could you give me an example?

[Jpoliachik]

@Quaggie I'm seeing this issue too. There needs to be a check in the pop animation code that checks for a modal, and completes the animation vertically rather than horizontally.

[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

[ptomasroos]

We solve this by making sure we know which scene is about to be popped or not in getStyle

  _getStyle = (sceneProps) => {
    const { router } = this.context;
    const route = router.getRouteByKey(sceneProps.scene.route.key);

    const latestActiveScene = sceneProps.scenes.find(scene => { return scene.isActive; });
    const latestActiveRoute = router.getRouteByKey(latestActiveScene.route.key);

    if (latestActiveRoute.type === 'modal') {
      return CardStackStyleInterpolator.forModal(sceneProps);
    } else if (latestActiveRoute.type === 'popup' || latestActiveRoute.type === 'actions') {
      return CardStackStyleInterpolator.forOverlay(sceneProps);
    }

    const latestStaleScene = sceneProps.scenes.find(scene => { return scene.isStale; });
    if (latestStaleScene) {
      const latestStaleRoute = router.getRouteByKey(latestStaleScene.route.key);

      if (latestStaleRoute.type === 'modal') {
        return CardStackStyleInterpolator.forModal(sceneProps);
      } else if (latestStaleRoute.type === 'popup' || latestStaleRoute.type === 'actions') {
        return CardStackStyleInterpolator.forOverlay(sceneProps);
      }
    }

    if (route.type === 'modal') {
      return CardStackStyleInterpolator.forModal(sceneProps);
    } else if (route.type === 'popup' || route.type === 'actions') {
      return CardStackStyleInterpolator.forOverlay(sceneProps);
    }

    return CardStackStyleInterpolator.forHorizontal(sceneProps);
  }

router is our own abstraction you could on the otherhand read from the reducer whats the latest route

[Hitabis]

@ptomasroos where would you put this function in the example above? The style property of NavigationCardStack only takes objects.

[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}
        />
      );
    });
  }```

[ptomasroos]

We should close this issue. It makes no sense, everyone can use their own style interpolator

[ericvicenti]

Yeah lets close this. At some point soon we will be migrating to react navigation