[native] Use new Alert wrapper

Summary:
Solution for [ENG-4421](https://linear.app/comm/issue/ENG-4421/use-new-alert-wrapper-on-native).
This diff replaces all native Alert occurrences with a new Alert wrapper, which sets the currently selected theme as an Alert theme.

Depends on D8586.

Test Plan:
Test on iOS (setting alert theme is only supported on this platform) and on Android (to check if nothing breaks).
Prior to testing, make sure what theme you have set on iOS device. Then set app theme opposite to theme set on device.  This will make sure, that Alerts use app theme rather than system theme.

Testing each location where the Alert import was replaced can be time-intensive, therefore only selected areas have been inspected to determine if the Alert function operates as expected:
- Login panel -> invalid username, empty password
- Edit message -> cancel editing
- Edit password -> not matching passwords, incorrect pasword
- Logout -> keep login info in chain alert
- Delete account panel -> invalid password
- Chat -> leave chat

Reviewers: bartek, tomek, inka

Reviewed By: tomek

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D8648

native/account/fullscreen-siwe-panel.react.js

@@ -1,14 +1,15 @@
 // @flow
 
 import * as React from 'react';
-import { Alert, ActivityIndicator, View } from 'react-native';
+import { ActivityIndicator, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 
 import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
 import type { SIWEResult } from 'lib/types/siwe-types.js';
 
 import { useSIWEServerCall } from './siwe-hooks.js';
 import SIWEPanel from './siwe-panel.react.js';
+import Alert from '../utils/alert.js';
 
 type Props = {
   +goBackToPrompt: () => mixed,

native/account/log-in-panel.react.js

@@ -2,7 +2,7 @@
 
 import invariant from 'invariant';
 import * as React from 'react';
-import { View, StyleSheet, Alert, Keyboard, Platform } from 'react-native';
+import { View, StyleSheet, Keyboard, Platform } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import { logInActionTypes, logIn } from 'lib/actions/user-actions.js';
@@ -37,6 +37,7 @@ import { NavContext } from '../navigation/navigation-context.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
 import type { KeyPressEvent } from '../types/react-native.js';
+import Alert from '../utils/alert.js';
 import { useInitialNotificationsEncryptedMessage } from '../utils/crypto-utils.js';
 import type { StateContainer } from '../utils/state-container.js';
 

native/account/register-panel.react.js

@@ -8,7 +8,6 @@ import {
   StyleSheet,
   Platform,
   Keyboard,
-  Alert,
   Linking,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
@@ -40,6 +39,7 @@ import { NavContext } from '../navigation/navigation-context.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
 import type { KeyPressEvent } from '../types/react-native.js';
+import Alert from '../utils/alert.js';
 import { useInitialNotificationsEncryptedMessage } from '../utils/crypto-utils.js';
 import { type StateContainer } from '../utils/state-container.js';
 

native/account/registration/existing-ethereum-account.react.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Text, View, Alert } from 'react-native';
+import { Text, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 
 import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
@@ -18,6 +18,7 @@ import type { RegistrationNavigationProp } from './registration-navigator.react.
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { useStyles } from '../../themes/colors.js';
+import Alert from '../../utils/alert.js';
 import { useSIWEServerCall } from '../siwe-hooks.js';
 
 const siweAuthLoadingStatusSelector =

native/account/registration/registration-server-call.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Alert, Platform } from 'react-native';
+import { Platform } from 'react-native';
 import { useDispatch } from 'react-redux';
 
 import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
@@ -25,6 +25,7 @@ import {
 import { NavContext } from '../../navigation/navigation-context.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { nativeLogInExtraInfoSelector } from '../../selectors/account-selectors.js';
+import Alert from '../../utils/alert.js';
 import { setNativeCredentials } from '../native-credentials.js';
 import { useSIWEServerCall } from '../siwe-hooks.js';
 

native/account/siwe-panel.react.js

@@ -2,7 +2,6 @@
 
 import BottomSheet from '@gorhom/bottom-sheet';
 import * as React from 'react';
-import { Alert } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import WebView from 'react-native-webview';
 
@@ -21,6 +20,7 @@ import {
 
 import { commCoreModule } from '../native-modules.js';
 import { useSelector } from '../redux/redux-utils.js';
+import Alert from '../utils/alert.js';
 import { defaultLandingURLPrefix } from '../utils/url-utils.js';
 
 const commSIWE = `${defaultLandingURLPrefix}/siwe`;

native/avatars/avatar-hooks.js

@@ -5,7 +5,6 @@ import * as ImagePicker from 'expo-image-picker';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform } from 'react-native';
-import Alert from 'react-native/Libraries/Alert/Alert.js';
 import filesystem from 'react-native-fs';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -34,6 +33,7 @@ import type { MediaResult } from '../media/media-utils.js';
 import { processMedia } from '../media/media-utils.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 function displayAvatarUpdateFailureAlert(): void {

native/avatars/native-edit-thread-avatar-provider.react.js

@@ -1,13 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import { Alert } from 'react-native';
 
 import { BaseEditThreadAvatarProvider } from 'lib/components/base-edit-thread-avatar-provider.react.js';
 
 import { selectFromGallery, useUploadSelectedMedia } from './avatar-hooks.js';
 import { activeThreadSelector } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
+import Alert from '../utils/alert.js';
 
 const displayAvatarUpdateFailureAlert = () =>
   Alert.alert(

native/calendar/entry.react.js

@@ -11,7 +11,6 @@ import {
   TextInput as BaseTextInput,
   Platform,
   TouchableWithoutFeedback,
-  Alert,
   LayoutAnimation,
   Keyboard,
 } from 'react-native';
@@ -81,6 +80,7 @@ import type { TabNavigationProp } from '../navigation/tab-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { colors, useStyles } from '../themes/colors.js';
 import type { LayoutEvent } from '../types/react-native.js';
+import Alert from '../utils/alert.js';
 import { waitForInteractions } from '../utils/timers.js';
 
 function hueDistance(firstColor: string, secondColor: string): number {

native/chat/chat-input-bar.react.js

@@ -14,7 +14,6 @@ import {
   TouchableWithoutFeedback,
   NativeAppEventEmitter,
 } from 'react-native';
-import Alert from 'react-native/Libraries/Alert/Alert.js';
 import { TextInputKeyboardMangerIOS } from 'react-native-keyboard-input';
 import Animated, {
   EasingNode,
@@ -126,6 +125,7 @@ import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../themes/colors.js';
 import type { LayoutEvent } from '../types/react-native.js';
 import { type AnimatedViewStyle, AnimatedView } from '../types/styles.js';
+import Alert from '../utils/alert.js';
 import { runTiming } from '../utils/animation-utils.js';
 import { exitEditAlert } from '../utils/edit-messages-utils.js';
 import { nativeTypeaheadRegex } from '../utils/typeahead-utils.js';

native/chat/compose-subchannel.react.js

@@ -5,7 +5,7 @@ import _filter from 'lodash/fp/filter.js';
 import _flow from 'lodash/fp/flow.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import * as React from 'react';
-import { View, Text, Alert } from 'react-native';
+import { View, Text } from 'react-native';
 
 import { newThreadActionTypes, newThread } from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
@@ -35,6 +35,7 @@ import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
 
 const TagInput = createTagInput<AccountUserInfo>();
 

native/chat/message-report-utils.js

@@ -1,7 +1,6 @@
 // @flow
 
 import * as React from 'react';
-import { Alert } from 'react-native';
 
 import {
   sendMessageReport,
@@ -14,6 +13,7 @@ import {
 
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
+import Alert from '../utils/alert.js';
 
 const confirmReport = () => displayActionResultModal('reported to admin');
 

native/chat/reaction-message-utils.js

@@ -2,7 +2,6 @@
 
 import invariant from 'invariant';
 import * as React from 'react';
-import Alert from 'react-native/Libraries/Alert/Alert.js';
 
 import {
   sendReactionMessage,
@@ -22,6 +21,7 @@ import type {
   LayoutCoordinates,
   VerticalBounds,
 } from '../types/layout-types.js';
+import Alert from '../utils/alert.js';
 
 function useSendReaction(
   messageID: ?string,

native/chat/relationship-prompt.react.js

@@ -2,7 +2,7 @@
 
 import Icon from '@expo/vector-icons/FontAwesome5.js';
 import * as React from 'react';
-import { Alert, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 
 import { useRelationshipPrompt } from 'lib/hooks/relationship-prompt.js';
 import { userRelationshipStatus } from 'lib/types/relationship-types.js';
@@ -11,6 +11,7 @@ import type { UserInfo } from 'lib/types/user-types.js';
 
 import Button from '../components/button.react.js';
 import { useStyles } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
 
 type Props = {
   +pendingPersonalThreadUserInfo: ?UserInfo,

native/chat/settings/add-users-modal.react.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { View, Text, ActivityIndicator, Alert } from 'react-native';
+import { View, Text, ActivityIndicator } from 'react-native';
 
 import {
   changeThreadSettingsActionTypes,
@@ -31,6 +31,7 @@ import type { RootNavigationProp } from '../../navigation/root-navigator.react.j
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { useStyles } from '../../themes/colors.js';
+import Alert from '../../utils/alert.js';
 
 const TagInput = createTagInput<AccountUserInfo>();
 

native/chat/settings/color-selector-modal.react.js

@@ -2,7 +2,7 @@
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import * as React from 'react';
-import { TouchableHighlight, Alert } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 
 import {
   changeThreadSettingsActionTypes,
@@ -25,6 +25,7 @@ import type { RootNavigationProp } from '../../navigation/root-navigator.react.j
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../../themes/colors.js';
+import Alert from '../../utils/alert.js';
 
 export type ColorSelectorModalParams = {
   +presentedFrom: string,

native/chat/settings/thread-settings-description.react.js

@@ -4,7 +4,6 @@ import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
-  Alert,
   ActivityIndicator,
   TextInput as BaseTextInput,
   View,
@@ -44,6 +43,7 @@ import type {
   LayoutEvent,
   ContentSizeChangeEvent,
 } from '../../types/react-native.js';
+import Alert from '../../utils/alert.js';
 
 type BaseProps = {
   +threadInfo: ThreadInfo,

native/chat/settings/thread-settings-edit-relationship.react.js

@@ -2,7 +2,7 @@
 
 import invariant from 'invariant';
 import * as React from 'react';
-import { Alert, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 
 import {
   updateRelationships as serverUpdateRelationships,
@@ -28,6 +28,7 @@ import Button from '../../components/button.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { useStyles, useColors } from '../../themes/colors.js';
 import type { ViewStyle } from '../../types/styles.js';
+import Alert from '../../utils/alert.js';
 
 type Props = {
   +threadInfo: ThreadInfo,

native/chat/settings/thread-settings-leave-thread.react.js

@@ -2,7 +2,7 @@
 
 import invariant from 'invariant';
 import * as React from 'react';
-import { Text, Alert, ActivityIndicator, View } from 'react-native';
+import { Text, ActivityIndicator, View } from 'react-native';
 
 import {
   leaveThreadActionTypes,
@@ -28,6 +28,7 @@ import {
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 import type { ViewStyle } from '../../types/styles.js';
+import Alert from '../../utils/alert.js';
 
 type BaseProps = {
   +threadInfo: ThreadInfo,

native/chat/settings/thread-settings-member-tooltip-modal.react.js

@@ -1,7 +1,6 @@
 // @flow
 
 import * as React from 'react';
-import { Alert } from 'react-native';
 
 import { removeUsersFromThread } from 'lib/actions/thread-actions.js';
 import { removeMemberFromThread } from 'lib/shared/thread-utils.js';
@@ -22,6 +21,7 @@ import {
   type BaseTooltipProps,
   type TooltipMenuProps,
 } from '../../tooltip/tooltip.react.js';
+import Alert from '../../utils/alert.js';
 
 export type ThreadSettingsMemberTooltipModalParams = TooltipParams<{
   +memberInfo: RelativeMemberInfo,

native/chat/settings/thread-settings-name.react.js

@@ -4,7 +4,6 @@ import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
-  Alert,
   ActivityIndicator,
   TextInput as BaseTextInput,
   View,
@@ -35,6 +34,7 @@ import { SingleLine } from '../../components/single-line.react.js';
 import TextInput from '../../components/text-input.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../../themes/colors.js';
+import Alert from '../../utils/alert.js';
 
 type BaseProps = {
   +threadInfo: ResolvedThreadInfo,

native/chat/settings/thread-settings-promote-sidebar.react.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Text, ActivityIndicator, View, Alert } from 'react-native';
+import { Text, ActivityIndicator, View } from 'react-native';
 
 import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
@@ -10,6 +10,7 @@ import type { ThreadInfo } from 'lib/types/thread-types.js';
 import Button from '../../components/button.react.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 import type { ViewStyle } from '../../types/styles.js';
+import Alert from '../../utils/alert.js';
 
 type BaseProps = {
   +threadInfo: ThreadInfo,

native/chat/settings/thread-settings-push-notifs.react.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { View, Switch, TouchableOpacity, Platform } from 'react-native';
-import Alert from 'react-native/Libraries/Alert/Alert.js';
 import Linking from 'react-native/Libraries/Linking/Linking.js';
 
 import {
@@ -25,6 +24,7 @@ import SWMansionIcon from '../../components/swmansion-icon.react.js';
 import { CommAndroidNotifications } from '../../push/android.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { useStyles } from '../../themes/colors.js';
+import Alert from '../../utils/alert.js';
 
 type BaseProps = {
   +threadInfo: ThreadInfo,

native/chat/thread-screen-pruner.react.js

@@ -2,7 +2,6 @@
 
 import invariant from 'invariant';
 import * as React from 'react';
-import { Alert } from 'react-native';
 
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 
@@ -21,6 +20,7 @@ import {
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import type { AppState } from '../redux/state-types.js';
+import Alert from '../utils/alert.js';
 
 const ThreadScreenPruner: React.ComponentType<{}> = React.memo<{}>(
   function ThreadScreenPruner() {