Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Jarred-Sumner opened this issue Feb 10, 2020 · 7 comments · Fixed by #890

Comments

@Jarred-Sumner
Copy link

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
Copy link

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

@janicduplessis
Copy link
Contributor

janicduplessis commented May 24, 2020

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
Copy link
Contributor

hirbod commented May 24, 2020

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
Copy link

@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
Copy link
Contributor

hirbod commented May 24, 2020

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
Copy link

@Jarred-Sumner Any updates on this? 👀

cc @kmagiera ..

@WoLewicki
Copy link
Member

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.

@WoLewicki WoLewicki linked a pull request Jun 14, 2021 that will close this issue
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants