Skip to content

Commit

Permalink
Added userInterfaceStyle to Alert to override user interface style fo…
Browse files Browse the repository at this point in the history
…r iOS 13+ (#33553)

Summary:
Support to override Alert interface style to match your app. For example, You want to change the style on the alert.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Added] - Add userInterfaceStyle to Alert to override user interface style for iOS 13+

Pull Request resolved: #33553

Test Plan:
**`userInterfaceStyle: 'light'`:**
<img width="320" src="https://user-images.githubusercontent.com/37284154/161358408-50dbf0a5-ae46-458e-a075-8595cce1b046.png"  />

**`userInterfaceStyle: 'dark'`:**
<img width="320" src="https://user-images.githubusercontent.com/37284154/161358326-bc54effb-1635-43df-97e0-522328713259.PNG"  />

Reviewed By: philIip

Differential Revision: D35371697

Pulled By: ryancat

fbshipit-source-id: 597c1a97ca94571abada2b5fb97cb2adcb5337f5
  • Loading branch information
luoxuhai authored and facebook-github-bot committed Jun 9, 2022
1 parent 472e0e4 commit 47bd78f
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 1 deletion.
13 changes: 12 additions & 1 deletion Libraries/Alert/Alert.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export type Buttons = Array<{

type Options = {
cancelable?: ?boolean,
userInterfaceStyle?: 'unspecified' | 'light' | 'dark',
onDismiss?: ?() => void,
...
};
Expand All @@ -45,7 +46,15 @@ class Alert {
options?: Options,
): void {
if (Platform.OS === 'ios') {
Alert.prompt(title, message, buttons, 'default');
Alert.prompt(
title,
message,
buttons,
'default',
undefined,
undefined,
options,
);
} else if (Platform.OS === 'android') {
const NativeDialogManagerAndroid =
require('../NativeModules/specs/NativeDialogManagerAndroid').default;
Expand Down Expand Up @@ -108,6 +117,7 @@ class Alert {
type?: ?AlertType = 'plain-text',
defaultValue?: string,
keyboardType?: string,
options?: Options,
): void {
if (Platform.OS === 'ios') {
let callbacks = [];
Expand Down Expand Up @@ -142,6 +152,7 @@ class Alert {
cancelButtonKey,
destructiveButtonKey,
keyboardType,
userInterfaceStyle: options?.userInterfaceStyle || undefined,
},
(id, value) => {
const cb = callbacks[id];
Expand Down
1 change: 1 addition & 0 deletions Libraries/Alert/NativeAlertManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export type Args = {|
cancelButtonKey?: string,
destructiveButtonKey?: string,
keyboardType?: string,
userInterfaceStyle?: string,
|};

export interface Spec extends TurboModule {
Expand Down
23 changes: 23 additions & 0 deletions React/CoreModules/RCTAlertManager.mm
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,20 @@ @implementation RCTConvert (UIAlertViewStyle)

@end

@implementation RCTConvert (UIUserInterfaceStyle)

RCT_ENUM_CONVERTER(
UIUserInterfaceStyle,
(@{
@"unspecified" : @(UIUserInterfaceStyleUnspecified),
@"light" : @(UIUserInterfaceStyleLight),
@"dark" : @(UIUserInterfaceStyleDark),
}),
UIUserInterfaceStyleUnspecified,
integerValue)

@end

@interface RCTAlertManager () <NativeAlertManagerSpec>

@end
Expand Down Expand Up @@ -103,6 +117,15 @@ - (void)invalidate
RCTAlertController *alertController = [RCTAlertController alertControllerWithTitle:title
message:nil
preferredStyle:UIAlertControllerStyleAlert];

#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
if (@available(iOS 13.0, *)) {
UIUserInterfaceStyle userInterfaceStyle = [RCTConvert UIUserInterfaceStyle:args.userInterfaceStyle()];
alertController.overrideUserInterfaceStyle = userInterfaceStyle;
}
#endif

switch (type) {
case RCTAlertViewStylePlainTextInput: {
[alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) {
Expand Down

0 comments on commit 47bd78f

Please sign in to comment.