Skip to content

Commit

Permalink
[core] fix splash flickering in dark mode (expo#26015)
Browse files Browse the repository at this point in the history
# Why

aside from expo#25946 and expo#25971, i also noticed a splash flickering without
expo-system-ui. this one is coming from RCTRootView setup.

# How

we didn't setup backgroundColor [as react-native](https://github.com/facebook/reactnative/blob/43826facfab8eed7d01a801778d1c477e60730a6/packages/react-native/Libraries/AppDelegate/RCTAppDelegate.mm#L154).
in dark mode after splash screen and before App fully loaded, it will show white screen in between. this pr tries to set the RCTRootView's background color as system background color.

- Note that with expo-system-ui, it may override the RCTRootView's
background color from it's OnCreate lifecycle.
- The downside of this pr's approach is that, ReactDelegate subscribers
have no way to change the background color. i think it is okay if we
don't support the use case.
  • Loading branch information
Kudo authored Dec 19, 2023
1 parent fe2f516 commit 70e9a8c
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 4 deletions.
1 change: 1 addition & 0 deletions packages/expo-modules-core/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
### 🐛 Bug fixes

- [iOS] Fixed `SharedObjectRegistry` crash for accessing internal data structures from multi-threads. ([#25997](https://github.com/expo/expo/pull/25997) by [@kudo](https://github.com/kudo))
- Fixed splash screen view flickering in dark mode on iOS. ([#26015](https://github.com/expo/expo/pull/26015) by [@kudo](https://github.com/kudo))

### 💡 Others

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,12 @@ - (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
enableFabric = self.fabricEnabled;
#endif

return [self.reactDelegate createRootViewWithBridge:bridge
moduleName:moduleName
initialProperties:initProps
fabricEnabled:enableFabric];
UIView *rootView = [self.reactDelegate createRootViewWithBridge:bridge
moduleName:moduleName
initialProperties:initProps
fabricEnabled:enableFabric];
rootView.backgroundColor = UIColor.systemBackgroundColor;
return rootView;
}

- (UIViewController *)createRootViewController
Expand Down

0 comments on commit 70e9a8c

Please sign in to comment.