Customizable per-screen transitions with StackNavigator about rfcs

[n1ru4l]

@spruce-bruce Can't we have a more generic API that might be more expandable in the future?

e.g. like

props.navigation.navigate({
  screen: `Screen`,
  params: {},
  transitionConfig: {}
})

I prefer having a single object with sub-properties over having list of arguments

[spruce-bruce]

This is related - have you thought much about allowing the ability to override transitions per navigate call as well? It's kind of edge casey, but I can imagine creating a screen and wanting to choose at time of navigation how the transition will happen.

props.navigation.navigate('Screen', params, transitionConfigOverride)?

[hxiongg]

Any update on this?

[brentvatne]

you can do this in v5. https://www.youtube.com/watch?v=PvjV96CNPqM. just use options on screen instead of on navigator

[n1ru4l]

Would be awesome if there is also a way to specify the gestures for that screen. E.g. using the example of your Problem section results in a gesture that do not match the animation.

[marcshilling]

What @spruce-bruce said above is what I need. My use case is a button that the user can tap to push a screen (with animation), versus me wanting to programmatically push that screen without animation when something else happens.

[brentvatne]

stack is being rewritten - react-navigation/stack#131

[brentvatne]

@kaantyy: https://github.com/react-navigation/react-navigation-stack/blob/dab7f2515e2bc7c3b57a89a23f9c3ed2dfdece44/src/index.js#L28-L42

[DriesVS]

I have the same fix! But as @n1ru4l pointed out, the gesture direction is defined by mode. Would be handy to dynamically configure the gesture direction based on sceneProps.

[jemmyphan]

@brentvatne if I'm not mistaken. since react-navigation/react-navigation@e27ad22, transitionConfig has had these parameters already. And it's working right now. is it safe to use it now? since the documentation hasn't been updated.

[brentvatne]

@jemmyphan - I don't think so -- this works the same as before after that commit unless I'm missing something

[jemmyphan]

@brentvatne I totally missed react-navigation/react-navigation@2ee8548. 😅

[spruce-bruce]

Certainly - I wouldn't be dogmatic about the api example I gave, just showing "fewest api changes" possible example to highlight the idea

[Bonobomagno]

options specified per screen will always take priority over options specified globally.

Is this in react-navigation 2? Because it don't work on my navigator, using it per screen basis.

[djw27]

Just wanted to jump on board here and say that coming from ex-navigation this feels like an area that's lacking.

We use modals and stacks within tabs fairly interchangeably and made heavy use of specifying the following when using ex-navigation:

static route = {
  styles: {
    ...NavigationStyles.FloatVertical, 
 },
}

on screens which we wanted to appear as modals.

The initial proposal from @satya164 is fairly similar similar to this - is there anyone working on this which I can help out with or does this need starting afresh?

[satya164]

@spruce-bruce @n1ru4l I think that's also possible with the proposed API. You'll need to pass some param which you can check in the transition config to return a different animation.

[fbn4sc]

I cannot find CardStackStyleInterpolator.

Any workaround?

[Sixbitunder]

@fbn4sc the CardStackStyleInterpolator has been replaced by StackViewStyleInterpolator

you can Import it by adding

import StackViewStyleInterpolator from 'react-navigation/src/views/StackView/StackViewStyleInterpolator';

remeber also to switch props in sceneProps

[elizond0]

@Sixbitunder
Thanks for your answer, it works.
when I swipe the page from left to right on android, how could navigation “go back” just like the ios gesture.

[kaantyy]

I cannot find either CardStackStyleInterpolator or StackViewStyleInterpolator.

Workaround with v2.14.2?

[nandorojo]

This would be an amazing addition.

[branegg]

:(

[martinjuhasz]

Are there any news on this @brentvatne ?