IjzerenHein / IjzerenHein/react-navigation-shared-element

ImageBackground with children

Open
#194 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.3k
Forks
125
PR merge metrics
No merged PRs in 30d

Description

Hi, I have a question about navigating to a SharedElement which wraps a ImageBackground.
I found [this issue](https://github.com/IjzerenHein/react-navigation-shared-element/issues/69) 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](https://user-images.githubusercontent.com/52537741/132703917-18d4e379-e80f-4758-b541-44e9c9e8427c.gif)

imageBackground with children (a single Text component in this case):
![imageBackground_with_children](https://user-images.githubusercontent.com/52537741/132703983-4170c8b7-3823-4867-9416-8d73e098a553.gif)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the SharedElement transition between the list Image and the detail ImageBackground, comparing the cases with and without a child Text component. Check how the animation and resize options affect this transition; done means the ImageBackground does not show transient side margins when it contains children.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.