Skip to content

Commit

Permalink
[native] Use currently selected theme for alerts.
Browse files Browse the repository at this point in the history
Summary:
Solution for [ENG-3935](https://linear.app/comm/issue/ENG-3935/consider-using-dark-mode-in-alerts-on-native).

This diff introduces a wrapper for React Native alerts, which synchronizes currently selected theme in the app with alert style. Right now `userInterfaceStyle` is only supported on iOS.

Light theme alert:
{F646510}
Dark theme alert:
{F646511}

Test Plan:
1. Select a location where you want to implement an alert (for example, you can add `useEffect` in `root.react.js`).
2. Verify whether the alert theme is consistent with the app theme.
3. Navigate to `profile > appearance`, alter the theme, and check if the same transformation applies to the other theme.

Reviewers: bartek, tomek, michal, inka

Reviewed By: tomek, inka

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D8586
  • Loading branch information
pklatka committed Aug 3, 2023
1 parent 6421b30 commit f79fafb
Showing 1 changed file with 48 additions and 0 deletions.
48 changes: 48 additions & 0 deletions native/utils/alert.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
// @flow

import { Alert } from 'react-native';

import { store } from '../redux/redux-setup.js';
import { type GlobalTheme, defaultGlobalThemeInfo } from '../types/themes.js';

type AlertWrapper = {
+alert: typeof Alert.alert,
+prompt: typeof Alert.prompt,
};

const getCurrentTheme = (): GlobalTheme =>
store.getState().globalThemeInfo.activeTheme ||
defaultGlobalThemeInfo.activeTheme;

const alertWrapper: AlertWrapper = {
alert(title, message, buttons, options) {
Alert.alert(title, message, buttons, {
userInterfaceStyle: getCurrentTheme(),
...options,
});
},
prompt(
title,
message,
callbackOrButtons,
type,
defaultValue,
keyboardType,
options,
) {
Alert.prompt(
title,
message,
callbackOrButtons,
type,
defaultValue,
keyboardType,
{
userInterfaceStyle: getCurrentTheme(),
...options,
},
);
},
};

export default alertWrapper;

0 comments on commit f79fafb

Please sign in to comment.