Custom Transitions

[fdecampredon]

General Idea

This library does not provide a way to customize the transition between screens, but using Animated/react-native-reanimated and transitionProgress we could more or less create custom transitions.
However, using this solution has some shortcoming, here is a list of some small additions that could help developers achieve better results

Custom Stack Animation

Implementing a new stack animation called 'custom' that does nothing except putting the new screen on top of the previous one would allow a complete control over the animation.

We added this simple transition on the IOS side of our application with good results (for the moment):

- (void)animateCustomWithTransitionContext:(id<UIViewControllerContextTransitioning>)transitionContext
                                    toVC:(UIViewController *)toViewController
                                  fromVC:(UIViewController *)fromViewController
{
  toViewController.view.frame = [transitionContext finalFrameForViewController:toViewController];

  if (_operation == UINavigationControllerOperationPush) {
    [[transitionContext containerView] addSubview:toViewController.view];
  } else if (_operation == UINavigationControllerOperationPop) {
    [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
  }
  [UIView animateWithDuration:[self transitionDuration:transitionContext]
        animations:^{}
        completion:^(BOOL finished) {
          [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
        }];
}

More high level transitionProgress

The useReanimatedTransitionProgress behavior seems a bit weird to me, and obtaining a simple 0 to 1 animated value that describes only the current screen push/pop animation require handling few edge cases :

• During the initial appear animation we start with a value of {"closing": {"value": 0}, "goingForward": {"value": 0}, "progress": {"value": 0}}
• When another screen is pushed on top of the a screen using useReanimatedTransitionProgress the shared values still receive transition progress of the pushed screen animation with {"closing": {"value": 1}, "goingForward": {"value": 1} }
• When a screen on top of a screen using useReanimatedTransitionProgress is popped the shared values still receive transition progress of the popped screen with {"closing": {"value": 0}, "goingForward": {"value": 0} }
• The progress value will go from 0 to 1 for both transition push and pop.

Providing a simpler api that returns a shared value that goes from 0 to 1 and that concerns only the push/pop transition of the current screen would make it easier to implement custom transitions.

Providing an event for swipe cancel

If a user starts to swipe a screen the willAppear event will be dispatched, however, there isn't any event dispatched if the swipe is stopped before triggering a dismissal.

In some case, and especially for custom transition, we need to be able to suspend some behaviors during animation (for example, pausing a video), and with the current implementation it is hard to know when to reenable those behaviors.

Allow to keep a screen mounted during a pop transition

At the moment a screen will be immediately unmounted before the end of the transition, and won't receive the events for the pop transition progress (or disappear event).
In our application we have to intercept all the back command, trigger an animation with another shared value, and then dispatch the back command again at the end of the animation.
We don't use native headers in the screens with custom animations, but I guess it would not be possible to use this kind of workaround in all cases.

Keeping the screen mounted during the pop transition would allow to avoid those workarounds.

Conclusion

I could work on these and try to create a PR if the react-native-screens team feels that those additions are desirable.