IjzerenHein / IjzerenHein/react-navigation-shared-element
ImageBackground with children
- 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 with children (a single Text component in this case):

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