diff --git a/native/calendar/thread-picker-modal.react.js b/native/calendar/thread-picker-modal.react.js
index f20a7f7e6..b25fc7881 100644
--- a/native/calendar/thread-picker-modal.react.js
+++ b/native/calendar/thread-picker-modal.react.js
@@ -1,99 +1,99 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { useDispatch } from 'react-redux';
 
 import {
   createLocalEntry,
   createLocalEntryActionType,
 } from 'lib/actions/entry-actions';
 import { threadSearchIndex } from 'lib/selectors/nav-selectors';
 import { onScreenEntryEditableThreadInfos } from 'lib/selectors/thread-selectors';
 
 import Modal from '../components/modal.react';
 import ThreadList from '../components/thread-list.react';
 import { RootNavigatorContext } from '../navigation/root-navigator-context';
 import type { RootNavigationProp } from '../navigation/root-navigator.react';
 import type { NavigationRoute } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils';
 import { waitForInteractions } from '../utils/timers';
 
 export type ThreadPickerModalParams = {|
   presentedFrom: string,
   dateString: string,
 |};
 
 type Props = {|
   navigation: RootNavigationProp<'ThreadPickerModal'>,
   route: NavigationRoute<'ThreadPickerModal'>,
 |};
 function ThreadPickerModal(props: Props) {
   const {
     navigation,
     route: {
       params: { dateString },
     },
   } = props;
 
   const viewerID = useSelector(
     (state) => state.currentUserInfo && state.currentUserInfo.id,
   );
   const nextLocalID = useSelector((state) => state.nextLocalID);
   const dispatch = useDispatch();
 
   const rootNavigatorContext = React.useContext(RootNavigatorContext);
   const threadPicked = React.useCallback(
     (threadID: string) => {
       invariant(
         dateString && viewerID && rootNavigatorContext,
         'inputs to threadPicked should be set',
       );
       rootNavigatorContext.setKeyboardHandlingEnabled(false);
       dispatch({
         type: createLocalEntryActionType,
         payload: createLocalEntry(threadID, nextLocalID, dateString, viewerID),
       });
     },
     [rootNavigatorContext, dispatch, viewerID, nextLocalID, dateString],
   );
 
   React.useEffect(
     () =>
       navigation.addListener('blur', async () => {
         await waitForInteractions();
         invariant(
           rootNavigatorContext,
           'RootNavigatorContext should be set in onScreenBlur',
         );
         rootNavigatorContext.setKeyboardHandlingEnabled(true);
       }),
     [navigation, rootNavigatorContext],
   );
 
   const index = useSelector((state) => threadSearchIndex(state));
   const onScreenThreadInfos = useSelector((state) =>
     onScreenEntryEditableThreadInfos(state),
   );
   return (
-    <Modal navigation={navigation}>
+    <Modal>
       <ThreadList
         threadInfos={onScreenThreadInfos}
         onSelect={threadPicked}
         itemStyle={styles.threadListItem}
         searchIndex={index}
       />
     </Modal>
   );
 }
 
 const styles = StyleSheet.create({
   threadListItem: {
     paddingLeft: 10,
     paddingRight: 10,
     paddingVertical: 2,
   },
 });
 
 export default ThreadPickerModal;
diff --git a/native/chat/image-paste-modal.react.js b/native/chat/image-paste-modal.react.js
index 20aafc52b..c81b08683 100644
--- a/native/chat/image-paste-modal.react.js
+++ b/native/chat/image-paste-modal.react.js
@@ -1,101 +1,97 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Button, View, Image } from 'react-native';
 import filesystem from 'react-native-fs';
 
 import type { PhotoPaste } from 'lib/types/media-types';
 import sleep from 'lib/utils/sleep';
 
 import Modal from '../components/modal.react';
 import { InputStateContext } from '../input/input-state';
 import type { RootNavigationProp } from '../navigation/root-navigator.react';
 import type { NavigationRoute } from '../navigation/route-names';
 import { useStyles } from '../themes/colors';
 
 export type ImagePasteModalParams = {|
   +imagePasteStagingInfo: PhotoPaste,
   +threadID: string,
 |};
 
 type Props = {|
   +navigation: RootNavigationProp<'ImagePasteModal'>,
   +route: NavigationRoute<'ImagePasteModal'>,
 |};
 function ImagePasteModal(props: Props) {
   const styles = useStyles(unboundStyles);
   const inputState = React.useContext(InputStateContext);
   const {
     navigation,
     route: {
       params: { imagePasteStagingInfo, threadID },
     },
   } = props;
 
   const sendImage = React.useCallback(async () => {
     navigation.goBackOnce();
     const selection: $ReadOnlyArray<PhotoPaste> = [imagePasteStagingInfo];
     invariant(inputState, 'inputState should be set in ImagePasteModal');
     await inputState.sendMultimediaMessage(threadID, selection);
     invariant(
       imagePasteStagingInfo,
       'imagePasteStagingInfo should be set in ImagePasteModal',
     );
   }, [imagePasteStagingInfo, inputState, navigation, threadID]);
 
   const cancel = React.useCallback(async () => {
     navigation.goBackOnce();
     await sleep(5000);
     filesystem.unlink(imagePasteStagingInfo.uri);
   }, [imagePasteStagingInfo.uri, navigation]);
 
   return (
-    <Modal
-      modalStyle={styles.modal}
-      navigation={navigation}
-      safeAreaEdges={['top']}
-    >
+    <Modal modalStyle={styles.modal} safeAreaEdges={['top']}>
       <Image style={styles.image} source={{ uri: imagePasteStagingInfo.uri }} />
       <View style={styles.linebreak} />
       <View style={styles.spacer} />
       <Button title="Send" onPress={sendImage} />
       <View style={styles.linebreak} />
       <View style={styles.spacer} />
       <Button title="Cancel" onPress={cancel} />
       <View style={styles.spacer} />
     </Modal>
   );
 }
 
 const unboundStyles = {
   modal: {
     marginHorizontal: 0,
     marginTop: 300,
     marginBottom: 0,
     borderTopLeftRadius: 10,
     borderTopRightRadius: 10,
     borderRadius: 0,
   },
   image: {
     resizeMode: 'contain',
     flex: 1,
     justifyContent: 'center',
     marginBottom: 15,
     marginHorizontal: 15,
     marginTop: 20,
   },
   linebreak: {
     borderBottomColor: 'gray',
     alignSelf: 'stretch',
     margin: 0,
     borderBottomWidth: 0.25,
     paddingBottom: 10,
     padding: 5,
   },
   spacer: {
     padding: 5,
   },
 };
 
 export default ImagePasteModal;
diff --git a/native/chat/settings/add-users-modal.react.js b/native/chat/settings/add-users-modal.react.js
index 83639c7cc..03d9edfd7 100644
--- a/native/chat/settings/add-users-modal.react.js
+++ b/native/chat/settings/add-users-modal.react.js
@@ -1,358 +1,358 @@
 // @flow
 
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { View, Text, ActivityIndicator, Alert } from 'react-native';
 import { createSelector } from 'reselect';
 
 import {
   changeThreadSettingsActionTypes,
   changeThreadSettings,
 } from 'lib/actions/thread-actions';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import {
   userInfoSelectorForPotentialMembers,
   userSearchIndexForPotentialMembers,
 } from 'lib/selectors/user-selectors';
 import SearchIndex from 'lib/shared/search-index';
 import { getPotentialMemberItems } from 'lib/shared/search-utils';
 import { threadActualMembers } from 'lib/shared/thread-utils';
 import { loadingStatusPropType } from 'lib/types/loading-types';
 import type { LoadingStatus } from 'lib/types/loading-types';
 import {
   type ThreadInfo,
   threadInfoPropType,
   type ChangeThreadSettingsPayload,
   type UpdateThreadRequest,
 } from 'lib/types/thread-types';
 import {
   type AccountUserInfo,
   accountUserInfoPropType,
 } from 'lib/types/user-types';
 import type { DispatchActionPromise } from 'lib/utils/action-utils';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import Button from '../../components/button.react';
 import Modal from '../../components/modal.react';
 import TagInput from '../../components/tag-input.react';
 import UserList from '../../components/user-list.react';
 import type { RootNavigationProp } from '../../navigation/root-navigator.react';
 import type { NavigationRoute } from '../../navigation/route-names';
 import { useSelector } from '../../redux/redux-utils';
 import { useStyles } from '../../themes/colors';
 
 const tagInputProps = {
   placeholder: 'Select users to add',
   autoFocus: true,
   returnKeyType: 'go',
 };
 
 export type AddUsersModalParams = {|
   presentedFrom: string,
   threadInfo: ThreadInfo,
 |};
 
 type BaseProps = {|
   +navigation: RootNavigationProp<'AddUsersModal'>,
   +route: NavigationRoute<'AddUsersModal'>,
 |};
 type Props = {|
   ...BaseProps,
   // Redux state
   +parentThreadInfo: ?ThreadInfo,
   +otherUserInfos: { [id: string]: AccountUserInfo },
   +userSearchIndex: SearchIndex,
   +changeThreadSettingsLoadingStatus: LoadingStatus,
   +styles: typeof unboundStyles,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeThreadSettings: (
     request: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
 |};
 type State = {|
   +usernameInputText: string,
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
 |};
 type PropsAndState = {| ...Props, ...State |};
 class AddUsersModal extends React.PureComponent<Props, State> {
   static propTypes = {
     navigation: PropTypes.shape({
       goBackOnce: PropTypes.func.isRequired,
     }).isRequired,
     route: PropTypes.shape({
       params: PropTypes.shape({
         threadInfo: threadInfoPropType.isRequired,
       }).isRequired,
     }).isRequired,
     parentThreadInfo: threadInfoPropType,
     otherUserInfos: PropTypes.objectOf(accountUserInfoPropType).isRequired,
     userSearchIndex: PropTypes.instanceOf(SearchIndex).isRequired,
     changeThreadSettingsLoadingStatus: loadingStatusPropType.isRequired,
     styles: PropTypes.objectOf(PropTypes.object).isRequired,
     dispatchActionPromise: PropTypes.func.isRequired,
     changeThreadSettings: PropTypes.func.isRequired,
   };
   state: State = {
     usernameInputText: '',
     userInfoInputArray: [],
   };
   tagInput: ?TagInput<AccountUserInfo> = null;
 
   userSearchResultsSelector = createSelector(
     (propsAndState: PropsAndState) => propsAndState.usernameInputText,
     (propsAndState: PropsAndState) => propsAndState.otherUserInfos,
     (propsAndState: PropsAndState) => propsAndState.userSearchIndex,
     (propsAndState: PropsAndState) => propsAndState.userInfoInputArray,
     (propsAndState: PropsAndState) => propsAndState.route.params.threadInfo,
     (propsAndState: PropsAndState) => propsAndState.parentThreadInfo,
     (
       text: string,
       userInfos: { [id: string]: AccountUserInfo },
       searchIndex: SearchIndex,
       userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
       threadInfo: ThreadInfo,
       parentThreadInfo: ?ThreadInfo,
     ) => {
       const excludeUserIDs = userInfoInputArray
         .map((userInfo) => userInfo.id)
         .concat(threadActualMembers(threadInfo.members));
 
       return getPotentialMemberItems(
         text,
         userInfos,
         searchIndex,
         excludeUserIDs,
         parentThreadInfo,
         threadInfo.type,
       );
     },
   );
 
   get userSearchResults() {
     return this.userSearchResultsSelector({ ...this.props, ...this.state });
   }
 
   render() {
     let addButton = null;
     const inputLength = this.state.userInfoInputArray.length;
     if (inputLength > 0) {
       let activityIndicator = null;
       if (this.props.changeThreadSettingsLoadingStatus === 'loading') {
         activityIndicator = (
           <View style={this.props.styles.activityIndicator}>
             <ActivityIndicator color="white" />
           </View>
         );
       }
       const addButtonText = `Add (${inputLength})`;
       addButton = (
         <Button
           onPress={this.onPressAdd}
           style={this.props.styles.addButton}
           disabled={this.props.changeThreadSettingsLoadingStatus === 'loading'}
         >
           {activityIndicator}
           <Text style={this.props.styles.addText}>{addButtonText}</Text>
         </Button>
       );
     }
 
     let cancelButton;
     if (this.props.changeThreadSettingsLoadingStatus !== 'loading') {
       cancelButton = (
         <Button onPress={this.close} style={this.props.styles.cancelButton}>
           <Text style={this.props.styles.cancelText}>Cancel</Text>
         </Button>
       );
     } else {
       cancelButton = <View />;
     }
 
     const inputProps = {
       ...tagInputProps,
       onSubmitEditing: this.onPressAdd,
     };
     return (
-      <Modal navigation={this.props.navigation}>
+      <Modal>
         <TagInput
           value={this.state.userInfoInputArray}
           onChange={this.onChangeTagInput}
           text={this.state.usernameInputText}
           onChangeText={this.setUsernameInputText}
           labelExtractor={this.tagDataLabelExtractor}
           defaultInputWidth={160}
           maxHeight={36}
           inputProps={inputProps}
           innerRef={this.tagInputRef}
         />
         <UserList
           userInfos={this.userSearchResults}
           onSelect={this.onUserSelect}
         />
         <View style={this.props.styles.buttons}>
           {cancelButton}
           {addButton}
         </View>
       </Modal>
     );
   }
 
   close = () => {
     this.props.navigation.goBackOnce();
   };
 
   tagInputRef = (tagInput: ?TagInput<AccountUserInfo>) => {
     this.tagInput = tagInput;
   };
 
   onChangeTagInput = (userInfoInputArray: $ReadOnlyArray<AccountUserInfo>) => {
     if (this.props.changeThreadSettingsLoadingStatus === 'loading') {
       return;
     }
     this.setState({ userInfoInputArray });
   };
 
   tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;
 
   setUsernameInputText = (text: string) => {
     if (this.props.changeThreadSettingsLoadingStatus === 'loading') {
       return;
     }
     this.setState({ usernameInputText: text });
   };
 
   onUserSelect = (userID: string) => {
     if (this.props.changeThreadSettingsLoadingStatus === 'loading') {
       return;
     }
     for (let existingUserInfo of this.state.userInfoInputArray) {
       if (userID === existingUserInfo.id) {
         return;
       }
     }
     const userInfoInputArray = [
       ...this.state.userInfoInputArray,
       this.props.otherUserInfos[userID],
     ];
     this.setState({
       userInfoInputArray,
       usernameInputText: '',
     });
   };
 
   onPressAdd = () => {
     if (this.state.userInfoInputArray.length === 0) {
       return;
     }
     this.props.dispatchActionPromise(
       changeThreadSettingsActionTypes,
       this.addUsersToThread(),
     );
   };
 
   async addUsersToThread() {
     try {
       const newMemberIDs = this.state.userInfoInputArray.map(
         (userInfo) => userInfo.id,
       );
       const result = await this.props.changeThreadSettings({
         threadID: this.props.route.params.threadInfo.id,
         changes: { newMemberIDs },
       });
       this.close();
       return result;
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }
 
   onErrorAcknowledged = () => {
     invariant(this.tagInput, 'nameInput should be set');
     this.tagInput.focus();
   };
 
   onUnknownErrorAlertAcknowledged = () => {
     this.setState(
       {
         userInfoInputArray: [],
         usernameInputText: '',
       },
       this.onErrorAcknowledged,
     );
   };
 }
 
 const unboundStyles = {
   activityIndicator: {
     paddingRight: 6,
   },
   addButton: {
     backgroundColor: 'greenButton',
     borderRadius: 3,
     flexDirection: 'row',
     paddingHorizontal: 10,
     paddingVertical: 4,
   },
   addText: {
     color: 'white',
     fontSize: 18,
   },
   buttons: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     marginTop: 12,
   },
   cancelButton: {
     backgroundColor: 'modalButton',
     borderRadius: 3,
     paddingHorizontal: 10,
     paddingVertical: 4,
   },
   cancelText: {
     color: 'modalButtonLabel',
     fontSize: 18,
   },
 };
 
 export default React.memo<BaseProps>(function ConnectedAddUsersModal(
   props: BaseProps,
 ) {
   const { parentThreadID } = props.route.params.threadInfo;
 
   const parentThreadInfo = useSelector((state) =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
   const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
   const changeThreadSettingsLoadingStatus = useSelector(
     createLoadingStatusSelector(changeThreadSettingsActionTypes),
   );
   const styles = useStyles(unboundStyles);
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useServerCall(changeThreadSettings);
   return (
     <AddUsersModal
       {...props}
       parentThreadInfo={parentThreadInfo}
       otherUserInfos={otherUserInfos}
       userSearchIndex={userSearchIndex}
       changeThreadSettingsLoadingStatus={changeThreadSettingsLoadingStatus}
       styles={styles}
       dispatchActionPromise={dispatchActionPromise}
       changeThreadSettings={callChangeThreadSettings}
     />
   );
 });
diff --git a/native/chat/settings/color-picker-modal.react.js b/native/chat/settings/color-picker-modal.react.js
index 407c23314..18357ed67 100644
--- a/native/chat/settings/color-picker-modal.react.js
+++ b/native/chat/settings/color-picker-modal.react.js
@@ -1,174 +1,171 @@
 // @flow
 
 import * as React from 'react';
 import { TouchableHighlight, Alert } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import { useSelector } from 'react-redux';
 
 import {
   changeThreadSettingsActionTypes,
   changeThreadSettings,
 } from 'lib/actions/thread-actions';
 import {
   type ThreadInfo,
   type ChangeThreadSettingsPayload,
   type UpdateThreadRequest,
 } from 'lib/types/thread-types';
 import type { DispatchActionPromise } from 'lib/utils/action-utils';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import ColorPicker from '../../components/color-picker.react';
 import Modal from '../../components/modal.react';
 import type { RootNavigationProp } from '../../navigation/root-navigator.react';
 import type { NavigationRoute } from '../../navigation/route-names';
 import { type Colors, useStyles, useColors } from '../../themes/colors';
 
 export type ColorPickerModalParams = {|
   presentedFrom: string,
   color: string,
   threadInfo: ThreadInfo,
   setColor: (color: string) => void,
 |};
 
 type BaseProps = {|
   +navigation: RootNavigationProp<'ColorPickerModal'>,
   +route: NavigationRoute<'ColorPickerModal'>,
 |};
 type Props = {|
   ...BaseProps,
   // Redux state
   +colors: Colors,
   +styles: typeof unboundStyles,
   +windowWidth: number,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeThreadSettings: (
     request: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
 |};
 class ColorPickerModal extends React.PureComponent<Props> {
   render() {
     const { color, threadInfo } = this.props.route.params;
     // Based on the assumption we are always in portrait,
     // and consequently width is the lowest dimensions
     const modalStyle = { height: this.props.windowWidth - 5 };
     return (
-      <Modal
-        navigation={this.props.navigation}
-        modalStyle={[this.props.styles.colorPickerContainer, modalStyle]}
-      >
+      <Modal modalStyle={[this.props.styles.colorPickerContainer, modalStyle]}>
         <ColorPicker
           defaultColor={color}
           oldColor={threadInfo.color}
           onColorSelected={this.onColorSelected}
           style={this.props.styles.colorPicker}
         />
         <TouchableHighlight
           onPress={this.close}
           style={this.props.styles.closeButton}
           underlayColor={this.props.colors.modalIosHighlightUnderlay}
         >
           <Icon
             name="close"
             size={16}
             style={this.props.styles.closeButtonIcon}
           />
         </TouchableHighlight>
       </Modal>
     );
   }
 
   close = () => {
     this.props.navigation.goBackOnce();
   };
 
   onColorSelected = (color: string) => {
     const colorEditValue = color.substr(1);
     this.props.route.params.setColor(colorEditValue);
     this.close();
     this.props.dispatchActionPromise(
       changeThreadSettingsActionTypes,
       this.editColor(colorEditValue),
       { customKeyName: `${changeThreadSettingsActionTypes.started}:color` },
     );
   };
 
   async editColor(newColor: string) {
     const threadID = this.props.route.params.threadInfo.id;
     try {
       return await this.props.changeThreadSettings({
         threadID,
         changes: { color: newColor },
       });
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: this.onErrorAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }
 
   onErrorAcknowledged = () => {
     const { threadInfo, setColor } = this.props.route.params;
     setColor(threadInfo.color);
   };
 }
 
 const unboundStyles = {
   closeButton: {
     borderRadius: 3,
     height: 18,
     position: 'absolute',
     right: 5,
     top: 5,
     width: 18,
   },
   closeButtonIcon: {
     color: 'modalBackgroundSecondaryLabel',
     left: 3,
     position: 'absolute',
   },
   colorPicker: {
     bottom: 10,
     left: 10,
     position: 'absolute',
     right: 10,
     top: 10,
   },
   colorPickerContainer: {
     backgroundColor: 'modalBackground',
     borderRadius: 5,
     flex: 0,
     marginHorizontal: 15,
     marginVertical: 20,
   },
 };
 
 export default React.memo<BaseProps>(function ConnectedColorPickerModal(
   props: BaseProps,
 ) {
   const styles = useStyles(unboundStyles);
   const colors = useColors();
   const windowWidth = useSelector((state) => state.dimensions.width);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useServerCall(changeThreadSettings);
 
   return (
     <ColorPickerModal
       {...props}
       styles={styles}
       colors={colors}
       windowWidth={windowWidth}
       dispatchActionPromise={dispatchActionPromise}
       changeThreadSettings={callChangeThreadSettings}
     />
   );
 });
diff --git a/native/chat/settings/compose-subthread-modal.react.js b/native/chat/settings/compose-subthread-modal.react.js
index 92728c90f..d44c72b58 100644
--- a/native/chat/settings/compose-subthread-modal.react.js
+++ b/native/chat/settings/compose-subthread-modal.react.js
@@ -1,166 +1,163 @@
 // @flow
 
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { Text } from 'react-native';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
 import { threadTypeDescriptions } from 'lib/shared/thread-utils';
 import {
   type ThreadInfo,
   threadInfoPropType,
   threadTypes,
 } from 'lib/types/thread-types';
 import { connect } from 'lib/utils/redux-utils';
 
 import Button from '../../components/button.react';
 import Modal from '../../components/modal.react';
 import type { RootNavigationProp } from '../../navigation/root-navigator.react';
 import type { NavigationRoute } from '../../navigation/route-names';
 import { ComposeThreadRouteName } from '../../navigation/route-names';
 import type { AppState } from '../../redux/redux-setup';
 import {
   type Colors,
   colorsPropType,
   colorsSelector,
   styleSelector,
 } from '../../themes/colors';
 
 export type ComposeSubthreadModalParams = {|
   presentedFrom: string,
   threadInfo: ThreadInfo,
 |};
 
 type Props = {|
   navigation: RootNavigationProp<'ComposeSubthreadModal'>,
   route: NavigationRoute<'ComposeSubthreadModal'>,
   // Redux state
   colors: Colors,
   styles: typeof styles,
 |};
 class ComposeSubthreadModal extends React.PureComponent<Props> {
   static propTypes = {
     navigation: PropTypes.shape({
       navigate: PropTypes.func.isRequired,
     }).isRequired,
     route: PropTypes.shape({
       params: PropTypes.shape({
         presentedFrom: PropTypes.string.isRequired,
         threadInfo: threadInfoPropType.isRequired,
       }).isRequired,
     }).isRequired,
     colors: colorsPropType.isRequired,
     styles: PropTypes.objectOf(PropTypes.object).isRequired,
   };
 
   render() {
     return (
-      <Modal
-        navigation={this.props.navigation}
-        modalStyle={this.props.styles.modal}
-      >
+      <Modal modalStyle={this.props.styles.modal}>
         <Text style={this.props.styles.visibility}>Thread type</Text>
         <Button style={this.props.styles.option} onPress={this.onPressOpen}>
           <Icon
             name="public"
             size={32}
             style={this.props.styles.visibilityIcon}
           />
           <Text style={this.props.styles.optionText}>Open</Text>
           <Text style={this.props.styles.optionExplanation}>
             {threadTypeDescriptions[threadTypes.CHAT_NESTED_OPEN]}
           </Text>
           <IonIcon
             name="ios-arrow-forward"
             size={20}
             style={this.props.styles.forwardIcon}
           />
         </Button>
         <Button style={this.props.styles.option} onPress={this.onPressSecret}>
           <Icon
             name="lock-outline"
             size={32}
             style={this.props.styles.visibilityIcon}
           />
           <Text style={this.props.styles.optionText}>Secret</Text>
           <Text style={this.props.styles.optionExplanation}>
             {threadTypeDescriptions[threadTypes.CHAT_SECRET]}
           </Text>
           <IonIcon
             name="ios-arrow-forward"
             size={20}
             style={this.props.styles.forwardIcon}
           />
         </Button>
       </Modal>
     );
   }
 
   onPressOpen = () => {
     const threadInfo = this.props.route.params.threadInfo;
     this.props.navigation.navigate({
       name: ComposeThreadRouteName,
       params: {
         threadType: threadTypes.CHAT_NESTED_OPEN,
         parentThreadInfo: threadInfo,
       },
       key: `${ComposeThreadRouteName}|${threadInfo.id}|${threadTypes.CHAT_NESTED_OPEN}`,
     });
   };
 
   onPressSecret = () => {
     const threadInfo = this.props.route.params.threadInfo;
     this.props.navigation.navigate({
       name: ComposeThreadRouteName,
       params: {
         threadType: threadTypes.CHAT_SECRET,
         parentThreadInfo: threadInfo,
       },
       key: `${ComposeThreadRouteName}|${threadInfo.id}|${threadTypes.CHAT_SECRET}`,
     });
   };
 }
 
 const styles = {
   forwardIcon: {
     color: 'link',
     paddingLeft: 10,
   },
   modal: {
     flex: 0,
   },
   option: {
     alignItems: 'center',
     flexDirection: 'row',
     paddingHorizontal: 10,
     paddingVertical: 20,
   },
   optionExplanation: {
     color: 'modalBackgroundLabel',
     flex: 1,
     fontSize: 14,
     paddingLeft: 20,
     textAlign: 'center',
   },
   optionText: {
     color: 'modalBackgroundLabel',
     fontSize: 20,
     paddingLeft: 5,
   },
   visibility: {
     color: 'modalBackgroundLabel',
     fontSize: 24,
     textAlign: 'center',
   },
   visibilityIcon: {
     color: 'modalBackgroundLabel',
     paddingRight: 3,
   },
 };
 const stylesSelector = styleSelector(styles);
 
 export default connect((state: AppState) => ({
   colors: colorsSelector(state),
   styles: stylesSelector(state),
 }))(ComposeSubthreadModal);
diff --git a/native/chat/sidebar-list-modal.react.js b/native/chat/sidebar-list-modal.react.js
index 84aee5a68..45acf6f52 100644
--- a/native/chat/sidebar-list-modal.react.js
+++ b/native/chat/sidebar-list-modal.react.js
@@ -1,162 +1,162 @@
 // @flow
 
 import * as React from 'react';
 import { TextInput, FlatList, StyleSheet } from 'react-native';
 
 import { sidebarInfoSelector } from 'lib/selectors/thread-selectors';
 import SearchIndex from 'lib/shared/search-index';
 import { threadSearchText } from 'lib/shared/thread-utils';
 import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
 
 import Modal from '../components/modal.react';
 import Search from '../components/search.react';
 import type { RootNavigationProp } from '../navigation/root-navigator.react';
 import type { NavigationRoute } from '../navigation/route-names';
 import { MessageListRouteName } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils';
 import { useIndicatorStyle } from '../themes/colors';
 import { waitForModalInputFocus } from '../utils/timers';
 import SidebarItem from './sidebar-item.react';
 
 export type SidebarListModalParams = {|
   +threadInfo: ThreadInfo,
 |};
 
 function keyExtractor(sidebarInfo: SidebarInfo) {
   return sidebarInfo.threadInfo.id;
 }
 function getItemLayout(data: ?$ReadOnlyArray<SidebarInfo>, index: number) {
   return { length: 24, offset: 24 * index, index };
 }
 
 type Props = {|
   +navigation: RootNavigationProp<'SidebarListModal'>,
   +route: NavigationRoute<'SidebarListModal'>,
 |};
 function SidebarListModal(props: Props) {
   const threadID = props.route.params.threadInfo.id;
   const sidebarInfos = useSelector(
     (state) => sidebarInfoSelector(state)[threadID] ?? [],
   );
 
   const [searchState, setSearchState] = React.useState({
     text: '',
     results: new Set<string>(),
   });
 
   const listData = React.useMemo(() => {
     if (!searchState.text) {
       return sidebarInfos;
     }
     return sidebarInfos.filter(({ threadInfo }) =>
       searchState.results.has(threadInfo.id),
     );
   }, [sidebarInfos, searchState]);
 
   const userInfos = useSelector((state) => state.userStore.userInfos);
   const searchIndex = React.useMemo(() => {
     const index = new SearchIndex();
     for (const sidebarInfo of sidebarInfos) {
       const { threadInfo } = sidebarInfo;
       index.addEntry(threadInfo.id, threadSearchText(threadInfo, userInfos));
     }
     return index;
   }, [sidebarInfos, userInfos]);
   React.useEffect(() => {
     setSearchState((curState) => ({
       ...curState,
       results: new Set(searchIndex.getSearchResults(curState.text)),
     }));
   }, [searchIndex]);
 
   const onChangeSearchText = React.useCallback(
     (searchText: string) =>
       setSearchState({
         text: searchText,
         results: new Set(searchIndex.getSearchResults(searchText)),
       }),
     [searchIndex],
   );
 
   const searchTextInputRef = React.useRef();
   const setSearchTextInputRef = React.useCallback(
     async (textInput: ?React.ElementRef<typeof TextInput>) => {
       searchTextInputRef.current = textInput;
       if (!textInput) {
         return;
       }
       await waitForModalInputFocus();
       if (searchTextInputRef.current) {
         searchTextInputRef.current.focus();
       }
     },
     [],
   );
 
   const { navigation } = props;
   const { navigate } = navigation;
   const onPressItem = React.useCallback(
     (threadInfo: ThreadInfo) => {
       setSearchState({
         text: '',
         results: new Set(),
       });
       if (searchTextInputRef.current) {
         searchTextInputRef.current.blur();
       }
       navigate({
         name: MessageListRouteName,
         params: { threadInfo },
         key: `${MessageListRouteName}${threadInfo.id}`,
       });
     },
     [navigate],
   );
 
   const renderItem = React.useCallback(
     (row: { item: SidebarInfo, ... }) => {
       return (
         <SidebarItem
           sidebarInfo={row.item}
           onPressItem={onPressItem}
           style={styles.sidebar}
         />
       );
     },
     [onPressItem],
   );
 
   const indicatorStyle = useIndicatorStyle();
   return (
-    <Modal navigation={navigation}>
+    <Modal>
       <Search
         searchText={searchState.text}
         onChangeText={onChangeSearchText}
         containerStyle={styles.search}
         placeholder="Search sidebars"
         ref={setSearchTextInputRef}
       />
       <FlatList
         data={listData}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
         getItemLayout={getItemLayout}
         keyboardShouldPersistTaps="handled"
         initialNumToRender={20}
         indicatorStyle={indicatorStyle}
       />
     </Modal>
   );
 }
 
 const styles = StyleSheet.create({
   search: {
     marginBottom: 8,
   },
   sidebar: {
     marginLeft: 0,
     marginRight: 5,
   },
 });
 
 export default SidebarListModal;
diff --git a/native/components/modal.react.js b/native/components/modal.react.js
index e83dca55b..39a151440 100644
--- a/native/components/modal.react.js
+++ b/native/components/modal.react.js
@@ -1,71 +1,62 @@
 // @flow
 
+import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
 import { View, TouchableWithoutFeedback, StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import type { Edge } from 'react-native-safe-area-context';
 
-import { connect } from 'lib/utils/redux-utils';
-
-import type { RootNavigationProp } from '../navigation/root-navigator.react';
-import type { AppState } from '../redux/redux-setup';
-import { styleSelector } from '../themes/colors';
+import { useStyles } from '../themes/colors';
 import type { ViewStyle } from '../types/styles';
 import KeyboardAvoidingView from './keyboard-avoiding-view.react';
 
 type Props = $ReadOnly<{|
-  navigation: RootNavigationProp<>,
-  children: React.Node,
-  containerStyle?: ViewStyle,
-  modalStyle?: ViewStyle,
-  safeAreaEdges?: $ReadOnlyArray<Edge>,
-  // Redux state
-  styles: typeof styles,
+  +children: React.Node,
+  +containerStyle?: ViewStyle,
+  +modalStyle?: ViewStyle,
+  +safeAreaEdges?: $ReadOnlyArray<Edge>,
 |}>;
-class Modal extends React.PureComponent<Props> {
-  close = () => {
-    if (this.props.navigation.isFocused()) {
-      this.props.navigation.goBackOnce();
+function Modal(props: Props) {
+  const navigation = useNavigation();
+  const close = React.useCallback(() => {
+    if (navigation.isFocused()) {
+      navigation.goBack();
     }
-  };
+  }, [navigation]);
 
-  render() {
-    const { containerStyle, modalStyle, children, safeAreaEdges } = this.props;
-    return (
-      <SafeAreaView style={this.props.styles.container} edges={safeAreaEdges}>
-        <KeyboardAvoidingView
-          behavior="padding"
-          style={[this.props.styles.container, containerStyle]}
-        >
-          <TouchableWithoutFeedback onPress={this.close}>
-            <View style={StyleSheet.absoluteFill} />
-          </TouchableWithoutFeedback>
-          <View style={[this.props.styles.modal, modalStyle]}>{children}</View>
-        </KeyboardAvoidingView>
-      </SafeAreaView>
-    );
-  }
+  const styles = useStyles(unboundStyles);
+  const { containerStyle, modalStyle, children, safeAreaEdges } = props;
+  return (
+    <SafeAreaView style={styles.container} edges={safeAreaEdges}>
+      <KeyboardAvoidingView
+        behavior="padding"
+        style={[styles.container, containerStyle]}
+      >
+        <TouchableWithoutFeedback onPress={close}>
+          <View style={StyleSheet.absoluteFill} />
+        </TouchableWithoutFeedback>
+        <View style={[styles.modal, modalStyle]}>{children}</View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
 }
 
-const styles = {
+const unboundStyles = {
   container: {
     flex: 1,
     justifyContent: 'center',
     overflow: 'visible',
   },
   modal: {
     backgroundColor: 'modalBackground',
     borderRadius: 5,
     flex: 1,
     justifyContent: 'center',
     marginBottom: 30,
     marginHorizontal: 15,
     marginTop: 100,
     padding: 12,
   },
 };
-const stylesSelector = styleSelector(styles);
 
-export default connect((state: AppState) => ({
-  styles: stylesSelector(state),
-}))(Modal);
+export default Modal;
diff --git a/native/more/custom-server-modal.react.js b/native/more/custom-server-modal.react.js
index 34f507c4c..cda103996 100644
--- a/native/more/custom-server-modal.react.js
+++ b/native/more/custom-server-modal.react.js
@@ -1,129 +1,128 @@
 // @flow
 
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { Text, TextInput } from 'react-native';
 
 import type { DispatchActionPayload } from 'lib/utils/action-utils';
 import { connect } from 'lib/utils/redux-utils';
 import { setURLPrefix } from 'lib/utils/url-utils';
 
 import Button from '../components/button.react';
 import Modal from '../components/modal.react';
 import type { RootNavigationProp } from '../navigation/root-navigator.react';
 import type { AppState } from '../redux/redux-setup';
 import { styleSelector } from '../themes/colors';
 import { setCustomServer } from '../utils/url-utils';
 
 export type CustomServerModalParams = {|
   presentedFrom: string,
 |};
 
 type Props = {|
   navigation: RootNavigationProp<'CustomServerModal'>,
   // Redux state
   urlPrefix: string,
   customServer: ?string,
   styles: typeof styles,
   // Redux dispatch functions
   dispatchActionPayload: DispatchActionPayload,
 |};
 type State = {|
   customServer: string,
 |};
 class CustomServerModal extends React.PureComponent<Props, State> {
   static propTypes = {
     navigation: PropTypes.shape({
       goBackOnce: PropTypes.func.isRequired,
     }).isRequired,
     urlPrefix: PropTypes.string.isRequired,
     customServer: PropTypes.string,
     styles: PropTypes.objectOf(PropTypes.object).isRequired,
     dispatchActionPayload: PropTypes.func.isRequired,
   };
 
   constructor(props: Props) {
     super(props);
     const { customServer } = props;
     this.state = {
       customServer: customServer ? customServer : '',
     };
   }
 
   render() {
     return (
       <Modal
-        navigation={this.props.navigation}
         containerStyle={this.props.styles.container}
         modalStyle={this.props.styles.modal}
       >
         <TextInput
           style={this.props.styles.textInput}
           value={this.state.customServer}
           onChangeText={this.onChangeCustomServer}
           autoFocus={true}
         />
         <Button onPress={this.onPressGo} style={this.props.styles.button}>
           <Text style={this.props.styles.buttonText}>Go</Text>
         </Button>
       </Modal>
     );
   }
 
   onChangeCustomServer = (newCustomServer: string) => {
     this.setState({ customServer: newCustomServer });
   };
 
   onPressGo = () => {
     const { customServer } = this.state;
     if (customServer !== this.props.urlPrefix) {
       this.props.dispatchActionPayload(setURLPrefix, customServer);
     }
     if (customServer && customServer !== this.props.customServer) {
       this.props.dispatchActionPayload(setCustomServer, customServer);
     }
     this.props.navigation.goBackOnce();
   };
 }
 
 const styles = {
   button: {
     backgroundColor: 'greenButton',
     borderRadius: 5,
     marginHorizontal: 2,
     marginVertical: 2,
     paddingHorizontal: 12,
     paddingVertical: 4,
   },
   buttonText: {
     color: 'white',
     fontSize: 18,
     textAlign: 'center',
   },
   container: {
     justifyContent: 'flex-end',
   },
   modal: {
     flex: 0,
     flexDirection: 'row',
   },
   textInput: {
     color: 'modalBackgroundLabel',
     flex: 1,
     fontSize: 16,
     margin: 0,
     padding: 0,
     borderBottomColor: 'transparent',
   },
 };
 const stylesSelector = styleSelector(styles);
 
 export default connect(
   (state: AppState) => ({
     urlPrefix: state.urlPrefix,
     customServer: state.customServer,
     styles: stylesSelector(state),
   }),
   null,
   true,
 )(CustomServerModal);