Consider exposing Animated.Value with transition progress (for shared element transitions)

[Jarred-Sumner]

It'd be great if the native stack navigator supported shared element transitions. One way of implementing that, without react-native-screens needing to know anything about shared element transitions, is by exposing an Animated.Value with the progress of the current transition running.

I explored a little how one might implement this.

In here, if you switched from [UIView animateWithDuration] to UIViewPropertyAnimator, you can get fractionComplete:

https://github.com/kmagiera/react-native-screens/blob/ed997ef4ecd4cc99383386cb016bc8d79bf70279/ios/RNSScreenStack.m#L354-L375

This is an example of using UIViewPropertyAnimator with a custom view controller transition: https://stackoverflow.com/questions/27638806/transitioncoordinator-return-nil-for-custom-container-view-controller-in-ios8

From there, you would have a CADisplayLink which sets the value for the animated node with the fractionComplete from the UIViewPropertyAnimator instance.

[nandorojo]

Would be awesome if this could make it before @expo releases sdk 37.

[janicduplessis]

Could be possible to use this along with native animated. We could expose an animation progress event which could be connected to an animated value. Not sure if it would work with stock pop / push animations but with the custom fade one it seems possible (turns out good since it is probably the animation you want to use with shared elements).

Here's how it could look:

const progress = new Animated.Value(0);

<ScreenStack>
  <Screen
    onAnimationProgress={Animated.event([{ nativeEvent: { progress } }], {
      useNativeDriver: true,
    })}
  />
</ScreenStack>

[hirbod]

But Android does not have a fade animation. (at least currently in native-stack). We would need both platforms.

I would be happy to do a shared animation with fade. It’s the most common pattern anyway.

[mrousavy]

@hirbod I'm not quite sure I understand, do you mean fade animation is the only animation for this use case? I've seen quite a few uses of shared element transitions and they're almost always more than just a simple fade.. The App Store's App of the day animation is a (very complex) example for this.
Don't get me wrong, native shared element fade animations are a good start!

[hirbod]

I didn’t mean that it should be the only one, but just as a start. v5 is already working pretty well with shared elements (see branch on react-navigation-shared-Element) but no support for native stack (and in native shared repo he said „most likely not to support native-stack“). So if we can have a fade as a start to get things rolling I’d be happy to take what I get :).

Of course animation using push is something great too. But once you felt native stacks Performance you will never go back :D

[mrousavy]

@Jarred-Sumner Any updates on this? 👀

cc @kmagiera ..

[WoLewicki]

I added a first look at exposing progress of transition between screens on both platforms in #890. I would be thankful if you could test it and share your thoughts.