search

IjzerenHein / react-navigation-shared-element

React Navigation bindings for react-native-shared-element 💫
https://github.com/IjzerenHein/react-native-shared-element
MIT License
1.27k stars 124 forks source link

ImageBackground with children #194

Open thijs-qv opened 2 years ago

thijs-qv commented 2 years ago

Hi, I have a question about navigating to a SharedElement which wraps a ImageBackground. I found this issue which deals with SharedElements containing children, but I have a slightly different implementation: the source element does not have any children. I'm navigating from a list item to a detail view. The list item contains an Image which is wrapped in SharedElement. The detail view contains an ImageBackground which is also wrapped in SharedElement. The ImageBackground is at 100% screen height and width. When the ImageBackground does not contain any children, the animation works flawlessly. When the ImageBackground contains children, the ImageBackground is first shown with some margins left and right and then stretches to the correct width. I've played around with the animation and resize options, but it doesn't seem to make any difference.

I have added GIFs which show the difference.

Any help with this would be appreciated.

imageBackground without children: imageBackground_without_children

imageBackground with children (a single Text component in this case): imageBackground_with_children

IjzerenHein commented 2 years ago

Hey Thijs! Ah that's an interesting case. Could you add a test-case to the example app so I can investigate? cheers

thijs-qv commented 2 years ago

Hey Hein, thanks for the help. Sure no problem, I'll probably get to it sometime next week.

thijs-qv commented 2 years ago

Pull request created. Adds a test with an imageBackground which has a single text component as a child.

IjzerenHein commented 2 years ago

Awesome, thanks for the PR!

guiibussinger commented 2 years ago

Hey, did you manage to find a workaround? I'm facing the same issue.

guiibussinger commented 2 years ago

A quick update: using animation: 'fade-out', resize: 'clip' made it workable for me. It's not 100% smooth, but is a lot better than the strechted image.