software-mansion / software-mansion/react-native-screens

Bug: formSheet corners show shimmer when app theme differs from system theme

Open
#3,559 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

missing-repro platform:ios
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
  1. Set phone to light mode
  2. App forces dark mode (via in-app theme preference, not userInterfaceStyle in app.json)
  3. Present a screen with presentation: "formSheet"
  4. 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 themes
  • contentStyle: { backgroundColor } - doesn't affect the sheet container
  • card color 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.