Closed mrousavy closed 3 years ago
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.
@mrousavy I'm prioritising this internally. We're a bit preoccupied with other issues but Shared Element Transition is still high in our priorities.
@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:
@mrousavy I think you can place the blur view in the pushed screen and it will be faded out during the shared element transition.
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 👋
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
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 thereact-navigation-shared-element
library by defining aStackCardStyleInterpolator
: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: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
Environment