software-mansion / software-mansion/react-native-screens
Bug: formSheet corners show shimmer when app theme differs from system theme
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 714
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 71
Description
Description
When an app uses a different theme than the system (e.g., app forces dark mode while phone is in
light mode), formSheet presentations show a visible shimmer/flash at the rounded corners during
the present/dismiss animation.
Steps to reproduce
- Set phone to light mode
- App forces dark mode (via in-app theme preference, not
userInterfaceStylein app.json) - Present a screen with
presentation: "formSheet" - Observe white shimmer at rounded corners during animation
Expected behavior
The formSheet container should respect the app's theme, not the system theme.
Actual behavior
The formSheet container uses the system's interface style for its background. When system is
light mode but app content is dark, the light container background shows through at the rounded
corners during animation.
Root cause
UISheetPresentationController uses the system's interface style. The presented view
controller's overrideUserInterfaceStyle is not being set to match the app's theme.
Workarounds attempted (none work)
userInterfaceStyle: "dark"in app.json - forces entire app to dark, prevents dynamic themescontentStyle: { backgroundColor }- doesn't affect the sheet containercardcolor in React Navigation theme - doesn't affect formSheet container
Proposed fix
Set overrideUserInterfaceStyle on the presented view controller (_controller) based on a new
userInterfaceStyle prop on Screen.
Environment
- react-native-screens: 4.16.0
- react-native: 0.76.x
- expo: 53
- Platform: iOS 17+
Steps to reproduce
see above
Snack or a link to a repository
see above
Screens version
see above
React Native version
see above
Platforms
iOS
JavaScript runtime
None
Workflow
None
Architecture
None
Build type
None
Device
None
Device model
No response
Acknowledgements
Yes
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the Screen component and the presented view controller referenced as _controller; inspect how the formSheet presentation handles the new userInterfaceStyle prop on iOS. Reproduce with a dark app theme and light system theme, then verify that the rounded corners no longer shimmer during presentation or dismissal.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100