search

IjzerenHein / react-native-shared-element

Native shared element transition "primitives" for react-native 💫
MIT License
2.21k stars 97 forks source link

shared element is on top of another element #41

Closed arasrezaei closed 2 years ago

arasrezaei commented 4 years ago

hi there, I do not know this is a issue or not, but i have problem to fix this issue: untitled I tried zIndex but it's not working cause the transitioning element is on top of others, and after fading/removing actual element shows. is there any walkaround for fixing this?

IjzerenHein commented 3 years ago

Hi! The shared elements are always rendered on top. If you want other elements to be rendered on top, then you need to wrap these with <SharedElement> as well and tell the sharedElements function to use a "fade" transition on these.

Please have a look at the "OverlappingElements" example in the react-navigation-shared-elements example app: https://github.com/IjzerenHein/react-navigation-shared-element/tree/main/example

In the example the DetailScreen wraps all elements in <SharedElement> that overlay the image. This allows the shared-element library to render these elements on top of the image. Next, return these elements (topOverlay and bottomOverlay) in the sharedElements function. The order of this function, is also the z-ordering at which they are rendered. By using animation: 'fade', these elements will be fade-in and out when the scene becomes visible.

p-syche commented 2 years ago

Hello @arasrezaei ! My name is Aleks, I'm helping out with maintenance in this repo.

I am closing the issue you opened, because the situation you described was not a bug. Maybe you could find the time to add something to the library documentation to describe the animations you wanted to implement and the solution provided by @IjzerenHein ?