Open alabsi91 opened 11 months ago
Hey! 👋
It looks like you've omitted a few important sections from the issue template.
Please complete Description section.
Hey, this looks great, thanks for contributing! I'll get back to you once I have opportunity to test these changes
UPDATE: This approach does not work on One UI Samsung devices; you will still see black edges during the transition animation. The only fix I found is to set the screen options presentation to 'transparentModal'
This will have a different transition animation, and I'm not sure if it has any performance drawbacks.
The Issue
In the new Android 13 screen transition, an issue arises when the new screen pushes the old one, causing a white or black layer to appear between them. While this problem may exist in the old screen transition, it becomes more noticeable in the new version.
The Fix
Fortunately, I have fixed this issue by implementing the following changes:
Step One: Create a file at
android\app\src\main\res\drawable\alpha_screen.xml
.Step Two: Add the following line to the file at
android\app\src\main\res\values\styles.xml
.Step Three: For older Android versions, you might have to make the default navigation background color transparent:
Steps to reproduce
react-navigation
Snack or a link to a repository
https://github.com/alabsi91/rn-screens-android-transitions-animation-fix
Screens version
3.27.0
React Native version
0.72.6
Platforms
Android
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
Paper (Old Architecture)
Build type
Debug mode
Device
Android emulator
Device model
Android 13
Acknowledgements
Yes