IjzerenHein / IjzerenHein/react-navigation-shared-element

[v5] Problem with borderRadius transformation if size of View(width, height) is different in each screen

Open
#128 4 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

I am trying to create a shared element transition but i am facing this issue.
If the element (View) in the first screen has a borderRadius( e.g 10) and in the second screen the size of the
element is different (with or without borderRadius), then i notice a flickering transformation on the border
on my way back to the first screen.
Anyone with the same problem???

### ***EXAMPLE OF FLICKERING TRANSFORMATION ON VIEW'S BORDER***



If now, the size(width, height) of the element (View) in the second screen is equal to the size of the element (View) of the
first screen, then the animation is smooth.

### ***EXAMPLE OF SMOOTH BORDER TRANSFORMATION WHEN WIDTH, HEIGHT IS EQUAL***



Any solutions to this?

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the shared-element transition described in the issue with different View widths and heights, then compare it with the equal-size case. Investigate the React Native shared-element transition path; done means the border transforms without flickering when the View dimensions differ on the return transition.

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
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.