-
-
Notifications
You must be signed in to change notification settings - Fork 613
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