CODEWITHSUNDEEP
react-native
Eyal Eizenberg
Eyal Eizenberg

Reputation: 4033

Is it possible to change transitions in react native navigator?

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.

Upvotes: 10

Views: 9777

Answers (3)

Kevin Qi
Kevin Qi

Reputation: 3260

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;
    }
  }}
/>

Upvotes: 13

Kelsey
Kelsey

Reputation: 541

If anyone is still looking at this, you can push without animation by just reseting the routes to what you want them to end up being. This is assuming that you don't do anything special with your routes like save the forward routes or anything.

if( !shouldAnimate )
{
  var routeStack = this.refs.mainNav.state.routeStack;
  routeStack.push(newRoute);
  this.refs.mainNav.immediatelyResetRouteStack(routeStack);
}
else
{
  this.refs.mainNav.push(feature);
}

Where mainNav is the ref of my Navigator. Hope this helps.

Upvotes: 1

Eyal Eizenberg
Eyal Eizenberg

Reputation: 4033

Ok, I figure it out. I was missing this part in View 1:

configureScene={ (route) ->
      if route.sceneConfig
        route.sceneConfig
      else
        transition = Navigator.SceneConfigs.HorizontalSwipeJump
        transition.gestures = null
        transition
    }

Upvotes: 7

Related Questions