Animation issue when using TransitionPresets.ModalSlideFromBottomIOS with card stack

[janicduplessis]

I have a card stack with the default transition preset on iOS. When I push a second screen on it with TransitionPresets.ModalSlideFromBottomIOS it causes this animation issue.

Something like this should repro

<RootStack.Navigator
  initialRouteName="a"
  mode="card"
>
  <RootStack.screen name="a" />
  <RootStack.screen name="b" options={{...TransitionPresets.ModalSlideFromBottomIOS}} />
</RootStack.Navigator>

...

navigate('b')

[satya164]

This is a result of screen controlling its own animations. Perhaps it'll be better if the focused screen controlled it's own as well as previous screen's animations.

Though this will also cause issues because if we're switching between 2 different types of interpolations, the transition will be sudden. Maybe something like this will be good:

cardStyleInterpolator: options => {
  if (options.current.routeName === 'SomeModalScreen') {
    return CardStyleInterpolators.forModalPresentationIOS(options);
  } else if (options.next.routeNames=== 'SomeModalScreen') {
	// How would it look to combine `forModalPresentationIOS` and `forHorizontalIOS`?
    // Some manual work needed here to ensure a smooth animation between both
	// Maybe this will be fine
    return CardStyleInterpolators.forModalPresentationIOS({
      ...options,
      index: 0
    });
  } else {
    return CardStyleInterpolators.forHorizontalIOS(options);
  }
}

NOTE: we don't actually pass route names right now, but we can.

[janicduplessis]

If we can have the preset also control the previous screen I think it would be great. Not sure if we'll hit some edge cases but this would be better than now.

[satya164]

It won't work properly unless the idle state of both presets (preset if current screen and previous screen) are the same. For example, modal's idle state has a top margin and border radius etc. When we switch the preset it'll suddenly change the style to something else (the idle state of new preset which will be different).

This means we can't safely apply current screen's preset to previous screen and have it look good.

Fortunately the idle state of most built in presets are same except the modal. So we could provide a preset which combines both. But it'll still need some code like above to work.

[leethree]

I'm seeing the same problem. I think transition should be defined as a thing that is shared by two screens. The "unfocus" animation of a screen should be decided by the next screen instead by itself.

This should be the default behaviour without any custom interpolator:
e.g.
0. Screen A has default transition presets. Screen B has "modal" transition preset.

1. On screen A, navigate('B')
2. Screen A should not move while screen B slides in from bottom.
3. On screen B, goBack()
4. Screen B slides down and reveals screen A.

[satya164]

This means we can't safely apply current screen's preset to previous screen and have it look good.

[leethree]

I'm not saying we should "apply current screen's preset to previous screen". I'm saying that the current screen preset should specify what the previous screen should do, which is a different thing from the idle state of the current screen.

[satya164]

I don't think there's any difference in what you're saying.

[satya164]

We'll probably end up doing that anyway and it'll work in many cases, but in some cases it'll break without manual work (such as combining slide and modal presentation animation)

[leethree]

For the iOS 13 card style, it probably makes more sense for it to be a different navigator, e.g. card-stack. It's similar to material-bottom-tabs vs bottom-tabs. For all other use cases, we should assume that all idle states are the same. Then there wouldn't be a problem with preset controlling the previous screen animation.