[iOS]: Alert userInterfaceStyle having no effect

[pwltr]

Description

I should be able to customize the color scheme of Alert by providing a userInterfaceStyle option but it does not seem to work on iOS. This is using the react-native-cli to bootstrap the project. With expo it seems to work.

Problem:

Simulator.Screen.Recording.-.iPhone.14.-.2023-08-08.at.18.41.33.mp4

I tried setting "userInterfaceStyle": "dark" in app.json but no luck.

React Native Version

0.72.3

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M1 Pro
Memory: 92.56 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.16.0
path: ~/.nvm/versions/node/v18.16.0/bin/node
Yarn:
version: 1.22.19
path: /opt/homebrew/bin/yarn
npm:
version: 9.5.1
path: ~/.nvm/versions/node/v18.16.0/bin/npm
Watchman:
version: 2023.07.10.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9862592
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.20
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.3
wanted: 0.72.3
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

import React from 'react';
import {View, StyleSheet, Button, Alert} from 'react-native';

const App = () => {
  const showAlertLight = () => {
    Alert.alert('Alert Title', 'My Alert Msg', [{text: 'OK'}], {
      userInterfaceStyle: 'light',
    });
  };

  const showAlertDark = () => {
    Alert.alert('Alert Title', 'My Alert Msg', [{text: 'OK'}], {
      userInterfaceStyle: 'dark',
    });
  };

  return (
    <View style={styles.container}>
      <Button title="Light Alert" onPress={showAlertLight} />
      <Button title="Dark Alert" onPress={showAlertDark} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

export default App;

Snack, screenshot, or link to a repository

Working example (expo): https://snack.expo.dev/n7uXEtGO5?platform=ios
Not working using react-native-cli

[tarunrajput]

This could be due to the alertController inheriting the user interface style from the root window here

react-native/packages/react-native/React/CoreModules/RCTAlertController.mm

Lines 46 to 49 in e2ef6b9

	UIUserInterfaceStyle style = RCTSharedApplication().delegate.window.overrideUserInterfaceStyle
	? RCTSharedApplication().delegate.window.overrideUserInterfaceStyle
	: UIUserInterfaceStyleUnspecified;
	self.overrideUserInterfaceStyle = style;

cc: @cipolleschi

[cipolleschi]

Good catch. I'm not super familiar with this part, but I'll have a look at it!