Is it possible to change transitions in react native navigator?

Question

I have 3 different react native components and I am using the Navigator to navigate between them. In my first view I define the navigator:

View 1

<Navigator
    ref="nav"
    renderScene={@renderScene}
    initialRoute={@renderContent(I18n.t("Incidents"))}
    configureScene={ ->
      transition = Navigator.SceneConfigs.HorizontalSwipeJump
      transition.gestures = null
      transition
    }
  />

As you can see the transition is HorizontalSwipeJump.

View 2

 @props.navigator.push
  component: IncidentScreen
  incidentId: incident.id
  sceneConfig: -> Navigator.SceneConfigs.FloatFromBottomAndroid

As you can see, I am trying move into view #3 using FloatFromBottomAndroid, however, it's not working.

By looking at the source code for RN I can see that the navigator.push method get's the animation from the props:

var nextAnimationConfigStack = activeAnimationConfigStack.concat([
  this.props.configureScene(route),
]);

So what can I do?

Thanks a lot.

Answer 1

You have to go digging into the react-native source here for the list of SceneConfigs, but here's the current list as of writing:

PushFromRight
FloatFromRight
FloatFromLeft
FloatFromBottom
FloatFromBottomAndroid
FadeAndroid
HorizontalSwipeJump
HorizontalSwipeJumpFromRight
VerticalUpSwipeJump
VerticalDownSwipeJump

Example usage:

<Navigator
  configureScene={(route) => {
    if (someCondition) {
      return Navigator.SceneConfigs.HorizontalSwipeJump;
    } else {
      return Navigator.SceneConfigs.PushFromRight;
    }
  }}
/>