Shared Element Transition for Overlays and Modals, similar to Apple's app of the day

[mrousavy]

Issue Description

I think it would be great to have "overlay"-like views (Overlays and Modals) also be able to run shared element transitions in order to achieve some cool UI/UX.

For example, looking at the App Store's app of the day animation, we have a Shared Element with a bounce/spring effect (which would also be cool as an interpolation option btw! 😉) which transitions into a subview over the parent's view where the parent is blurred out. The user can easily drag this view down which reveals the background view:

I was able to achieve roughly the same (no "springy" effect unfortunately) in react-navigation using the react-navigation-shared-element library by defining a StackCardStyleInterpolator:

Unfortunately with wix/react-native-navigation I can't set the details view as an overlay to the parent view and add a blur over it (which I can fade out on transition progress), it's always the white background:

Also the scroll view behaves weirdly when I use my pan gesture handler to transform: { scale } the view down.. is this a separate issue?

So unless I'm missing something, that's currently not possible in wix navigation, that's why I'm opening this enhancement issue.

Steps to Reproduce / Code Snippets / Screenshots

App Store	react-navigation	wix/react-native-navigation

---

Environment

• React Native Navigation version: 6.9.0
• React Native version: 0.63.0
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): not relevant

[jinshin1013]

Hi @mrousavy, some slick animations you have here! You can definitely set overlay background colour as transparent. Try setting:

layout: {
  componentBackgroundColor: 'transparent',
  backgroundColor: 'transparent',
}

This should set the Overlay's background colour as transparent and show the screen underneath the Overlay.

[guyca]

@mrousavy I'm prioritising this internally. We're a bit preoccupied with other issues but Shared Element Transition is still high in our priorities.

[mrousavy]

@jinshin1013 awesome. How would you implement the underlying blur view though? In react-navigation I had a separate layer which was above the first screen once the second screen was shown, meaning it also overlays the bottom tab bar.

If I wanted to implement this in react-native-navigation I'm thinking about two approaches:

1. render the blurview below my second screen. but then I can't animate the screen properly, as the blur view has to be faded out and the screen might have some Y translations added.
2. create an extra screen between those two screens, which I navigate to from first screen, and it immediately navigates to the second screen. This would act as a separate layer, but I don't think the shared element transitions will work.

[guyca]

@mrousavy I think you can place the blur view in the pushed screen and it will be faded out during the shared element transition.

[mrousavy]

After a lot of thought and trying out things I'm thinking it would be a better idea to allow Shared Element Transitions to be run for Modals (showModal) and Overlays (showOverlay) too, instead of only for Screens (push)

@guyca I don't understand what you meant with that comment, if I place my BlurView in the pushed screen it will never be shown as the pushed screen is above the BlurView? We'll talk on Sunday/Monday anyways 👋

[mrousavy]

closed with https://github.com/wix/react-native-navigation/pull/6716

[wal3d122]

hey! I've been trying to replicate this animation all day long but with no luck, any chance you could share how you did it please? Thanks