diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
index 0453534d0..d667e8734 100644
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -1,846 +1,846 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 import * as React from 'react';
 import {
   View,
   Text,
   TouchableOpacity,
   Image,
   Keyboard,
   Platform,
   BackHandler,
   ActivityIndicator,
 } from 'react-native';
 import Animated, { EasingNode } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { resetUserStateActionType } from 'lib/actions/user-actions.js';
 import {
   cookieSelector,
   urlPrefixSelector,
 } from 'lib/selectors/keyserver-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import { useInitialNotificationsEncryptedMessage } from 'lib/shared/crypto-utils.js';
 import { logInActionSources } from 'lib/types/account-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { fetchNewCookieFromNativeCredentials } from 'lib/utils/action-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import { splashBackgroundURI } from './background-info.js';
 import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js';
 import LogInPanel from './log-in-panel.react.js';
 import type { LogInState } from './log-in-panel.react.js';
 import LoggedOutStaffInfo from './logged-out-staff-info.react.js';
 import RegisterPanel from './register-panel.react.js';
 import type { RegisterState } from './register-panel.react.js';
 import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import {
   addKeyboardShowListener,
   addKeyboardDismissListener,
   removeKeyboardListener,
 } from '../keyboard/keyboard.js';
 import { createIsForegroundSelector } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import {
   type NavigationRoute,
   LoggedOutModalRouteName,
   RegistrationRouteName,
   QRCodeSignInNavigatorRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { usePersistedStateLoaded } from '../selectors/app-state-selectors.js';
 import {
   type DerivedDimensionsInfo,
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors.js';
 import { splashStyleSelector } from '../splash.js';
 import { useStyles } from '../themes/colors.js';
 import type {
   EventSubscription,
   KeyboardEvent,
 } from '../types/react-native.js';
 import type { ImageStyle } from '../types/styles.js';
 import {
   runTiming,
   ratchetAlongWithKeyboardHeight,
 } from '../utils/animation-utils.js';
 import { nativeNotificationsSessionCreator } from '../utils/crypto-utils.js';
 import {
   type StateContainer,
   type StateChange,
   setStateForContainer,
 } from '../utils/state-container.js';
 import EthereumLogo from '../vectors/ethereum-logo.react.js';
 
 let initialAppLoad = true;
 const safeAreaEdges = ['top', 'bottom'];
 
 /* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Node,
   Clock,
   block,
   set,
   call,
   cond,
   not,
   and,
   eq,
   neq,
   lessThan,
   greaterOrEq,
   add,
   sub,
   divide,
   max,
   stopClock,
   clockRunning,
 } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 export type LoggedOutMode =
   | 'loading'
   | 'prompt'
   | 'log-in'
   | 'register'
   | 'siwe';
 const modeNumbers: { [LoggedOutMode]: number } = {
   'loading': 0,
   'prompt': 1,
   'log-in': 2,
   'register': 3,
   'siwe': 4,
 };
 function isPastPrompt(modeValue: Node) {
   return and(
     neq(modeValue, modeNumbers['loading']),
     neq(modeValue, modeNumbers['prompt']),
   );
 }
 
 const unboundStyles = {
   animationContainer: {
     flex: 1,
   },
   backButton: {
     position: 'absolute',
     top: 13,
   },
   button: {
     borderRadius: 4,
     marginBottom: 4,
     marginTop: 4,
     marginLeft: 4,
     marginRight: 4,
     paddingBottom: 14,
     paddingLeft: 18,
     paddingRight: 18,
     paddingTop: 14,
     flex: 1,
   },
   buttonContainer: {
     bottom: 0,
     left: 0,
     marginLeft: 26,
     marginRight: 26,
     paddingBottom: 20,
     position: 'absolute',
     right: 0,
   },
   buttonText: {
     fontFamily: 'OpenSans-Semibold',
     fontSize: 17,
     textAlign: 'center',
   },
   classicAuthButton: {
     backgroundColor: 'purpleButton',
   },
   classicAuthButtonText: {
     color: 'whiteText',
   },
   registerButtons: {
     flexDirection: 'row',
   },
   signInButtons: {
     flexDirection: 'row',
   },
   container: {
     backgroundColor: 'transparent',
     flex: 1,
   },
   header: {
     color: 'white',
     fontFamily: Platform.OS === 'ios' ? 'IBMPlexSans' : 'IBMPlexSans-Medium',
     fontSize: 56,
     fontWeight: '500',
     lineHeight: 66,
     textAlign: 'center',
   },
   loadingIndicator: {
     paddingTop: 15,
   },
   modalBackground: {
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   siweButton: {
     backgroundColor: 'siweButton',
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
   },
   siweButtonText: {
     color: 'siweButtonText',
   },
   siweOr: {
     flex: 1,
     flexDirection: 'row',
     marginBottom: 18,
     marginTop: 14,
   },
   siweOrLeftHR: {
     borderColor: 'logInSpacer',
     borderTopWidth: 1,
     flex: 1,
     marginRight: 18,
     marginTop: 10,
   },
   siweOrRightHR: {
     borderColor: 'logInSpacer',
     borderTopWidth: 1,
     flex: 1,
     marginLeft: 18,
     marginTop: 10,
   },
   siweOrText: {
     color: 'whiteText',
     fontSize: 17,
     textAlign: 'center',
   },
   siweIcon: {
     paddingRight: 10,
   },
 };
 
 type BaseProps = {
   +navigation: RootNavigationProp<'LoggedOutModal'>,
   +route: NavigationRoute<'LoggedOutModal'>,
 };
 
 type Props = {
   ...BaseProps,
   // Navigation state
   +isForeground: boolean,
   // Redux state
   +persistedStateLoaded: boolean,
   +rehydrateConcluded: boolean,
   +cookie: ?string,
   +urlPrefix: string,
   +loggedIn: boolean,
   +dimensions: DerivedDimensionsInfo,
   +splashStyle: ImageStyle,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatch: Dispatch,
   // Keyserver olm sessions functions
   +getInitialNotificationsEncryptedMessage: () => Promise<string>,
 };
 type State = {
   +mode: LoggedOutMode,
   +nextMode: LoggedOutMode,
   +logInState: StateContainer<LogInState>,
   +registerState: StateContainer<RegisterState>,
 };
 class LoggedOutModal extends React.PureComponent<Props, State> {
   keyboardShowListener: ?EventSubscription;
   keyboardHideListener: ?EventSubscription;
 
   mounted = false;
   nextMode: LoggedOutMode = 'loading';
   activeAlert = false;
 
   contentHeight: Value;
   keyboardHeightValue: Value = new Value(0);
   modeValue: Value;
 
   buttonOpacity: Value;
   panelPaddingTopValue: Node;
   panelOpacityValue: Node;
 
   constructor(props: Props) {
     super(props);
 
     // Man, this is a lot of boilerplate just to containerize some state.
     // Mostly due to Flow typing requirements...
     const setLogInState = setStateForContainer(
       this.guardedSetState,
       (change: $Shape<LogInState>) => (fullState: State) => ({
         logInState: {
           ...fullState.logInState,
           state: { ...fullState.logInState.state, ...change },
         },
       }),
     );
     const setRegisterState = setStateForContainer(
       this.guardedSetState,
       (change: $Shape<RegisterState>) => (fullState: State) => ({
         registerState: {
           ...fullState.registerState,
           state: { ...fullState.registerState.state, ...change },
         },
       }),
     );
 
     const initialMode = props.persistedStateLoaded ? 'prompt' : 'loading';
     this.state = {
       mode: initialMode,
       nextMode: initialMode,
       logInState: {
         state: {
           usernameInputText: null,
           passwordInputText: null,
         },
         setState: setLogInState,
       },
       registerState: {
         state: {
           usernameInputText: '',
           passwordInputText: '',
           confirmPasswordInputText: '',
         },
         setState: setRegisterState,
       },
     };
     this.nextMode = initialMode;
 
     this.contentHeight = new Value(props.dimensions.safeAreaHeight);
     this.modeValue = new Value(modeNumbers[this.nextMode]);
 
     this.buttonOpacity = new Value(props.persistedStateLoaded ? 1 : 0);
     this.panelPaddingTopValue = this.panelPaddingTop();
     this.panelOpacityValue = this.panelOpacity();
   }
 
   guardedSetState = (change: StateChange<State>, callback?: () => mixed) => {
     if (this.mounted) {
       this.setState(change, callback);
     }
   };
 
   setMode(newMode: LoggedOutMode) {
     this.nextMode = newMode;
     this.guardedSetState({ mode: newMode, nextMode: newMode });
     this.modeValue.setValue(modeNumbers[newMode]);
   }
 
   proceedToNextMode = () => {
     this.guardedSetState({ mode: this.nextMode });
   };
 
   componentDidMount() {
     this.mounted = true;
     if (this.props.rehydrateConcluded) {
       this.onInitialAppLoad();
     }
     if (this.props.isForeground) {
       this.onForeground();
     }
   }
 
   componentWillUnmount() {
     this.mounted = false;
     if (this.props.isForeground) {
       this.onBackground();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (!prevProps.persistedStateLoaded && this.props.persistedStateLoaded) {
       this.setMode('prompt');
     }
     if (!prevProps.rehydrateConcluded && this.props.rehydrateConcluded) {
       this.onInitialAppLoad();
     }
     if (!prevProps.isForeground && this.props.isForeground) {
       this.onForeground();
     } else if (prevProps.isForeground && !this.props.isForeground) {
       this.onBackground();
     }
 
     if (this.state.mode === 'prompt' && prevState.mode !== 'prompt') {
       this.buttonOpacity.setValue(0);
       Animated.timing(this.buttonOpacity, {
         easing: EasingNode.out(EasingNode.ease),
         duration: 250,
         toValue: 1.0,
       }).start();
     }
 
     const newContentHeight = this.props.dimensions.safeAreaHeight;
     const oldContentHeight = prevProps.dimensions.safeAreaHeight;
     if (newContentHeight !== oldContentHeight) {
       this.contentHeight.setValue(newContentHeight);
     }
   }
 
   onForeground() {
     this.keyboardShowListener = addKeyboardShowListener(this.keyboardShow);
     this.keyboardHideListener = addKeyboardDismissListener(this.keyboardHide);
     BackHandler.addEventListener('hardwareBackPress', this.hardwareBack);
   }
 
   onBackground() {
     if (this.keyboardShowListener) {
       removeKeyboardListener(this.keyboardShowListener);
       this.keyboardShowListener = null;
     }
     if (this.keyboardHideListener) {
       removeKeyboardListener(this.keyboardHideListener);
       this.keyboardHideListener = null;
     }
     BackHandler.removeEventListener('hardwareBackPress', this.hardwareBack);
   }
 
   // This gets triggered when an app is killed and restarted
   // Not when it is returned from being backgrounded
   async onInitialAppLoad() {
     if (!initialAppLoad) {
       return;
     }
     initialAppLoad = false;
 
     const { loggedIn, cookie, urlPrefix, dispatch } = this.props;
     const hasUserCookie = cookie && cookie.startsWith('user=');
     if (loggedIn === !!hasUserCookie) {
       return;
     }
     if (!__DEV__) {
       const actionSource = loggedIn
         ? logInActionSources.appStartReduxLoggedInButInvalidCookie
         : logInActionSources.appStartCookieLoggedInButInvalidRedux;
       const sessionChange = await fetchNewCookieFromNativeCredentials(
         dispatch,
         cookie,
         urlPrefix,
         actionSource,
         ashoatKeyserverID,
         this.props.getInitialNotificationsEncryptedMessage,
       );
       if (
         sessionChange &&
         sessionChange.cookie &&
         sessionChange.cookie.startsWith('user=')
       ) {
         // success! we can expect subsequent actions to fix up the state
         return;
       }
     }
     this.props.dispatch({ type: resetUserStateActionType });
   }
 
   hardwareBack: () => boolean = () => {
     if (this.nextMode !== 'prompt') {
       this.goBackToPrompt();
       return true;
     }
     return false;
   };
 
   panelPaddingTop(): Node {
     const headerHeight = Platform.OS === 'ios' ? 62.33 : 58.54;
     const promptButtonsSize = Platform.OS === 'ios' ? 40 : 61;
     const logInContainerSize = 140;
     const registerPanelSize = Platform.OS === 'ios' ? 181 : 180;
     const siwePanelSize = 250;
 
     const containerSize = add(
       headerHeight,
       cond(not(isPastPrompt(this.modeValue)), promptButtonsSize, 0),
       cond(eq(this.modeValue, modeNumbers['log-in']), logInContainerSize, 0),
       cond(eq(this.modeValue, modeNumbers['register']), registerPanelSize, 0),
       cond(eq(this.modeValue, modeNumbers['siwe']), siwePanelSize, 0),
     );
     const potentialPanelPaddingTop = divide(
       max(sub(this.contentHeight, this.keyboardHeightValue, containerSize), 0),
       2,
     );
 
     const panelPaddingTop = new Value(-1);
     const targetPanelPaddingTop = new Value(-1);
     const prevModeValue = new Value(modeNumbers[this.nextMode]);
     const clock = new Clock();
     const keyboardTimeoutClock = new Clock();
     return block([
       cond(lessThan(panelPaddingTop, 0), [
         set(panelPaddingTop, potentialPanelPaddingTop),
         set(targetPanelPaddingTop, potentialPanelPaddingTop),
       ]),
       cond(
         lessThan(this.keyboardHeightValue, 0),
         [
           runTiming(keyboardTimeoutClock, 0, 1, true, { duration: 500 }),
           cond(
             not(clockRunning(keyboardTimeoutClock)),
             set(this.keyboardHeightValue, 0),
           ),
         ],
         stopClock(keyboardTimeoutClock),
       ),
       cond(
         and(
           greaterOrEq(this.keyboardHeightValue, 0),
           neq(prevModeValue, this.modeValue),
         ),
         [
           stopClock(clock),
           cond(
             neq(isPastPrompt(prevModeValue), isPastPrompt(this.modeValue)),
             set(targetPanelPaddingTop, potentialPanelPaddingTop),
           ),
           set(prevModeValue, this.modeValue),
         ],
       ),
       ratchetAlongWithKeyboardHeight(this.keyboardHeightValue, [
         stopClock(clock),
         set(targetPanelPaddingTop, potentialPanelPaddingTop),
       ]),
       cond(
         neq(panelPaddingTop, targetPanelPaddingTop),
         set(
           panelPaddingTop,
           runTiming(clock, panelPaddingTop, targetPanelPaddingTop),
         ),
       ),
       panelPaddingTop,
     ]);
   }
 
   panelOpacity(): Node {
     const targetPanelOpacity = isPastPrompt(this.modeValue);
 
     const panelOpacity = new Value(-1);
     const prevPanelOpacity = new Value(-1);
     const prevTargetPanelOpacity = new Value(-1);
     const clock = new Clock();
     return block([
       cond(lessThan(panelOpacity, 0), [
         set(panelOpacity, targetPanelOpacity),
         set(prevPanelOpacity, targetPanelOpacity),
         set(prevTargetPanelOpacity, targetPanelOpacity),
       ]),
       cond(greaterOrEq(this.keyboardHeightValue, 0), [
         cond(neq(targetPanelOpacity, prevTargetPanelOpacity), [
           stopClock(clock),
           set(prevTargetPanelOpacity, targetPanelOpacity),
         ]),
         cond(
           neq(panelOpacity, targetPanelOpacity),
           set(panelOpacity, runTiming(clock, panelOpacity, targetPanelOpacity)),
         ),
       ]),
       cond(
         and(eq(panelOpacity, 0), neq(prevPanelOpacity, 0)),
         call([], this.proceedToNextMode),
       ),
       set(prevPanelOpacity, panelOpacity),
       panelOpacity,
     ]);
   }
 
   keyboardShow = (event: KeyboardEvent) => {
     if (
       event.startCoordinates &&
       _isEqual(event.startCoordinates)(event.endCoordinates)
     ) {
       return;
     }
     const keyboardHeight = Platform.select({
       // Android doesn't include the bottomInset in this height measurement
       android: event.endCoordinates.height,
       default: Math.max(
         event.endCoordinates.height - this.props.dimensions.bottomInset,
         0,
       ),
     });
     this.keyboardHeightValue.setValue(keyboardHeight);
   };
 
   keyboardHide = () => {
     if (!this.activeAlert) {
       this.keyboardHeightValue.setValue(0);
     }
   };
 
   setActiveAlert = (activeAlert: boolean) => {
     this.activeAlert = activeAlert;
   };
 
   goBackToPrompt = () => {
     this.nextMode = 'prompt';
     this.guardedSetState({ nextMode: 'prompt' });
     this.keyboardHeightValue.setValue(0);
     this.modeValue.setValue(modeNumbers['prompt']);
     Keyboard.dismiss();
   };
 
   render(): React.Node {
     const { styles } = this.props;
 
     const siweButton = (
       <>
         <TouchableOpacity
           onPress={this.onPressSIWE}
           style={[styles.button, styles.siweButton]}
           activeOpacity={0.6}
         >
           <View style={styles.siweIcon}>
             <EthereumLogo />
           </View>
           <Text style={[styles.buttonText, styles.siweButtonText]}>
             Sign in with Ethereum
           </Text>
         </TouchableOpacity>
         <View style={styles.siweOr}>
           <View style={styles.siweOrLeftHR} />
           <Text style={styles.siweOrText}>or</Text>
           <View style={styles.siweOrRightHR} />
         </View>
       </>
     );
 
     let panel = null;
     let buttons = null;
     if (this.state.mode === 'log-in') {
       panel = (
         <LogInPanel
           setActiveAlert={this.setActiveAlert}
           opacityValue={this.panelOpacityValue}
           logInState={this.state.logInState}
         />
       );
     } else if (this.state.mode === 'register') {
       panel = (
         <RegisterPanel
           setActiveAlert={this.setActiveAlert}
           opacityValue={this.panelOpacityValue}
           registerState={this.state.registerState}
         />
       );
     } else if (this.state.mode === 'prompt') {
       const opacityStyle = { opacity: this.buttonOpacity };
 
       const registerButtons = [];
       registerButtons.push(
         <TouchableOpacity
           onPress={this.onPressRegister}
           style={[styles.button, styles.classicAuthButton]}
           activeOpacity={0.6}
           key="old"
         >
           <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
             Register
           </Text>
         </TouchableOpacity>,
       );
       if (__DEV__) {
         registerButtons.push(
           <TouchableOpacity
             onPress={this.onPressNewRegister}
             style={[styles.button, styles.classicAuthButton]}
             activeOpacity={0.6}
             key="new"
           >
             <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
               Register (new)
             </Text>
           </TouchableOpacity>,
         );
       }
 
       const signInButtons = [];
       signInButtons.push(
         <TouchableOpacity
           onPress={this.onPressLogIn}
           style={[styles.button, styles.classicAuthButton]}
           activeOpacity={0.6}
           key="login-form"
         >
           <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
             Sign in
           </Text>
         </TouchableOpacity>,
       );
       if (__DEV__) {
         signInButtons.push(
           <TouchableOpacity
             onPress={this.onPressQRCodeSignIn}
             style={[styles.button, styles.classicAuthButton]}
             activeOpacity={0.6}
             key="qr-code-login"
           >
             <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
               Sign in (QR)
             </Text>
           </TouchableOpacity>,
         );
       }
 
       buttons = (
         <Animated.View style={[styles.buttonContainer, opacityStyle]}>
           <LoggedOutStaffInfo />
           {siweButton}
           <View style={styles.signInButtons}>{signInButtons}</View>
           <View style={styles.registerButtons}>{registerButtons}</View>
         </Animated.View>
       );
     } else if (this.state.mode === 'loading') {
       panel = (
         <ActivityIndicator
           color="white"
           size="large"
           style={styles.loadingIndicator}
         />
       );
     }
 
     const windowWidth = this.props.dimensions.width;
     const buttonStyle = {
       opacity: this.panelOpacityValue,
       left: windowWidth < 360 ? 28 : 40,
     };
     const padding = { paddingTop: this.panelPaddingTopValue };
 
     const animatedContent = (
       <Animated.View style={[styles.animationContainer, padding]}>
         <View>
           <Text style={styles.header}>Comm</Text>
           <Animated.View style={[styles.backButton, buttonStyle]}>
             <TouchableOpacity activeOpacity={0.6} onPress={this.hardwareBack}>
               <Icon name="arrow-circle-o-left" size={36} color="#FFFFFFAA" />
             </TouchableOpacity>
           </Animated.View>
         </View>
         {panel}
       </Animated.View>
     );
 
     let siwePanel;
     if (this.state.mode === 'siwe') {
       siwePanel = (
         <FullscreenSIWEPanel
           goBackToPrompt={this.goBackToPrompt}
           closing={this.state.nextMode === 'prompt'}
         />
       );
     }
 
     const backgroundSource = { uri: splashBackgroundURI };
     return (
       <React.Fragment>
         <ConnectedStatusBar barStyle="light-content" />
         <Image
           source={backgroundSource}
           style={[styles.modalBackground, this.props.splashStyle]}
         />
         <SafeAreaView style={styles.container} edges={safeAreaEdges}>
           <KeyboardAvoidingView behavior="padding" style={styles.container}>
             {animatedContent}
             {buttons}
           </KeyboardAvoidingView>
         </SafeAreaView>
         {siwePanel}
       </React.Fragment>
     );
   }
 
   onPressSIWE = () => {
     this.setMode('siwe');
   };
 
   onPressLogIn = () => {
     if (Platform.OS !== 'ios') {
       // For some strange reason, iOS's password management logic doesn't
       // realize that the username and password fields in LogInPanel are related
       // if the username field gets focused on mount. To avoid this issue we
       // need the username and password fields to both appear on-screen before
       // we focus the username field. However, when we set keyboardHeightValue
       // to -1 here, we are telling our Reanimated logic to wait until the
       // keyboard appears before showing LogInPanel. Since we need LogInPanel
       // to appear before the username field is focused, we need to avoid this
       // behavior on iOS.
       this.keyboardHeightValue.setValue(-1);
     }
     this.setMode('log-in');
   };
 
   onPressQRCodeSignIn = () => {
     this.props.navigation.navigate(QRCodeSignInNavigatorRouteName);
   };
 
   onPressRegister = () => {
     this.keyboardHeightValue.setValue(-1);
     this.setMode('register');
   };
 
   onPressNewRegister = () => {
     this.props.navigation.navigate(RegistrationRouteName);
   };
 }
 
 const isForegroundSelector = createIsForegroundSelector(
   LoggedOutModalRouteName,
 );
 
 const ConnectedLoggedOutModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedLoggedOutModal(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const isForeground = isForegroundSelector(navContext);
 
     const rehydrateConcluded = useSelector(
       state => !!(state._persist && state._persist.rehydrated && navContext),
     );
     const persistedStateLoaded = usePersistedStateLoaded();
     const cookie = useSelector(cookieSelector(ashoatKeyserverID));
     const urlPrefix = useSelector(urlPrefixSelector(ashoatKeyserverID));
     invariant(urlPrefix, "missing urlPrefix for ashoat's keyserver");
     const loggedIn = useSelector(isLoggedIn);
     const dimensions = useSelector(derivedDimensionsInfoSelector);
     const splashStyle = useSelector(splashStyleSelector);
     const styles = useStyles(unboundStyles);
 
     const dispatch = useDispatch();
     const getInitialNotificationsEncryptedMessage =
       useInitialNotificationsEncryptedMessage(
         nativeNotificationsSessionCreator,
       );
     return (
       <LoggedOutModal
         {...props}
         isForeground={isForeground}
         persistedStateLoaded={persistedStateLoaded}
         rehydrateConcluded={rehydrateConcluded}
         cookie={cookie}
         urlPrefix={urlPrefix}
         loggedIn={loggedIn}
         dimensions={dimensions}
         splashStyle={splashStyle}
         styles={styles}
         dispatch={dispatch}
         getInitialNotificationsEncryptedMessage={
           getInitialNotificationsEncryptedMessage
         }
       />
     );
   });
 
 export default ConnectedLoggedOutModal;
diff --git a/native/calendar/calendar.react.js b/native/calendar/calendar.react.js
index 3c3d8cb40..a3edd0b9c 100644
--- a/native/calendar/calendar.react.js
+++ b/native/calendar/calendar.react.js
@@ -1,1115 +1,1115 @@
 // @flow
 
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter.js';
 import _find from 'lodash/fp/find.js';
 import _findIndex from 'lodash/fp/findIndex.js';
 import _map from 'lodash/fp/map.js';
 import _pickBy from 'lodash/fp/pickBy.js';
 import _size from 'lodash/fp/size.js';
 import _sum from 'lodash/fp/sum.js';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 import {
   View,
   Text,
   FlatList,
   AppState as NativeAppState,
   Platform,
   LayoutAnimation,
   TouchableWithoutFeedback,
 } from 'react-native';
 
 import {
   updateCalendarQueryActionTypes,
   useUpdateCalendarQuery,
 } from 'lib/actions/entry-actions.js';
 import type { UpdateCalendarQueryInput } from 'lib/actions/entry-actions.js';
 import { connectionSelector } from 'lib/selectors/keyserver-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { entryKey } from 'lib/shared/entry-utils.js';
 import type {
   EntryInfo,
   CalendarQuery,
   CalendarQueryUpdateResult,
 } from 'lib/types/entry-types.js';
 import type { CalendarFilter } from 'lib/types/filter-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { ConnectionStatus } from 'lib/types/socket-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import {
   useDispatchActionPromise,
   type DispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import {
   dateString,
   prettyDate,
   dateFromString,
 } from 'lib/utils/date-utils.js';
 import sleep from 'lib/utils/sleep.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import CalendarInputBar from './calendar-input-bar.react.js';
 import {
   Entry,
   InternalEntry,
   dummyNodeForEntryHeightMeasurement,
 } from './entry.react.js';
 import SectionFooter from './section-footer.react.js';
 import ContentLoading from '../components/content-loading.react.js';
 import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
 import ListLoadingIndicator from '../components/list-loading-indicator.react.js';
 import NodeHeightMeasurer from '../components/node-height-measurer.react.js';
 import {
   addKeyboardShowListener,
   addKeyboardDismissListener,
   removeKeyboardListener,
 } from '../keyboard/keyboard.js';
 import DisconnectedBar from '../navigation/disconnected-bar.react.js';
 import {
   createIsForegroundSelector,
   createActiveTabSelector,
 } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import {
   CalendarRouteName,
   ThreadPickerModalRouteName,
 } from '../navigation/route-names.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import type { TabNavigationProp } from '../navigation/tab-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { calendarListData } from '../selectors/calendar-selectors.js';
 import type {
   CalendarItem,
   SectionHeaderItem,
   SectionFooterItem,
   LoaderItem,
 } from '../selectors/calendar-selectors.js';
 import {
   type DerivedDimensionsInfo,
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors.js';
 import {
   useColors,
   useStyles,
   useIndicatorStyle,
   type Colors,
   type IndicatorStyle,
 } from '../themes/colors.js';
 import type {
   EventSubscription,
   ScrollEvent,
   ViewableItemsChange,
   KeyboardEvent,
 } from '../types/react-native.js';
 
 export type EntryInfoWithHeight = {
   ...EntryInfo,
   +textHeight: number,
 };
 type CalendarItemWithHeight =
   | LoaderItem
   | SectionHeaderItem
   | SectionFooterItem
   | {
       itemType: 'entryInfo',
       entryInfo: EntryInfoWithHeight,
       threadInfo: ThreadInfo,
     };
 type ExtraData = {
   +activeEntries: { +[key: string]: boolean },
   +visibleEntries: { +[key: string]: boolean },
 };
 
 const unboundStyles = {
   container: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   flatList: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   keyboardAvoidingViewContainer: {
     position: 'absolute',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
   },
   keyboardAvoidingView: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
   },
   sectionHeader: {
     backgroundColor: 'panelSecondaryForeground',
     borderBottomWidth: 2,
     borderColor: 'listBackground',
     height: 31,
   },
   sectionHeaderText: {
     color: 'listSeparatorLabel',
     fontWeight: 'bold',
     padding: 5,
   },
   weekendSectionHeader: {},
 };
 
 type BaseProps = {
   +navigation: TabNavigationProp<'Calendar'>,
   +route: NavigationRoute<'Calendar'>,
 };
 type Props = {
   ...BaseProps,
   // Nav state
   +calendarActive: boolean,
   // Redux state
   +listData: ?$ReadOnlyArray<CalendarItem>,
   +startDate: string,
   +endDate: string,
   +calendarFilters: $ReadOnlyArray<CalendarFilter>,
   +dimensions: DerivedDimensionsInfo,
   +loadingStatus: LoadingStatus,
   +connectionStatus: ConnectionStatus,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +indicatorStyle: IndicatorStyle,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +updateCalendarQuery: (
     input: UpdateCalendarQueryInput,
   ) => Promise<CalendarQueryUpdateResult>,
 };
 type State = {
   +listDataWithHeights: ?$ReadOnlyArray<CalendarItemWithHeight>,
   +readyToShowList: boolean,
   +extraData: ExtraData,
   +currentlyEditing: $ReadOnlyArray<string>,
 };
 class Calendar extends React.PureComponent<Props, State> {
   flatList: ?FlatList<CalendarItemWithHeight> = null;
   currentState: ?string = NativeAppState.currentState;
   appStateListener: ?EventSubscription;
   lastForegrounded = 0;
   lastCalendarReset = 0;
   currentScrollPosition: ?number = null;
   // We don't always want an extraData update to trigger a state update, so we
   // cache the most recent value as a member here
   latestExtraData: ExtraData;
   // For some reason, we have to delay the scrollToToday call after the first
   // scroll upwards
   firstScrollComplete = false;
   // When an entry becomes active, we make a note of its key so that once the
   // keyboard event happens, we know where to move the scrollPos to
   lastEntryKeyActive: ?string = null;
   keyboardShowListener: ?EventSubscription;
   keyboardDismissListener: ?EventSubscription;
   keyboardShownHeight: ?number = null;
   // If the query fails, we try it again
   topLoadingFromScroll: ?CalendarQuery = null;
   bottomLoadingFromScroll: ?CalendarQuery = null;
   // We wait until the loaders leave view before letting them be triggered again
   topLoaderWaitingToLeaveView = true;
   bottomLoaderWaitingToLeaveView = true;
   // We keep refs to the entries so CalendarInputBar can save them
   entryRefs: Map<string, ?InternalEntry> = new Map();
 
   constructor(props: Props) {
     super(props);
     this.latestExtraData = {
       activeEntries: {},
       visibleEntries: {},
     };
     this.state = {
       listDataWithHeights: null,
       readyToShowList: false,
       extraData: this.latestExtraData,
       currentlyEditing: [],
     };
   }
 
   componentDidMount() {
     this.appStateListener = NativeAppState.addEventListener(
       'change',
       this.handleAppStateChange,
     );
     this.keyboardShowListener = addKeyboardShowListener(this.keyboardShow);
     this.keyboardDismissListener = addKeyboardDismissListener(
       this.keyboardDismiss,
     );
     this.props.navigation.addListener('tabPress', this.onTabPress);
   }
 
   componentWillUnmount() {
     if (this.appStateListener) {
       this.appStateListener.remove();
       this.appStateListener = null;
     }
     if (this.keyboardShowListener) {
       removeKeyboardListener(this.keyboardShowListener);
       this.keyboardShowListener = null;
     }
     if (this.keyboardDismissListener) {
       removeKeyboardListener(this.keyboardDismissListener);
       this.keyboardDismissListener = null;
     }
     this.props.navigation.removeListener('tabPress', this.onTabPress);
   }
 
   handleAppStateChange = (nextAppState: ?string) => {
     const lastState = this.currentState;
     this.currentState = nextAppState;
     if (
       !lastState ||
       !lastState.match(/inactive|background/) ||
       this.currentState !== 'active'
     ) {
       // We're only handling foregrounding here
       return;
     }
     if (Date.now() - this.lastCalendarReset < 500) {
       // If the calendar got reset right before this callback triggered, that
       // indicates we should reset the scroll position
       this.lastCalendarReset = 0;
       this.scrollToToday(false);
     } else {
       // Otherwise, it's possible that the calendar is about to get reset. We
       // record a timestamp here so we can scrollToToday there.
       this.lastForegrounded = Date.now();
     }
   };
 
   onTabPress = () => {
     if (this.props.navigation.isFocused()) {
       this.scrollToToday();
     }
   };
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (!this.props.listData && this.props.listData !== prevProps.listData) {
       this.latestExtraData = {
         activeEntries: {},
         visibleEntries: {},
       };
       this.setState({
         listDataWithHeights: null,
         readyToShowList: false,
         extraData: this.latestExtraData,
       });
       this.firstScrollComplete = false;
       this.topLoaderWaitingToLeaveView = true;
       this.bottomLoaderWaitingToLeaveView = true;
     }
 
     const { loadingStatus, connectionStatus } = this.props;
     const {
       loadingStatus: prevLoadingStatus,
       connectionStatus: prevConnectionStatus,
     } = prevProps;
     if (
       (loadingStatus === 'error' && prevLoadingStatus === 'loading') ||
       (connectionStatus === 'connected' && prevConnectionStatus !== 'connected')
     ) {
       this.loadMoreAbove();
       this.loadMoreBelow();
     }
 
     const lastLDWH = prevState.listDataWithHeights;
     const newLDWH = this.state.listDataWithHeights;
     if (!newLDWH) {
       return;
     } else if (!lastLDWH) {
       if (!this.props.calendarActive) {
         // FlatList has an initialScrollIndex prop, which is usually close to
         // centering but can be off when there is a particularly large Entry in
         // the list. scrollToToday lets us actually center, but gets overriden
         // by initialScrollIndex if we call it right after the FlatList mounts
         sleep(50).then(() => this.scrollToToday());
       }
       return;
     }
 
     if (newLDWH.length < lastLDWH.length) {
       this.topLoaderWaitingToLeaveView = true;
       this.bottomLoaderWaitingToLeaveView = true;
       if (this.flatList) {
         if (!this.props.calendarActive) {
           // If the currentCalendarQuery gets reset we scroll to the center
           this.scrollToToday();
         } else if (Date.now() - this.lastForegrounded < 500) {
           // If the app got foregrounded right before the calendar got reset,
           // that indicates we should reset the scroll position
           this.lastForegrounded = 0;
           this.scrollToToday(false);
         } else {
           // Otherwise, it's possible that we got triggered before the
           // foreground callback. Let's record a timestamp here so we can call
           // scrollToToday there
           this.lastCalendarReset = Date.now();
         }
       }
     }
 
     const { lastStartDate, newStartDate, lastEndDate, newEndDate } =
       Calendar.datesFromListData(lastLDWH, newLDWH);
 
     if (newStartDate > lastStartDate || newEndDate < lastEndDate) {
       // If there are fewer items in our new data, which happens when the
       // current calendar query gets reset due to inactivity, let's reset the
       // scroll position to the center (today)
       if (!this.props.calendarActive) {
         sleep(50).then(() => this.scrollToToday());
       }
       this.firstScrollComplete = false;
     } else if (newStartDate < lastStartDate) {
       this.updateScrollPositionAfterPrepend(lastLDWH, newLDWH);
     } else if (newEndDate > lastEndDate) {
       this.firstScrollComplete = true;
     } else if (newLDWH.length > lastLDWH.length) {
       LayoutAnimation.easeInEaseOut();
     }
 
     if (newStartDate < lastStartDate) {
       this.topLoadingFromScroll = null;
     }
     if (newEndDate > lastEndDate) {
       this.bottomLoadingFromScroll = null;
     }
 
     const { keyboardShownHeight, lastEntryKeyActive } = this;
     if (keyboardShownHeight && lastEntryKeyActive) {
       this.scrollToKey(lastEntryKeyActive, keyboardShownHeight);
       this.lastEntryKeyActive = null;
     }
   }
 
   static datesFromListData(
     lastLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
     newLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
   ): {
     +lastStartDate: Date,
     +newStartDate: Date,
     +lastEndDate: Date,
     +newEndDate: Date,
   } {
     const lastSecondItem = lastLDWH[1];
     const newSecondItem = newLDWH[1];
     invariant(
       newSecondItem.itemType === 'header' &&
         lastSecondItem.itemType === 'header',
       'second item in listData should be a header',
     );
     const lastStartDate = dateFromString(lastSecondItem.dateString);
     const newStartDate = dateFromString(newSecondItem.dateString);
 
     const lastPenultimateItem = lastLDWH[lastLDWH.length - 2];
     const newPenultimateItem = newLDWH[newLDWH.length - 2];
     invariant(
       newPenultimateItem.itemType === 'footer' &&
         lastPenultimateItem.itemType === 'footer',
       'penultimate item in listData should be a footer',
     );
     const lastEndDate = dateFromString(lastPenultimateItem.dateString);
     const newEndDate = dateFromString(newPenultimateItem.dateString);
 
     return { lastStartDate, newStartDate, lastEndDate, newEndDate };
   }
 
   /**
    * When prepending list items, FlatList isn't smart about preserving scroll
    * position. If we're at the start of the list before prepending, FlatList
    * will just keep us at the front after prepending. But we want to preserve
    * the previous on-screen items, so we have to do a calculation to get the new
    * scroll position. (And deal with the inherent glitchiness of trying to time
    * that change with the items getting prepended... *sigh*.)
    */
   updateScrollPositionAfterPrepend(
     lastLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
     newLDWH: $ReadOnlyArray<CalendarItemWithHeight>,
   ) {
     const existingKeys = new Set(_map(Calendar.keyExtractor)(lastLDWH));
     const newItems = _filter(
       (item: CalendarItemWithHeight) =>
         !existingKeys.has(Calendar.keyExtractor(item)),
     )(newLDWH);
     const heightOfNewItems = Calendar.heightOfItems(newItems);
     const flatList = this.flatList;
     invariant(flatList, 'flatList should be set');
     const scrollAction = () => {
       invariant(
         this.currentScrollPosition !== undefined &&
           this.currentScrollPosition !== null,
         'currentScrollPosition should be set',
       );
       const currentScrollPosition = Math.max(this.currentScrollPosition, 0);
       const offset = currentScrollPosition + heightOfNewItems;
       flatList.scrollToOffset({
         offset,
         animated: false,
       });
     };
     scrollAction();
     if (!this.firstScrollComplete) {
       setTimeout(scrollAction, 0);
       this.firstScrollComplete = true;
     }
   }
 
   scrollToToday(animated: ?boolean = undefined) {
     if (animated === undefined) {
       animated = this.props.calendarActive;
     }
     const ldwh = this.state.listDataWithHeights;
     if (!ldwh) {
       return;
     }
     const todayIndex = _findIndex(['dateString', dateString(new Date())])(ldwh);
     invariant(this.flatList, "scrollToToday called, but flatList isn't set");
     this.flatList.scrollToIndex({
       index: todayIndex,
       animated,
       viewPosition: 0.5,
     });
   }
 
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   renderItem = (row: { +item: CalendarItemWithHeight, ... }): React.Node => {
     const item = row.item;
     if (item.itemType === 'loader') {
       return <ListLoadingIndicator />;
     } else if (item.itemType === 'header') {
       return this.renderSectionHeader(item);
     } else if (item.itemType === 'entryInfo') {
       const key = entryKey(item.entryInfo);
       return (
         <Entry
           navigation={this.props.navigation}
           entryInfo={item.entryInfo}
           threadInfo={item.threadInfo}
           active={!!this.state.extraData.activeEntries[key]}
           visible={!!this.state.extraData.visibleEntries[key]}
           makeActive={this.makeActive}
           onEnterEditMode={this.onEnterEntryEditMode}
           onConcludeEditMode={this.onConcludeEntryEditMode}
           onPressWhitespace={this.makeAllEntriesInactive}
           entryRef={this.entryRef}
         />
       );
     } else if (item.itemType === 'footer') {
       return this.renderSectionFooter(item);
     }
     invariant(false, 'renderItem conditions should be exhaustive');
   };
 
   renderSectionHeader = (item: SectionHeaderItem): React.Node => {
     let date = prettyDate(item.dateString);
     if (dateString(new Date()) === item.dateString) {
       date += ' (today)';
     }
     const dateObj = dateFromString(item.dateString).getDay();
     const weekendStyle =
       dateObj === 0 || dateObj === 6
         ? this.props.styles.weekendSectionHeader
         : null;
     return (
       <TouchableWithoutFeedback onPress={this.makeAllEntriesInactive}>
         <View style={[this.props.styles.sectionHeader, weekendStyle]}>
           <Text style={this.props.styles.sectionHeaderText}>{date}</Text>
         </View>
       </TouchableWithoutFeedback>
     );
   };
 
   renderSectionFooter = (item: SectionFooterItem): React.Node => {
     return (
       <SectionFooter
         dateString={item.dateString}
         onAdd={this.onAdd}
         onPressWhitespace={this.makeAllEntriesInactive}
       />
     );
   };
 
   onAdd = (dayString: string) => {
     this.props.navigation.navigate(ThreadPickerModalRouteName, {
       presentedFrom: this.props.route.key,
       dateString: dayString,
     });
   };
 
   static keyExtractor = (
     item: CalendarItemWithHeight | CalendarItem,
     // ESLint doesn't recognize that invariant always throws
     // eslint-disable-next-line consistent-return
   ): string => {
     if (item.itemType === 'loader') {
       return item.key;
     } else if (item.itemType === 'header') {
       return item.dateString + '/header';
     } else if (item.itemType === 'entryInfo') {
       return entryKey(item.entryInfo);
     } else if (item.itemType === 'footer') {
       return item.dateString + '/footer';
     }
     invariant(false, 'keyExtractor conditions should be exhaustive');
   };
 
   static getItemLayout = (
     data: ?$ReadOnlyArray<CalendarItemWithHeight>,
     index: number,
   ): { length: number, offset: number, index: number } => {
     if (!data) {
       return { length: 0, offset: 0, index };
     }
     const offset = Calendar.heightOfItems(data.filter((_, i) => i < index));
     const item = data[index];
     const length = item ? Calendar.itemHeight(item) : 0;
     return { length, offset, index };
   };
 
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   static itemHeight = (item: CalendarItemWithHeight): number => {
     if (item.itemType === 'loader') {
       return 56;
     } else if (item.itemType === 'header') {
       return 31;
     } else if (item.itemType === 'entryInfo') {
       const verticalPadding = 10;
       return verticalPadding + item.entryInfo.textHeight;
     } else if (item.itemType === 'footer') {
       return 40;
     }
     invariant(false, 'itemHeight conditions should be exhaustive');
   };
 
   static heightOfItems = (
     data: $ReadOnlyArray<CalendarItemWithHeight>,
   ): number => {
     return _sum(data.map(Calendar.itemHeight));
   };
 
   render(): React.Node {
     const { listDataWithHeights } = this.state;
     let flatList = null;
     if (listDataWithHeights) {
       const flatListStyle = { opacity: this.state.readyToShowList ? 1 : 0 };
       const initialScrollIndex = this.initialScrollIndex(listDataWithHeights);
       flatList = (
         <FlatList
           data={listDataWithHeights}
           renderItem={this.renderItem}
           keyExtractor={Calendar.keyExtractor}
           getItemLayout={Calendar.getItemLayout}
           onViewableItemsChanged={this.onViewableItemsChanged}
           onScroll={this.onScroll}
           initialScrollIndex={initialScrollIndex}
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="on-drag"
           onMomentumScrollEnd={this.onMomentumScrollEnd}
           onScrollEndDrag={this.onScrollEndDrag}
           scrollsToTop={false}
           extraData={this.state.extraData}
           style={[this.props.styles.flatList, flatListStyle]}
           indicatorStyle={this.props.indicatorStyle}
           ref={this.flatListRef}
         />
       );
     }
     let loadingIndicator = null;
     if (!listDataWithHeights || !this.state.readyToShowList) {
       loadingIndicator = (
         <ContentLoading fillType="absolute" colors={this.props.colors} />
       );
     }
     const disableInputBar = this.state.currentlyEditing.length === 0;
     return (
       <>
         <NodeHeightMeasurer
           listData={this.props.listData}
           itemToID={Calendar.keyExtractor}
           itemToMeasureKey={this.heightMeasurerKey}
           itemToDummy={this.heightMeasurerDummy}
           mergeItemWithHeight={this.heightMeasurerMergeItem}
           allHeightsMeasured={this.allHeightsMeasured}
         />
         <View style={this.props.styles.container}>
           <DisconnectedBar visible={this.props.calendarActive} />
           {loadingIndicator}
           {flatList}
         </View>
         <KeyboardAvoidingView
           behavior="position"
           style={this.props.styles.keyboardAvoidingViewContainer}
           contentContainerStyle={this.props.styles.keyboardAvoidingView}
           pointerEvents="box-none"
         >
           <CalendarInputBar
             onSave={this.onSaveEntry}
             disabled={disableInputBar}
           />
         </KeyboardAvoidingView>
       </>
     );
   }
 
   flatListHeight(): number {
     const { safeAreaHeight, tabBarHeight } = this.props.dimensions;
     return safeAreaHeight - tabBarHeight;
   }
 
   initialScrollIndex(data: $ReadOnlyArray<CalendarItemWithHeight>): number {
     const todayIndex = _findIndex(['dateString', dateString(new Date())])(data);
     const heightOfTodayHeader = Calendar.itemHeight(data[todayIndex]);
 
     let returnIndex = todayIndex;
     let heightLeft = (this.flatListHeight() - heightOfTodayHeader) / 2;
     while (heightLeft > 0) {
       heightLeft -= Calendar.itemHeight(data[--returnIndex]);
     }
     return returnIndex;
   }
 
   flatListRef = (flatList: ?FlatList<CalendarItemWithHeight>) => {
     this.flatList = flatList;
   };
 
   entryRef = (inEntryKey: string, entry: ?InternalEntry) => {
     this.entryRefs.set(inEntryKey, entry);
   };
 
   makeAllEntriesInactive = () => {
     if (_size(this.state.extraData.activeEntries) === 0) {
       if (_size(this.latestExtraData.activeEntries) !== 0) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: this.state.extraData.activeEntries,
         };
       }
       return;
     }
     this.latestExtraData = {
       visibleEntries: this.latestExtraData.visibleEntries,
       activeEntries: {},
     };
     this.setState({ extraData: this.latestExtraData });
   };
 
   makeActive = (key: string, active: boolean) => {
     if (!active) {
       const activeKeys = Object.keys(this.latestExtraData.activeEntries);
       if (activeKeys.length === 0) {
         if (Object.keys(this.state.extraData.activeEntries).length !== 0) {
           this.setState({ extraData: this.latestExtraData });
         }
         return;
       }
       const activeKey = activeKeys[0];
       if (activeKey === key) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: {},
         };
         this.setState({ extraData: this.latestExtraData });
       }
       return;
     }
 
     if (
       _size(this.state.extraData.activeEntries) === 1 &&
       this.state.extraData.activeEntries[key]
     ) {
       if (
         _size(this.latestExtraData.activeEntries) !== 1 ||
         !this.latestExtraData.activeEntries[key]
       ) {
         this.latestExtraData = {
           visibleEntries: this.latestExtraData.visibleEntries,
           activeEntries: this.state.extraData.activeEntries,
         };
       }
       return;
     }
     this.latestExtraData = {
       visibleEntries: this.latestExtraData.visibleEntries,
       activeEntries: { [key]: true },
     };
     this.setState({ extraData: this.latestExtraData });
   };
 
   onEnterEntryEditMode = (entryInfo: EntryInfoWithHeight) => {
     const key = entryKey(entryInfo);
     const keyboardShownHeight = this.keyboardShownHeight;
     if (keyboardShownHeight && this.state.listDataWithHeights) {
       this.scrollToKey(key, keyboardShownHeight);
     } else {
       this.lastEntryKeyActive = key;
     }
     const newCurrentlyEditing = [
       ...new Set([...this.state.currentlyEditing, key]),
     ];
     if (newCurrentlyEditing.length > this.state.currentlyEditing.length) {
       this.setState({ currentlyEditing: newCurrentlyEditing });
     }
   };
 
   onConcludeEntryEditMode = (entryInfo: EntryInfoWithHeight) => {
     const key = entryKey(entryInfo);
     const newCurrentlyEditing = this.state.currentlyEditing.filter(
       k => k !== key,
     );
     if (newCurrentlyEditing.length < this.state.currentlyEditing.length) {
       this.setState({ currentlyEditing: newCurrentlyEditing });
     }
   };
 
   keyboardShow = (event: KeyboardEvent) => {
     // flatListHeight() factors in the size of the tab bar,
     // but it is hidden by the keyboard since it is at the bottom
     const { bottomInset, tabBarHeight } = this.props.dimensions;
     const inputBarHeight = Platform.OS === 'android' ? 37.7 : 35.5;
     const keyboardHeight = Platform.select({
       // Android doesn't include the bottomInset in this height measurement
       android: event.endCoordinates.height,
       default: Math.max(event.endCoordinates.height - bottomInset, 0),
     });
     const keyboardShownHeight =
       inputBarHeight + Math.max(keyboardHeight - tabBarHeight, 0);
     this.keyboardShownHeight = keyboardShownHeight;
 
     const lastEntryKeyActive = this.lastEntryKeyActive;
     if (lastEntryKeyActive && this.state.listDataWithHeights) {
       this.scrollToKey(lastEntryKeyActive, keyboardShownHeight);
       this.lastEntryKeyActive = null;
     }
   };
 
   keyboardDismiss = () => {
     this.keyboardShownHeight = null;
   };
 
   scrollToKey(lastEntryKeyActive: string, keyboardHeight: number) {
     const data = this.state.listDataWithHeights;
     invariant(data, 'should be set');
     const index = data.findIndex(
       (item: CalendarItemWithHeight) =>
         Calendar.keyExtractor(item) === lastEntryKeyActive,
     );
     if (index === -1) {
       return;
     }
     const itemStart = Calendar.heightOfItems(data.filter((_, i) => i < index));
     const itemHeight = Calendar.itemHeight(data[index]);
     const entryAdditionalActiveHeight = Platform.OS === 'android' ? 21 : 20;
     const itemEnd = itemStart + itemHeight + entryAdditionalActiveHeight;
     const visibleHeight = this.flatListHeight() - keyboardHeight;
     if (
       this.currentScrollPosition !== undefined &&
       this.currentScrollPosition !== null &&
       itemStart > this.currentScrollPosition &&
       itemEnd < this.currentScrollPosition + visibleHeight
     ) {
       return;
     }
     const offset = itemStart - (visibleHeight - itemHeight) / 2;
     invariant(this.flatList, 'flatList should be set');
     this.flatList.scrollToOffset({ offset, animated: true });
   }
 
   heightMeasurerKey = (item: CalendarItem): ?string => {
     if (item.itemType !== 'entryInfo') {
       return null;
     }
     return item.entryInfo.text;
   };
 
   heightMeasurerDummy = (item: CalendarItem): React.MixedElement => {
     invariant(
       item.itemType === 'entryInfo',
       'NodeHeightMeasurer asked for dummy for non-entryInfo item',
     );
     return dummyNodeForEntryHeightMeasurement(item.entryInfo.text);
   };
 
   heightMeasurerMergeItem = (
     item: CalendarItem,
     height: ?number,
   ): CalendarItemWithHeight => {
     if (item.itemType !== 'entryInfo') {
       return item;
     }
     invariant(height !== null && height !== undefined, 'height should be set');
     const { entryInfo } = item;
     return {
       itemType: 'entryInfo',
       entryInfo: Calendar.entryInfoWithHeight(entryInfo, height),
       threadInfo: item.threadInfo,
     };
   };
 
   static entryInfoWithHeight(
     entryInfo: EntryInfo,
     textHeight: number,
   ): EntryInfoWithHeight {
     // Blame Flow for not accepting object spread on exact types
     if (entryInfo.id && entryInfo.localID) {
       return {
         id: entryInfo.id,
         localID: entryInfo.localID,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     } else if (entryInfo.id) {
       return {
         id: entryInfo.id,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     } else {
       return {
         localID: entryInfo.localID,
         threadID: entryInfo.threadID,
         text: entryInfo.text,
         year: entryInfo.year,
         month: entryInfo.month,
         day: entryInfo.day,
         creationTime: entryInfo.creationTime,
         creator: entryInfo.creator,
         deleted: entryInfo.deleted,
         textHeight: Math.ceil(textHeight),
       };
     }
   }
 
   allHeightsMeasured = (
     listDataWithHeights: $ReadOnlyArray<CalendarItemWithHeight>,
   ) => {
     this.setState({ listDataWithHeights });
   };
 
   onViewableItemsChanged = (info: ViewableItemsChange) => {
     const ldwh = this.state.listDataWithHeights;
     if (!ldwh) {
       // This indicates the listData was cleared (set to null) right before this
       // callback was called. Since this leads to the FlatList getting cleared,
       // we'll just ignore this callback.
       return;
     }
 
     const visibleEntries: { [string]: boolean } = {};
     for (const token of info.viewableItems) {
       if (token.item.itemType === 'entryInfo') {
         visibleEntries[entryKey(token.item.entryInfo)] = true;
       }
     }
     this.latestExtraData = {
       activeEntries: _pickBy((_, key: string) => {
         if (visibleEntries[key]) {
           return true;
         }
         // We don't automatically set scrolled-away entries to be inactive
         // because entries can be out-of-view at creation time if they need to
         // be scrolled into view (see onEnterEntryEditMode). If Entry could
         // distinguish the reasons its active prop gets set to false, it could
         // differentiate the out-of-view case from the something-pressed case,
         // and then we could set scrolled-away entries to be inactive without
         // worrying about this edge case. Until then...
         const foundItem = _find(
           item => item.entryInfo && entryKey(item.entryInfo) === key,
         )(ldwh);
         return !!foundItem;
       })(this.latestExtraData.activeEntries),
       visibleEntries,
     };
 
     const topLoader = _find({ key: 'TopLoader' })(info.viewableItems);
     if (this.topLoaderWaitingToLeaveView && !topLoader) {
       this.topLoaderWaitingToLeaveView = false;
       this.topLoadingFromScroll = null;
     }
 
     const bottomLoader = _find({ key: 'BottomLoader' })(info.viewableItems);
     if (this.bottomLoaderWaitingToLeaveView && !bottomLoader) {
       this.bottomLoaderWaitingToLeaveView = false;
       this.bottomLoadingFromScroll = null;
     }
 
     if (
       !this.state.readyToShowList &&
       !this.topLoaderWaitingToLeaveView &&
       !this.bottomLoaderWaitingToLeaveView &&
       info.viewableItems.length > 0
     ) {
       this.setState({
         readyToShowList: true,
         extraData: this.latestExtraData,
       });
     }
 
     if (
       topLoader &&
       !this.topLoaderWaitingToLeaveView &&
       !this.topLoadingFromScroll
     ) {
       this.topLoaderWaitingToLeaveView = true;
       const start = dateFromString(this.props.startDate);
       start.setDate(start.getDate() - 31);
       const startDate = dateString(start);
       const endDate = this.props.endDate;
       this.topLoadingFromScroll = {
         startDate,
         endDate,
         filters: this.props.calendarFilters,
       };
       this.loadMoreAbove();
     } else if (
       bottomLoader &&
       !this.bottomLoaderWaitingToLeaveView &&
       !this.bottomLoadingFromScroll
     ) {
       this.bottomLoaderWaitingToLeaveView = true;
       const end = dateFromString(this.props.endDate);
       end.setDate(end.getDate() + 31);
       const endDate = dateString(end);
       const startDate = this.props.startDate;
       this.bottomLoadingFromScroll = {
         startDate,
         endDate,
         filters: this.props.calendarFilters,
       };
       this.loadMoreBelow();
     }
   };
 
   dispatchCalendarQueryUpdate(calendarQuery: CalendarQuery) {
     this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery({ calendarQuery }),
     );
   }
 
   loadMoreAbove: () => void = _throttle(() => {
     if (
       this.topLoadingFromScroll &&
       this.topLoaderWaitingToLeaveView &&
       this.props.connectionStatus === 'connected'
     ) {
       this.dispatchCalendarQueryUpdate(this.topLoadingFromScroll);
     }
   }, 1000);
 
   loadMoreBelow: () => void = _throttle(() => {
     if (
       this.bottomLoadingFromScroll &&
       this.bottomLoaderWaitingToLeaveView &&
       this.props.connectionStatus === 'connected'
     ) {
       this.dispatchCalendarQueryUpdate(this.bottomLoadingFromScroll);
     }
   }, 1000);
 
   onScroll = (event: ScrollEvent) => {
     this.currentScrollPosition = event.nativeEvent.contentOffset.y;
   };
 
   // When the user "flicks" the scroll view, this callback gets triggered after
   // the scrolling ends
   onMomentumScrollEnd = () => {
     this.setState({ extraData: this.latestExtraData });
   };
 
   // This callback gets triggered when the user lets go of scrolling the scroll
   // view, regardless of whether it was a "flick" or a pan
   onScrollEndDrag = () => {
     // We need to figure out if this was a flick or not. If it's a flick, we'll
     // let onMomentumScrollEnd handle it once scroll position stabilizes
     const currentScrollPosition = this.currentScrollPosition;
     setTimeout(() => {
       if (this.currentScrollPosition === currentScrollPosition) {
         this.setState({ extraData: this.latestExtraData });
       }
     }, 50);
   };
 
   onSaveEntry = () => {
     const entryKeys = Object.keys(this.latestExtraData.activeEntries);
     if (entryKeys.length === 0) {
       return;
     }
     const entryRef = this.entryRefs.get(entryKeys[0]);
     if (entryRef) {
       entryRef.completeEdit();
     }
   };
 }
 
 const loadingStatusSelector = createLoadingStatusSelector(
   updateCalendarQueryActionTypes,
 );
 const activeTabSelector = createActiveTabSelector(CalendarRouteName);
 const activeThreadPickerSelector = createIsForegroundSelector(
   ThreadPickerModalRouteName,
 );
 
 const ConnectedCalendar: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCalendar(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const calendarActive =
       activeTabSelector(navContext) || activeThreadPickerSelector(navContext);
 
     const listData = useSelector(calendarListData);
     const startDate = useSelector(state => state.navInfo.startDate);
     const endDate = useSelector(state => state.navInfo.endDate);
     const calendarFilters = useSelector(state => state.calendarFilters);
     const dimensions = useSelector(derivedDimensionsInfoSelector);
     const loadingStatus = useSelector(loadingStatusSelector);
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const connectionStatus = connection.status;
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callUpdateCalendarQuery = useUpdateCalendarQuery();
 
     return (
       <Calendar
         {...props}
         calendarActive={calendarActive}
         listData={listData}
         startDate={startDate}
         endDate={endDate}
         calendarFilters={calendarFilters}
         dimensions={dimensions}
         loadingStatus={loadingStatus}
         connectionStatus={connectionStatus}
         colors={colors}
         styles={styles}
         indicatorStyle={indicatorStyle}
         dispatchActionPromise={dispatchActionPromise}
         updateCalendarQuery={callUpdateCalendarQuery}
       />
     );
   },
 );
 
 export default ConnectedCalendar;
diff --git a/native/calendar/entry.react.js b/native/calendar/entry.react.js
index 4e6af3cf6..33de92dae 100644
--- a/native/calendar/entry.react.js
+++ b/native/calendar/entry.react.js
@@ -1,823 +1,823 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 import _omit from 'lodash/fp/omit.js';
 import * as React from 'react';
 import {
   View,
   Text,
   TextInput as BaseTextInput,
   Platform,
   TouchableWithoutFeedback,
   LayoutAnimation,
   Keyboard,
 } from 'react-native';
 import shallowequal from 'shallowequal';
 import tinycolor from 'tinycolor2';
 
 import {
   createEntryActionTypes,
   useCreateEntry,
   saveEntryActionTypes,
   useSaveEntry,
   deleteEntryActionTypes,
   useDeleteEntry,
   concurrentModificationResetActionType,
 } from 'lib/actions/entry-actions.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import { connectionSelector } from 'lib/selectors/keyserver-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import { entryKey } from 'lib/shared/entry-utils.js';
 import { threadHasPermission } from 'lib/shared/thread-utils.js';
 import type { Shape } from 'lib/types/core.js';
 import type {
   CreateEntryInfo,
   SaveEntryInfo,
   SaveEntryResult,
   SaveEntryPayload,
   CreateEntryPayload,
   DeleteEntryInfo,
   DeleteEntryResult,
   CalendarQuery,
 } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { MinimallyEncodedResolvedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import {
   type ThreadInfo,
   type ResolvedThreadInfo,
 } from 'lib/types/thread-types.js';
 import {
   useDispatchActionPromise,
   type DispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { dateString } from 'lib/utils/date-utils.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 import { ServerError } from 'lib/utils/errors.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import sleep from 'lib/utils/sleep.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import type { EntryInfoWithHeight } from './calendar.react.js';
 import LoadingIndicator from './loading-indicator.react.js';
 import {
   type MessageListParams,
   useNavigateToThread,
 } from '../chat/message-list-types.js';
 import Button from '../components/button.react.js';
 import SingleLine from '../components/single-line.react.js';
 import TextInput from '../components/text-input.react.js';
 import Markdown from '../markdown/markdown.react.js';
 import { inlineMarkdownRules } from '../markdown/rules.react.js';
 import {
   createIsForegroundSelector,
   nonThreadCalendarQuery,
 } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { ThreadPickerModalRouteName } from '../navigation/route-names.js';
 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 {
   const firstHue = tinycolor(firstColor).toHsv().h;
   const secondHue = tinycolor(secondColor).toHsv().h;
   const distance = Math.abs(firstHue - secondHue);
   return distance > 180 ? 360 - distance : distance;
 }
 const omitEntryInfo = _omit(['entryInfo']);
 
 function dummyNodeForEntryHeightMeasurement(
   entryText: string,
 ): React.Element<typeof View> {
   const text = entryText === '' ? ' ' : entryText;
   return (
     <View style={[unboundStyles.entry, unboundStyles.textContainer]}>
       <Text style={unboundStyles.text}>{text}</Text>
     </View>
   );
 }
 
 const unboundStyles = {
   actionLinks: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
     marginTop: -5,
   },
   button: {
     padding: 5,
   },
   buttonContents: {
     flex: 1,
     flexDirection: 'row',
   },
   container: {
     backgroundColor: 'listBackground',
   },
   entry: {
     borderRadius: 8,
     margin: 5,
     overflow: 'hidden',
   },
   leftLinks: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'flex-start',
     paddingHorizontal: 5,
   },
   leftLinksText: {
     fontSize: 12,
     fontWeight: 'bold',
     paddingLeft: 5,
   },
   pencilIcon: {
     lineHeight: 13,
     paddingTop: 1,
   },
   rightLinks: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'flex-end',
     paddingHorizontal: 5,
   },
   rightLinksText: {
     fontSize: 12,
     fontWeight: 'bold',
   },
   text: {
     fontFamily: 'System',
     fontSize: 16,
   },
   textContainer: {
     position: 'absolute',
     top: 0,
     paddingBottom: 6,
     paddingLeft: 10,
     paddingRight: 10,
     paddingTop: 5,
     transform: (Platform.select({
       ios: [{ translateY: -1 / 3 }],
       default: [],
     }): $ReadOnlyArray<{ +translateY: number }>),
   },
   textInput: {
     fontFamily: 'System',
     fontSize: 16,
     left: ((Platform.OS === 'android' ? 9.8 : 10): number),
     margin: 0,
     padding: 0,
     position: 'absolute',
     right: 10,
     top: ((Platform.OS === 'android' ? 4.8 : 0.5): number),
   },
 };
 
 type SharedProps = {
   +navigation: TabNavigationProp<'Calendar'>,
   +entryInfo: EntryInfoWithHeight,
   +visible: boolean,
   +active: boolean,
   +makeActive: (entryKey: string, active: boolean) => void,
   +onEnterEditMode: (entryInfo: EntryInfoWithHeight) => void,
   +onConcludeEditMode: (entryInfo: EntryInfoWithHeight) => void,
   +onPressWhitespace: () => void,
   +entryRef: (entryKey: string, entry: ?InternalEntry) => void,
 };
 type BaseProps = {
   ...SharedProps,
   +threadInfo: ThreadInfo,
 };
 type Props = {
   ...SharedProps,
   +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
   // Redux state
   +calendarQuery: () => CalendarQuery,
   +online: boolean,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // Nav state
   +threadPickerActive: boolean,
   +navigateToThread: (params: MessageListParams) => void,
   // Redux dispatch functions
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +createEntry: (info: CreateEntryInfo) => Promise<CreateEntryPayload>,
   +saveEntry: (info: SaveEntryInfo) => Promise<SaveEntryResult>,
   +deleteEntry: (info: DeleteEntryInfo) => Promise<DeleteEntryResult>,
 };
 type State = {
   +editing: boolean,
   +text: string,
   +loadingStatus: LoadingStatus,
   +height: number,
 };
 class InternalEntry extends React.Component<Props, State> {
   textInput: ?React.ElementRef<typeof BaseTextInput>;
   creating: boolean = false;
   needsUpdateAfterCreation: boolean = false;
   needsDeleteAfterCreation: boolean = false;
   nextSaveAttemptIndex: number = 0;
   mounted: boolean = false;
   deleted: boolean = false;
   currentlySaving: ?string;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       editing: false,
       text: props.entryInfo.text,
       loadingStatus: 'inactive',
       height: props.entryInfo.textHeight,
     };
     this.state = {
       ...this.state,
       editing: InternalEntry.isActive(props, this.state),
     };
   }
 
   guardedSetState(input: Shape<State>) {
     if (this.mounted) {
       this.setState(input);
     }
   }
 
   shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
     return (
       !shallowequal(nextState, this.state) ||
       !shallowequal(omitEntryInfo(nextProps), omitEntryInfo(this.props)) ||
       !_isEqual(nextProps.entryInfo)(this.props.entryInfo)
     );
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const wasActive = InternalEntry.isActive(prevProps, prevState);
     const isActive = InternalEntry.isActive(this.props, this.state);
 
     if (
       !isActive &&
       (this.props.entryInfo.text !== prevProps.entryInfo.text ||
         this.props.entryInfo.textHeight !== prevProps.entryInfo.textHeight) &&
       (this.props.entryInfo.text !== this.state.text ||
         this.props.entryInfo.textHeight !== this.state.height)
     ) {
       this.guardedSetState({
         text: this.props.entryInfo.text,
         height: this.props.entryInfo.textHeight,
       });
       this.currentlySaving = null;
     }
 
     if (
       !this.props.active &&
       this.state.text === prevState.text &&
       this.state.height !== prevState.height &&
       this.state.height !== this.props.entryInfo.textHeight
     ) {
       const approxMeasuredHeight = Math.round(this.state.height * 1000) / 1000;
       const approxExpectedHeight =
         Math.round(this.props.entryInfo.textHeight * 1000) / 1000;
       console.log(
         `Entry height for ${entryKey(this.props.entryInfo)} was expected to ` +
           `be ${approxExpectedHeight} but is actually ` +
           `${approxMeasuredHeight}. This means Calendar's FlatList isn't ` +
           'getting the right item height for some of its nodes, which is ' +
           'guaranteed to cause glitchy behavior. Please investigate!!',
       );
     }
 
     // Our parent will set the active prop to false if something else gets
     // pressed or if the Entry is scrolled out of view. In either of those cases
     // we should complete the edit process.
     if (!this.props.active && prevProps.active) {
       this.completeEdit();
     }
 
     if (this.state.height !== prevState.height || isActive !== wasActive) {
       LayoutAnimation.easeInEaseOut();
     }
 
     if (
       this.props.online &&
       !prevProps.online &&
       this.state.loadingStatus === 'error'
     ) {
       this.save();
     }
 
     if (
       this.state.editing &&
       prevState.editing &&
       (this.state.text.trim() === '') !== (prevState.text.trim() === '')
     ) {
       LayoutAnimation.easeInEaseOut();
     }
   }
 
   componentDidMount() {
     this.mounted = true;
     this.props.entryRef(entryKey(this.props.entryInfo), this);
   }
 
   componentWillUnmount() {
     this.mounted = false;
     this.props.entryRef(entryKey(this.props.entryInfo), null);
     this.props.onConcludeEditMode(this.props.entryInfo);
   }
 
   static isActive(props: Props, state: State): boolean {
     return (
       props.active ||
       state.editing ||
       !props.entryInfo.id ||
       state.loadingStatus !== 'inactive'
     );
   }
 
   render(): React.Node {
     const active = InternalEntry.isActive(this.props, this.state);
     const { editing } = this.state;
     const threadColor = `#${this.props.threadInfo.color}`;
 
     const darkColor = colorIsDark(this.props.threadInfo.color);
     let actionLinks = null;
     if (active) {
       const actionLinksColor = darkColor ? '#D3D3D3' : '#404040';
       const actionLinksTextStyle = { color: actionLinksColor };
       const { modalIosHighlightUnderlay: actionLinksUnderlayColor } = darkColor
         ? colors.dark
         : colors.light;
       const loadingIndicatorCanUseRed = hueDistance('red', threadColor) > 50;
       let editButtonContent = null;
       if (editing && this.state.text.trim() === '') {
         // nothing
       } else if (editing) {
         editButtonContent = (
           <React.Fragment>
             <Icon name="check" size={14} color={actionLinksColor} />
             <Text
               style={[this.props.styles.leftLinksText, actionLinksTextStyle]}
             >
               SAVE
             </Text>
           </React.Fragment>
         );
       } else {
         editButtonContent = (
           <React.Fragment>
             <Icon
               name="pencil"
               size={12}
               color={actionLinksColor}
               style={this.props.styles.pencilIcon}
             />
             <Text
               style={[this.props.styles.leftLinksText, actionLinksTextStyle]}
             >
               EDIT
             </Text>
           </React.Fragment>
         );
       }
       actionLinks = (
         <View style={this.props.styles.actionLinks}>
           <View style={this.props.styles.leftLinks}>
             <Button
               onPress={this.delete}
               iosFormat="highlight"
               iosHighlightUnderlayColor={actionLinksUnderlayColor}
               iosActiveOpacity={0.85}
               style={this.props.styles.button}
             >
               <View style={this.props.styles.buttonContents}>
                 <Icon name="close" size={14} color={actionLinksColor} />
                 <Text
                   style={[
                     this.props.styles.leftLinksText,
                     actionLinksTextStyle,
                   ]}
                 >
                   DELETE
                 </Text>
               </View>
             </Button>
             <Button
               onPress={this.onPressEdit}
               iosFormat="highlight"
               iosHighlightUnderlayColor={actionLinksUnderlayColor}
               iosActiveOpacity={0.85}
               style={this.props.styles.button}
             >
               <View style={this.props.styles.buttonContents}>
                 {editButtonContent}
               </View>
             </Button>
           </View>
           <View style={this.props.styles.rightLinks}>
             <LoadingIndicator
               loadingStatus={this.state.loadingStatus}
               color={actionLinksColor}
               canUseRed={loadingIndicatorCanUseRed}
             />
             <Button
               onPress={this.onPressThreadName}
               iosFormat="highlight"
               iosHighlightUnderlayColor={actionLinksUnderlayColor}
               iosActiveOpacity={0.85}
               style={this.props.styles.button}
             >
               <SingleLine
                 style={[this.props.styles.rightLinksText, actionLinksTextStyle]}
               >
                 {this.props.threadInfo.uiName}
               </SingleLine>
             </Button>
           </View>
         </View>
       );
     }
 
     const textColor = darkColor ? 'white' : 'black';
     let textInput;
     if (editing) {
       const textInputStyle = {
         color: textColor,
         backgroundColor: threadColor,
       };
       const selectionColor = darkColor ? '#129AFF' : '#036AFF';
       textInput = (
         <TextInput
           style={[this.props.styles.textInput, textInputStyle]}
           value={this.state.text}
           onChangeText={this.onChangeText}
           multiline={true}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           selectionColor={selectionColor}
           ref={this.textInputRef}
         />
       );
     }
 
     let rawText = this.state.text;
     if (rawText === '' || rawText.slice(-1) === '\n') {
       rawText += ' ';
     }
     const textStyle = {
       ...this.props.styles.text,
       color: textColor,
       opacity: textInput ? 0 : 1,
     };
     // We use an empty View to set the height of the entry, and then position
     // the Text and TextInput absolutely. This allows to measure height changes
     // to the Text while controlling the actual height of the entry.
     const heightStyle = { height: this.state.height };
     const entryStyle = { backgroundColor: threadColor };
     const opacity = editing ? 1.0 : 0.6;
     const canEditEntry = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.EDIT_ENTRIES,
     );
     return (
       <TouchableWithoutFeedback onPress={this.props.onPressWhitespace}>
         <View style={this.props.styles.container}>
           <Button
             disabled={!canEditEntry}
             onPress={this.setActive}
             style={[this.props.styles.entry, entryStyle]}
             androidFormat="opacity"
             iosActiveOpacity={opacity}
           >
             <View>
               <View style={heightStyle} />
               <View
                 style={this.props.styles.textContainer}
                 onLayout={this.onTextContainerLayout}
               >
                 <Markdown
                   style={textStyle}
                   rules={inlineMarkdownRules(darkColor)}
                 >
                   {rawText}
                 </Markdown>
               </View>
               {textInput}
             </View>
             {actionLinks}
           </Button>
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   textInputRef: (textInput: ?React.ElementRef<typeof BaseTextInput>) => void =
     textInput => {
       this.textInput = textInput;
       if (textInput && this.state.editing) {
         this.enterEditMode();
       }
     };
 
   enterEditMode: () => Promise<void> = async () => {
     this.setActive();
     this.props.onEnterEditMode(this.props.entryInfo);
     if (Platform.OS === 'android') {
       // If we don't do this, the TextInput focuses
       // but the soft keyboard doesn't come up
       await waitForInteractions();
       await sleep(15);
     }
     this.focus();
   };
 
   focus: () => void = () => {
     const { textInput } = this;
     if (!textInput) {
       return;
     }
     textInput.focus();
   };
 
   onFocus: () => void = () => {
     if (this.props.threadPickerActive) {
       this.props.navigation.goBack();
     }
   };
 
   setActive: () => void = () => this.makeActive(true);
 
   completeEdit: () => void = () => {
     // This gets called from CalendarInputBar (save button above keyboard),
     // onPressEdit (save button in Entry action links), and in
     // componentDidUpdate above when Calendar sets this Entry to inactive.
     // Calendar does this if something else gets pressed or the Entry is
     // scrolled out of view. Note that an Entry won't consider itself inactive
     // until it's done updating the server with its state, and if the network
     // requests fail it may stay "active".
     if (this.textInput) {
       this.textInput.blur();
     }
     this.onBlur();
   };
 
   onBlur: () => void = () => {
     if (this.state.text.trim() === '') {
       this.delete();
     } else if (this.props.entryInfo.text !== this.state.text) {
       this.save();
     }
     this.guardedSetState({ editing: false });
     this.makeActive(false);
     this.props.onConcludeEditMode(this.props.entryInfo);
   };
 
   save: () => void = () => {
     this.dispatchSave(this.props.entryInfo.id, this.state.text);
   };
 
   onTextContainerLayout: (event: LayoutEvent) => void = event => {
     this.guardedSetState({
       height: Math.ceil(event.nativeEvent.layout.height),
     });
   };
 
   onChangeText: (newText: string) => void = newText => {
     this.guardedSetState({ text: newText });
   };
 
   makeActive(active: boolean) {
     const { threadInfo } = this.props;
     if (!threadHasPermission(threadInfo, threadPermissions.EDIT_ENTRIES)) {
       return;
     }
     this.props.makeActive(entryKey(this.props.entryInfo), active);
   }
 
   dispatchSave(serverID: ?string, newText: string) {
     if (this.currentlySaving === newText) {
       return;
     }
     this.currentlySaving = newText;
 
     if (newText.trim() === '') {
       // We don't save the empty string, since as soon as the element becomes
       // inactive it'll get deleted
       return;
     }
 
     if (!serverID) {
       if (this.creating) {
         // We need the first save call to return so we know the ID of the entry
         // we're updating, so we'll need to handle this save later
         this.needsUpdateAfterCreation = true;
         return;
       } else {
         this.creating = true;
       }
     }
 
     this.guardedSetState({ loadingStatus: 'loading' });
     if (!serverID) {
       this.props.dispatchActionPromise(
         createEntryActionTypes,
         this.createAction(newText),
       );
     } else {
       this.props.dispatchActionPromise(
         saveEntryActionTypes,
         this.saveAction(serverID, newText),
       );
     }
   }
 
   async createAction(text: string): Promise<CreateEntryPayload> {
     const localID = this.props.entryInfo.localID;
     invariant(localID, "if there's no serverID, there should be a localID");
     const curSaveAttempt = this.nextSaveAttemptIndex++;
     try {
       const response = await this.props.createEntry({
         text,
         timestamp: this.props.entryInfo.creationTime,
         date: dateString(
           this.props.entryInfo.year,
           this.props.entryInfo.month,
           this.props.entryInfo.day,
         ),
         threadID: this.props.entryInfo.threadID,
         localID,
         calendarQuery: this.props.calendarQuery(),
       });
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'inactive' });
       }
       this.creating = false;
       if (this.needsUpdateAfterCreation) {
         this.needsUpdateAfterCreation = false;
         this.dispatchSave(response.entryID, this.state.text);
       }
       if (this.needsDeleteAfterCreation) {
         this.needsDeleteAfterCreation = false;
         this.dispatchDelete(response.entryID);
       }
       return response;
     } catch (e) {
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'error' });
       }
       this.currentlySaving = null;
       this.creating = false;
       throw e;
     }
   }
 
   async saveAction(
     entryID: string,
     newText: string,
   ): Promise<SaveEntryPayload> {
     const curSaveAttempt = this.nextSaveAttemptIndex++;
     try {
       const response = await this.props.saveEntry({
         entryID,
         text: newText,
         prevText: this.props.entryInfo.text,
         timestamp: Date.now(),
         calendarQuery: this.props.calendarQuery(),
       });
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'inactive' });
       }
       return { ...response, threadID: this.props.entryInfo.threadID };
     } catch (e) {
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'error' });
       }
       this.currentlySaving = null;
       if (e instanceof ServerError && e.message === 'concurrent_modification') {
         const revertedText = e.payload?.db;
         const onRefresh = () => {
           this.guardedSetState({
             loadingStatus: 'inactive',
             text: revertedText,
           });
           this.props.dispatch({
             type: concurrentModificationResetActionType,
             payload: { id: entryID, dbText: revertedText },
           });
         };
         Alert.alert(
           'Concurrent modification',
           'It looks like somebody is attempting to modify that field at the ' +
             'same time as you! Please try again.',
           [{ text: 'OK', onPress: onRefresh }],
           { cancelable: false },
         );
       }
       throw e;
     }
   }
 
   delete: () => void = () => {
     this.dispatchDelete(this.props.entryInfo.id);
   };
 
   onPressEdit: () => void = () => {
     if (this.state.editing) {
       this.completeEdit();
     } else {
       this.guardedSetState({ editing: true });
     }
   };
 
   dispatchDelete(serverID: ?string) {
     if (this.deleted) {
       return;
     }
     this.deleted = true;
     LayoutAnimation.easeInEaseOut();
     const { localID } = this.props.entryInfo;
     this.props.dispatchActionPromise(
       deleteEntryActionTypes,
       this.deleteAction(serverID),
       undefined,
       { localID, serverID },
     );
   }
 
   async deleteAction(serverID: ?string): Promise<?DeleteEntryResult> {
     if (serverID) {
       return await this.props.deleteEntry({
         entryID: serverID,
         prevText: this.props.entryInfo.text,
         calendarQuery: this.props.calendarQuery(),
       });
     } else if (this.creating) {
       this.needsDeleteAfterCreation = true;
     }
     return null;
   }
 
   onPressThreadName: () => void = () => {
     Keyboard.dismiss();
     this.props.navigateToThread({ threadInfo: this.props.threadInfo });
   };
 }
 
 registerFetchKey(saveEntryActionTypes);
 registerFetchKey(deleteEntryActionTypes);
 const activeThreadPickerSelector = createIsForegroundSelector(
   ThreadPickerModalRouteName,
 );
 
 const Entry: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedEntry(props: BaseProps) {
     const navContext = React.useContext(NavContext);
     const threadPickerActive = activeThreadPickerSelector(navContext);
 
     const calendarQuery = useSelector(state =>
       nonThreadCalendarQuery({
         redux: state,
         navContext,
       }),
     );
     const connection = useSelector(connectionSelector(ashoatKeyserverID));
     invariant(connection, 'keyserver missing from keyserverStore');
     const online = connection.status === 'connected';
     const styles = useStyles(unboundStyles);
 
     const navigateToThread = useNavigateToThread();
 
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const callCreateEntry = useCreateEntry();
     const callSaveEntry = useSaveEntry();
     const callDeleteEntry = useDeleteEntry();
 
     const { threadInfo: unresolvedThreadInfo, ...restProps } = props;
     const threadInfo = useResolvedThreadInfo(unresolvedThreadInfo);
 
     return (
       <InternalEntry
         {...restProps}
         threadPickerActive={threadPickerActive}
         calendarQuery={calendarQuery}
         online={online}
         styles={styles}
         navigateToThread={navigateToThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         createEntry={callCreateEntry}
         saveEntry={callSaveEntry}
         deleteEntry={callDeleteEntry}
         threadInfo={threadInfo}
       />
     );
   },
 );
 
 export { InternalEntry, Entry, dummyNodeForEntryHeightMeasurement };
diff --git a/native/calendar/section-footer.react.js b/native/calendar/section-footer.react.js
index c35fc6e75..ec58d9fdd 100644
--- a/native/calendar/section-footer.react.js
+++ b/native/calendar/section-footer.react.js
@@ -1,82 +1,82 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
 
 import Button from '../components/button.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { type Colors, useStyles, useColors } from '../themes/colors.js';
 
 const unboundStyles = {
   actionLinksText: {
     color: 'listSeparatorLabel',
     fontWeight: 'bold',
   },
   addButton: {
     backgroundColor: 'panelSecondaryForeground',
     borderRadius: 5,
     margin: 5,
     paddingBottom: 5,
     paddingLeft: 10,
     paddingRight: 10,
     paddingTop: 5,
   },
   addButtonContents: {
     alignItems: 'center',
     flexDirection: 'row',
   },
   addIcon: {
     color: 'listSeparatorLabel',
     fontSize: 18,
     paddingRight: 4,
   },
   sectionFooter: {
     alignItems: 'flex-start',
     backgroundColor: 'listBackground',
     height: 40,
   },
 };
 
 type BaseProps = {
   +dateString: string,
   +onAdd: (dateString: string) => void,
   +onPressWhitespace: () => void,
 };
 type Props = {
   ...BaseProps,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
 };
 class SectionFooter extends React.PureComponent<Props> {
   render(): React.Node {
     return (
       <TouchableWithoutFeedback onPress={this.props.onPressWhitespace}>
         <View style={this.props.styles.sectionFooter}>
           <Button onPress={this.onSubmit} style={this.props.styles.addButton}>
             <View style={this.props.styles.addButtonContents}>
               <SWMansionIcon
                 name="plus-circle"
                 style={this.props.styles.addIcon}
               />
               <Text style={this.props.styles.actionLinksText}>Add</Text>
             </View>
           </Button>
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   onSubmit = () => {
     this.props.onAdd(this.props.dateString);
   };
 }
 
 const ConnectedSectionFooter: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedSectionFooter(props: BaseProps) {
     const styles = useStyles(unboundStyles);
     const colors = useColors();
 
     return <SectionFooter {...props} styles={styles} colors={colors} />;
   });
 
 export default ConnectedSectionFooter;
diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
index f119cd6c7..b99054694 100644
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -1,1459 +1,1459 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Ionicons.js';
 import type { GenericNavigationAction } from '@react-navigation/core';
 import invariant from 'invariant';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 import {
   View,
   TextInput,
   TouchableOpacity,
   Platform,
   Text,
   ActivityIndicator,
   TouchableWithoutFeedback,
   NativeAppEventEmitter,
 } from 'react-native';
 import { TextInputKeyboardMangerIOS } from 'react-native-keyboard-input';
 import Animated, {
   EasingNode,
   FadeInDown,
   FadeOutDown,
 } from 'react-native-reanimated';
 
 import {
   moveDraftActionType,
   updateDraftActionType,
 } from 'lib/actions/draft-actions.js';
 import {
   joinThreadActionTypes,
   useJoinThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import {
   useChatMentionContext,
   useThreadChatMentionCandidates,
 } from 'lib/hooks/chat-mention-hooks.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import { useEditMessage } from 'lib/shared/edit-messages-utils.js';
 import {
   getMentionTypeaheadUserSuggestions,
   getMentionTypeaheadChatSuggestions,
   getTypeaheadRegexMatches,
   type Selection,
   getUserMentionsCandidates,
 } from 'lib/shared/mention-utils.js';
 import {
   useNextLocalID,
   trimMessage,
   useMessagePreview,
   messageKey,
   type MessagePreviewResult,
 } from 'lib/shared/message-utils.js';
 import SentencePrefixSearchIndex from 'lib/shared/sentence-prefix-search-index.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
   checkIfDefaultMembersAreVoiced,
   draftKeyFromThreadID,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { PhotoPaste } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type {
   SendEditMessageResponse,
   MessageInfo,
 } from 'lib/types/message-types.js';
 import type {
   MinimallyEncodedRelativeMemberInfo,
   MinimallyEncodedThreadInfo,
 } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type {
   ThreadInfo,
   ClientThreadJoinRequest,
   ThreadJoinPayload,
   RelativeMemberInfo,
   ChatMentionCandidates,
 } from 'lib/types/thread-types.js';
 import { type UserInfos } from 'lib/types/user-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import { ChatContext } from './chat-context.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import {
   MessageEditingContext,
   type MessageEditingContextType,
 } from './message-editing-context.react.js';
 import type { RemoveEditMode } from './message-list-types.js';
 import TypeaheadTooltip from './typeahead-tooltip.react.js';
 import MentionTypeaheadTooltipButton from '../chat/mention-typeahead-tooltip-button.react.js';
 import Button from '../components/button.react.js';
 // eslint-disable-next-line import/extensions
 import ClearableTextInput from '../components/clearable-text-input.react';
 import type { SyncedSelectionData } from '../components/selectable-text-input.js';
 // eslint-disable-next-line import/extensions
 import SelectableTextInput from '../components/selectable-text-input.react';
 import SingleLine from '../components/single-line.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import {
   type InputState,
   InputStateContext,
   type EditInputBarMessageParameters,
 } from '../input/input-state.js';
 import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import { getKeyboardHeight } from '../keyboard/keyboard.js';
 import { getDefaultTextMessageRules } from '../markdown/rules.react.js';
 import {
   nonThreadCalendarQuery,
   activeThreadSelector,
 } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import type { OverlayContextType } from '../navigation/overlay-context.js';
 import {
   type NavigationRoute,
   ChatCameraModalRouteName,
   ImagePasteModalRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../themes/colors.js';
 import type { LayoutEvent, ImagePasteEvent } from '../types/react-native.js';
 import {
   type AnimatedViewStyle,
   AnimatedView,
   type ViewStyle,
 } 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 {
   nativeMentionTypeaheadRegex,
   mentionTypeaheadTooltipActions,
 } from '../utils/typeahead-utils.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Value, Clock, block, set, cond, neq, sub, interpolateNode, stopClock } =
   Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 const expandoButtonsAnimationConfig = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.ease),
 };
 
 const unboundStyles = {
   cameraIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 8,
     paddingRight: 5,
   },
   cameraRollIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 8,
     paddingRight: 5,
   },
   container: {
     backgroundColor: 'listBackground',
     paddingLeft: Platform.OS === 'android' ? 10 : 5,
   },
   expandButton: {
     bottom: 0,
     position: 'absolute',
     right: 0,
   },
   expandIcon: {
     paddingBottom: Platform.OS === 'android' ? 13 : 11,
     paddingRight: 2,
   },
   expandoButtons: {
     alignSelf: 'flex-end',
   },
   explanation: {
     color: 'listBackgroundSecondaryLabel',
     paddingBottom: 4,
     paddingTop: 1,
     textAlign: 'center',
   },
   innerExpandoButtons: {
     alignItems: 'flex-end',
     alignSelf: 'flex-end',
     flexDirection: 'row',
   },
   inputContainer: {
     flexDirection: 'row',
   },
   joinButton: {
     borderRadius: 8,
     flex: 1,
     justifyContent: 'center',
     marginHorizontal: 12,
     marginVertical: 3,
   },
   joinButtonContainer: {
     flexDirection: 'row',
     height: 48,
     marginBottom: 8,
   },
   editView: {
     marginLeft: 20,
     marginRight: 20,
     padding: 10,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   editViewContent: {
     flex: 1,
     paddingRight: 6,
   },
   exitEditButton: {
     marginTop: 6,
   },
   editingLabel: {
     paddingBottom: 4,
   },
   editingMessagePreview: {
     color: 'listForegroundLabel',
   },
   joinButtonContent: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
   },
   joinButtonTextLight: {
     color: 'white',
     fontSize: 20,
     marginHorizontal: 4,
   },
   joinButtonTextDark: {
     color: 'black',
     fontSize: 20,
     marginHorizontal: 4,
   },
   joinThreadLoadingIndicator: {
     paddingVertical: 2,
   },
   sendButton: {
     position: 'absolute',
     bottom: 4,
     left: 0,
   },
   sendIcon: {
     paddingLeft: 9,
     paddingRight: 8,
     paddingVertical: 6,
   },
   textInput: {
     backgroundColor: 'listInputBackground',
     borderRadius: 8,
     color: 'listForegroundLabel',
     fontSize: 16,
     marginLeft: 4,
     marginRight: 4,
     marginTop: 6,
     marginBottom: 8,
     maxHeight: 110,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +draft: string,
   +joinThreadLoadingStatus: LoadingStatus,
   +threadCreationInProgress: boolean,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: string,
   +userInfos: UserInfos,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +onInputBarLayout?: (event: LayoutEvent) => mixed,
   +openCamera: () => mixed,
   +isActive: boolean,
   +keyboardState: ?KeyboardState,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
   +inputState: ?InputState,
   +userSearchIndex: SentencePrefixSearchIndex,
   +userMentionsCandidates: $ReadOnlyArray<
     RelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
   >,
   +chatMentionSearchIndex: SentencePrefixSearchIndex,
   +chatMentionCandidates: ChatMentionCandidates,
   +parentThreadInfo: ?ThreadInfo,
   +editedMessagePreview: ?MessagePreviewResult,
   +editedMessageInfo: ?MessageInfo,
   +editMessage: (
     messageID: string,
     text: string,
   ) => Promise<SendEditMessageResponse>,
   +navigation: ?ChatNavigationProp<'MessageList'>,
   +overlayContext: ?OverlayContextType,
   +messageEditingContext: ?MessageEditingContextType,
 };
 type State = {
   +text: string,
   +textEdited: boolean,
   +buttonsExpanded: boolean,
   +selectionState: SyncedSelectionData,
   +isExitingDuringEditMode: boolean,
 };
 class ChatInputBar extends React.PureComponent<Props, State> {
   textInput: ?React.ElementRef<typeof TextInput>;
   clearableTextInput: ?ClearableTextInput;
   selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>;
 
   expandoButtonsOpen: Value;
   targetExpandoButtonsOpen: Value;
   expandoButtonsStyle: AnimatedViewStyle;
   cameraRollIconStyle: AnimatedViewStyle;
   cameraIconStyle: AnimatedViewStyle;
   expandIconStyle: AnimatedViewStyle;
 
   sendButtonContainerOpen: Value;
   targetSendButtonContainerOpen: Value;
   sendButtonContainerStyle: AnimatedViewStyle;
 
   clearBeforeRemoveListener: () => void;
   clearFocusListener: () => void;
   clearBlurListener: () => void;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       text: props.draft,
       textEdited: false,
       buttonsExpanded: true,
       selectionState: { text: props.draft, selection: { start: 0, end: 0 } },
       isExitingDuringEditMode: false,
     };
 
     this.setUpActionIconAnimations();
     this.setUpSendIconAnimations();
   }
 
   setUpActionIconAnimations() {
     this.expandoButtonsOpen = new Value(1);
     this.targetExpandoButtonsOpen = new Value(1);
     const prevTargetExpandoButtonsOpen = new Value(1);
     const expandoButtonClock = new Clock();
     const expandoButtonsOpen = block([
       cond(neq(this.targetExpandoButtonsOpen, prevTargetExpandoButtonsOpen), [
         stopClock(expandoButtonClock),
         set(prevTargetExpandoButtonsOpen, this.targetExpandoButtonsOpen),
       ]),
       cond(
         neq(this.expandoButtonsOpen, this.targetExpandoButtonsOpen),
         set(
           this.expandoButtonsOpen,
           runTiming(
             expandoButtonClock,
             this.expandoButtonsOpen,
             this.targetExpandoButtonsOpen,
             true,
             expandoButtonsAnimationConfig,
           ),
         ),
       ),
       this.expandoButtonsOpen,
     ]);
 
     this.cameraRollIconStyle = {
       ...unboundStyles.cameraRollIcon,
       opacity: expandoButtonsOpen,
     };
     this.cameraIconStyle = {
       ...unboundStyles.cameraIcon,
       opacity: expandoButtonsOpen,
     };
 
     const expandoButtonsWidth = interpolateNode(expandoButtonsOpen, {
       inputRange: [0, 1],
       outputRange: [26, 66],
     });
     this.expandoButtonsStyle = {
       ...unboundStyles.expandoButtons,
       width: expandoButtonsWidth,
     };
 
     const expandOpacity = sub(1, expandoButtonsOpen);
     this.expandIconStyle = {
       ...unboundStyles.expandIcon,
       opacity: expandOpacity,
     };
   }
 
   setUpSendIconAnimations() {
     const initialSendButtonContainerOpen = trimMessage(this.props.draft)
       ? 1
       : 0;
     this.sendButtonContainerOpen = new Value(initialSendButtonContainerOpen);
     this.targetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const prevTargetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const sendButtonClock = new Clock();
     const sendButtonContainerOpen = block([
       cond(
         neq(
           this.targetSendButtonContainerOpen,
           prevTargetSendButtonContainerOpen,
         ),
         [
           stopClock(sendButtonClock),
           set(
             prevTargetSendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
           ),
         ],
       ),
       cond(
         neq(this.sendButtonContainerOpen, this.targetSendButtonContainerOpen),
         set(
           this.sendButtonContainerOpen,
           runTiming(
             sendButtonClock,
             this.sendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
             true,
             sendButtonAnimationConfig,
           ),
         ),
       ),
       this.sendButtonContainerOpen,
     ]);
 
     const sendButtonContainerWidth = interpolateNode(sendButtonContainerOpen, {
       inputRange: [0, 1],
       outputRange: [4, 38],
     });
     this.sendButtonContainerStyle = { width: sendButtonContainerWidth };
   }
 
   static mediaGalleryOpen(props: Props): boolean {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.mediaGalleryOpen);
   }
 
   static systemKeyboardShowing(props: Props): boolean {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.systemKeyboardShowing);
   }
 
   get systemKeyboardShowing(): boolean {
     return ChatInputBar.systemKeyboardShowing(this.props);
   }
 
   immediatelyShowSendButton() {
     this.sendButtonContainerOpen.setValue(1);
     this.targetSendButtonContainerOpen.setValue(1);
   }
 
   updateSendButton(currentText: string) {
     if (this.shouldShowTextInput) {
       this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);
     } else {
       this.setUpSendIconAnimations();
     }
   }
 
   componentDidMount() {
     const { isActive, navigation } = this.props;
     if (isActive) {
       this.addEditInputMessageListener();
     }
     if (!navigation) {
       return;
     }
     this.clearBeforeRemoveListener = navigation.addListener(
       'beforeRemove',
       this.onNavigationBeforeRemove,
     );
     this.clearFocusListener = navigation.addListener(
       'focus',
       this.onNavigationFocus,
     );
     this.clearBlurListener = navigation.addListener(
       'blur',
       this.onNavigationBlur,
     );
   }
 
   componentWillUnmount() {
     if (this.props.isActive) {
       this.removeEditInputMessageListener();
     }
     if (this.clearBeforeRemoveListener) {
       this.clearBeforeRemoveListener();
     }
     if (this.clearFocusListener) {
       this.clearFocusListener();
     }
     if (this.clearBlurListener) {
       this.clearBlurListener();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (
       this.state.textEdited &&
       this.state.text &&
       this.props.threadInfo.id !== prevProps.threadInfo.id
     ) {
       this.props.dispatch({
         type: moveDraftActionType,
         payload: {
           oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),
           newKey: draftKeyFromThreadID(this.props.threadInfo.id),
         },
       });
     } else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {
       this.setState({ text: this.props.draft });
     }
     if (this.props.isActive && !prevProps.isActive) {
       this.addEditInputMessageListener();
     } else if (!this.props.isActive && prevProps.isActive) {
       this.removeEditInputMessageListener();
     }
 
     const currentText = trimMessage(this.state.text);
     const prevText = trimMessage(prevState.text);
 
     if (
       (currentText === '' && prevText !== '') ||
       (currentText !== '' && prevText === '')
     ) {
       this.updateSendButton(currentText);
     }
 
     const systemKeyboardIsShowing = ChatInputBar.systemKeyboardShowing(
       this.props,
     );
     const systemKeyboardWasShowing =
       ChatInputBar.systemKeyboardShowing(prevProps);
     if (systemKeyboardIsShowing && !systemKeyboardWasShowing) {
       this.hideButtons();
     } else if (!systemKeyboardIsShowing && systemKeyboardWasShowing) {
       this.expandButtons();
     }
 
     const imageGalleryIsOpen = ChatInputBar.mediaGalleryOpen(this.props);
     const imageGalleryWasOpen = ChatInputBar.mediaGalleryOpen(prevProps);
     if (!imageGalleryIsOpen && imageGalleryWasOpen) {
       this.hideButtons();
     } else if (imageGalleryIsOpen && !imageGalleryWasOpen) {
       this.expandButtons();
       this.setIOSKeyboardHeight();
     }
 
     if (
       this.props.messageEditingContext?.editState.editedMessage &&
       !prevProps.messageEditingContext?.editState.editedMessage
     ) {
       this.blockNavigation();
     }
   }
 
   addEditInputMessageListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in addEditInputMessageListener',
     );
     this.props.inputState.addEditInputMessageListener(this.focusAndUpdateText);
   }
 
   removeEditInputMessageListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in removeEditInputMessageListener',
     );
     this.props.inputState.removeEditInputMessageListener(
       this.focusAndUpdateText,
     );
   }
 
   setIOSKeyboardHeight() {
     if (Platform.OS !== 'ios') {
       return;
     }
     const { textInput } = this;
     if (!textInput) {
       return;
     }
     const keyboardHeight = getKeyboardHeight();
     if (keyboardHeight === null || keyboardHeight === undefined) {
       return;
     }
     TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
   }
 
   get shouldShowTextInput(): boolean {
     if (threadHasPermission(this.props.threadInfo, threadPermissions.VOICED)) {
       return true;
     }
     // If the thread is created by somebody else while the viewer is attempting
     // to create it, the threadInfo might be modified in-place
     // and won't list the viewer as a member,
     // which will end up hiding the input.
     // In this case, we will assume that our creation action
     // will get translated into a join, and as long
     // as members are voiced, we can show the input.
     if (!this.props.threadCreationInProgress) {
       return false;
     }
     return checkIfDefaultMembersAreVoiced(this.props.threadInfo);
   }
 
   render(): React.Node {
     const isMember = viewerIsMember(this.props.threadInfo);
     const canJoin = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.JOIN_THREAD,
     );
     let joinButton = null;
     const threadColor = `#${this.props.threadInfo.color}`;
     const isEditMode = this.isEditMode();
     if (!isMember && canJoin && !this.props.threadCreationInProgress) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <ActivityIndicator
             size="small"
             color="white"
             style={this.props.styles.joinThreadLoadingIndicator}
           />
         );
       } else {
         const textStyle = colorIsDark(this.props.threadInfo.color)
           ? this.props.styles.joinButtonTextLight
           : this.props.styles.joinButtonTextDark;
         buttonContent = (
           <View style={this.props.styles.joinButtonContent}>
             <SWMansionIcon name="plus" style={textStyle} />
             <Text style={textStyle}>Join Chat</Text>
           </View>
         );
       }
       joinButton = (
         <View style={this.props.styles.joinButtonContainer}>
           <Button
             onPress={this.onPressJoin}
             iosActiveOpacity={0.85}
             style={[
               this.props.styles.joinButton,
               { backgroundColor: threadColor },
             ]}
           >
             {buttonContent}
           </Button>
         </View>
       );
     }
 
     const typeaheadRegexMatches = getTypeaheadRegexMatches(
       this.state.selectionState.text,
       this.state.selectionState.selection,
       nativeMentionTypeaheadRegex,
     );
 
     let typeaheadTooltip = null;
 
     if (typeaheadRegexMatches && !isEditMode) {
       const typeaheadMatchedStrings = {
         textBeforeAtSymbol: typeaheadRegexMatches[1] ?? '',
         query: typeaheadRegexMatches[4] ?? '',
       };
 
       const suggestedUsers = getMentionTypeaheadUserSuggestions(
         this.props.userSearchIndex,
         this.props.userMentionsCandidates,
         this.props.viewerID,
         typeaheadMatchedStrings.query,
       );
       const suggestedChats = getMentionTypeaheadChatSuggestions(
         this.props.chatMentionSearchIndex,
         this.props.chatMentionCandidates,
         typeaheadMatchedStrings.query,
       );
       const suggestions = [...suggestedUsers, ...suggestedChats];
 
       if (suggestions.length > 0) {
         typeaheadTooltip = (
           <TypeaheadTooltip
             text={this.state.text}
             matchedStrings={typeaheadMatchedStrings}
             suggestions={suggestions}
             focusAndUpdateTextAndSelection={this.focusAndUpdateTextAndSelection}
             typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
             TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
           />
         );
       }
     }
 
     let content;
     const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
       this.props.threadInfo,
     );
     if (this.shouldShowTextInput) {
       content = this.renderInput();
     } else if (
       threadFrozenDueToViewerBlock(
         this.props.threadInfo,
         this.props.viewerID,
         this.props.userInfos,
       ) &&
       threadActualMembers(this.props.threadInfo.members).length === 2
     ) {
       content = (
         <Text style={this.props.styles.explanation}>
           You can&rsquo;t send messages to a user that you&rsquo;ve blocked.
         </Text>
       );
     } else if (isMember) {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&rsquo;t have permission to send messages.
         </Text>
       );
     } else if (defaultMembersAreVoiced && canJoin) {
       content = null;
     } else {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&rsquo;t have permission to send messages.
         </Text>
       );
     }
 
     const keyboardInputHost =
       Platform.OS === 'android' ? null : (
         <KeyboardInputHost textInputRef={this.textInput} />
       );
 
     let editedMessage;
     if (isEditMode && this.props.editedMessagePreview) {
       const { message } = this.props.editedMessagePreview;
       editedMessage = (
         <AnimatedView
           style={this.props.styles.editView}
           entering={FadeInDown}
           exiting={FadeOutDown}
         >
           <View style={this.props.styles.editViewContent}>
             <TouchableOpacity
               onPress={this.scrollToEditedMessage}
               activeOpacity={0.4}
             >
               <Text
                 style={[{ color: threadColor }, this.props.styles.editingLabel]}
               >
                 Editing message
               </Text>
               <SingleLine style={this.props.styles.editingMessagePreview}>
                 {message.text}
               </SingleLine>
             </TouchableOpacity>
           </View>
           <SWMansionIcon
             style={this.props.styles.exitEditButton}
             name="cross"
             size={22}
             color={threadColor}
             onPress={this.onPressExitEditMode}
           />
         </AnimatedView>
       );
     }
 
     return (
       <AnimatedView
         style={this.props.styles.container}
         onLayout={this.props.onInputBarLayout}
       >
         {typeaheadTooltip}
         {joinButton}
         {editedMessage}
         {content}
         {keyboardInputHost}
       </AnimatedView>
     );
   }
 
   renderInput(): React.Node {
     const expandoButton = (
       <TouchableOpacity
         onPress={this.expandButtons}
         activeOpacity={0.4}
         style={this.props.styles.expandButton}
       >
         <AnimatedView style={this.expandIconStyle}>
           <SWMansionIcon
             name="chevron-right"
             size={22}
             color={`#${this.props.threadInfo.color}`}
           />
         </AnimatedView>
       </TouchableOpacity>
     );
     const threadColor = `#${this.props.threadInfo.color}`;
     const expandoButtonsViewStyle: Array<ViewStyle> = [
       this.props.styles.innerExpandoButtons,
     ];
     if (this.isEditMode()) {
       expandoButtonsViewStyle.push({ display: 'none' });
     }
     return (
       <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
         <View style={this.props.styles.inputContainer}>
           <AnimatedView style={this.expandoButtonsStyle}>
             <View style={expandoButtonsViewStyle}>
               {this.state.buttonsExpanded ? expandoButton : null}
               <TouchableOpacity
                 onPress={this.showMediaGallery}
                 activeOpacity={0.4}
               >
                 <AnimatedView style={this.cameraRollIconStyle}>
                   <SWMansionIcon
                     name="image-1"
                     size={28}
                     color={`#${this.props.threadInfo.color}`}
                   />
                 </AnimatedView>
               </TouchableOpacity>
               <TouchableOpacity
                 onPress={this.props.openCamera}
                 activeOpacity={0.4}
                 disabled={!this.state.buttonsExpanded}
               >
                 <AnimatedView style={this.cameraIconStyle}>
                   <SWMansionIcon
                     name="camera"
                     size={28}
                     color={`#${this.props.threadInfo.color}`}
                   />
                 </AnimatedView>
               </TouchableOpacity>
               {this.state.buttonsExpanded ? null : expandoButton}
             </View>
           </AnimatedView>
           <SelectableTextInput
             allowImagePasteForThreadID={this.props.threadInfo.id}
             value={this.state.text}
             onChangeText={this.updateText}
             selection={this.state.selectionState.selection}
             onUpdateSyncedSelectionData={this.updateSelectionState}
             placeholder="Send a message..."
             placeholderTextColor={this.props.colors.listInputButton}
             multiline={true}
             style={this.props.styles.textInput}
             textInputRef={this.textInputRef}
             clearableTextInputRef={this.clearableTextInputRef}
             ref={this.selectableTextInputRef}
             selectionColor={`#${this.props.threadInfo.color}`}
           />
           <AnimatedView style={this.sendButtonContainerStyle}>
             <TouchableOpacity
               onPress={this.onSend}
               activeOpacity={0.4}
               style={this.props.styles.sendButton}
               disabled={trimMessage(this.state.text) === ''}
             >
               <Icon
                 name="md-send"
                 size={25}
                 style={this.props.styles.sendIcon}
                 color={threadColor}
               />
             </TouchableOpacity>
           </AnimatedView>
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof TextInput>) => {
     this.textInput = textInput;
   };
 
   clearableTextInputRef = (clearableTextInput: ?ClearableTextInput) => {
     this.clearableTextInput = clearableTextInput;
   };
 
   selectableTextInputRef = (
     selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>,
   ) => {
     this.selectableTextInput = selectableTextInput;
   };
 
   updateText = (text: string) => {
     if (this.state.isExitingDuringEditMode) {
       return;
     }
     this.setState({ text, textEdited: true });
     this.props.messageEditingContext?.setEditedMessageChanged(
       this.isMessageEdited(text),
     );
     if (this.isEditMode()) {
       return;
     }
     this.saveDraft(text);
   };
 
   updateSelectionState: (data: SyncedSelectionData) => void = data => {
     this.setState({ selectionState: data });
   };
 
   saveDraft: (text: string) => void = _throttle(text => {
     this.props.dispatch({
       type: updateDraftActionType,
       payload: {
         key: draftKeyFromThreadID(this.props.threadInfo.id),
         text,
       },
     });
   }, 400);
 
   focusAndUpdateTextAndSelection = (text: string, selection: Selection) => {
     this.selectableTextInput?.prepareForSelectionMutation(text, selection);
     this.setState({
       text,
       textEdited: true,
       selectionState: { text, selection },
     });
     this.saveDraft(text);
 
     this.focusAndUpdateButtonsVisibility();
   };
 
   focusAndUpdateText = (params: EditInputBarMessageParameters) => {
     const { message: text, mode } = params;
     const currentText = this.state.text;
     if (mode === 'replace') {
       this.updateText(text);
     } else if (!currentText.startsWith(text)) {
       const prependedText = text.concat(currentText);
       this.updateText(prependedText);
     }
 
     this.focusAndUpdateButtonsVisibility();
   };
 
   focusAndUpdateButtonsVisibility = () => {
     const { textInput } = this;
     if (!textInput) {
       return;
     }
 
     this.immediatelyShowSendButton();
     this.immediatelyHideButtons();
     textInput.focus();
   };
 
   onSend = async () => {
     if (!trimMessage(this.state.text)) {
       return;
     }
 
     const editedMessage = this.getEditedMessage();
     if (editedMessage && editedMessage.id) {
       this.editMessage(editedMessage.id, this.state.text);
       return;
     }
 
     this.updateSendButton('');
 
     const { clearableTextInput } = this;
     invariant(
       clearableTextInput,
       'clearableTextInput should be sent in onSend',
     );
     let text = await clearableTextInput.getValueAndReset();
     text = trimMessage(text);
     if (!text) {
       return;
     }
 
     const localID = this.props.nextLocalID;
     const creatorID = this.props.viewerID;
     invariant(creatorID, 'should have viewer ID in order to send a message');
     invariant(
       this.props.inputState,
       'inputState should be set in ChatInputBar.onSend',
     );
 
     this.props.inputState.sendTextMessage(
       {
         type: messageTypes.TEXT,
         localID,
         threadID: this.props.threadInfo.id,
         text,
         creatorID,
         time: Date.now(),
       },
       this.props.threadInfo,
       this.props.parentThreadInfo,
     );
   };
 
   isEditMode = (): boolean => {
     const editState = this.props.messageEditingContext?.editState;
     const isThisThread =
       editState?.editedMessage?.threadID === this.props.threadInfo.id;
     return editState?.editedMessage !== null && isThisThread;
   };
 
   isMessageEdited = (newText?: string): boolean => {
     let text = newText ?? this.state.text;
     text = trimMessage(text);
     const originalText = this.props.editedMessageInfo?.text;
     return text !== originalText;
   };
 
   unblockNavigation = () => {
     const { navigation } = this.props;
     if (!navigation) {
       return;
     }
     navigation.setParams({ removeEditMode: null });
   };
 
   removeEditMode: RemoveEditMode = action => {
     const { navigation } = this.props;
     if (!navigation || this.state.isExitingDuringEditMode) {
       return 'ignore_action';
     }
     if (!this.isMessageEdited()) {
       this.unblockNavigation();
       return 'reduce_action';
     }
     const unblockAndDispatch = () => {
       this.unblockNavigation();
       navigation.dispatch(action);
     };
     const onContinueEditing = () => {
       this.props.overlayContext?.resetScrollBlockingModalStatus();
     };
     exitEditAlert({
       onDiscard: unblockAndDispatch,
       onContinueEditing,
     });
     return 'ignore_action';
   };
 
   blockNavigation = () => {
     const { navigation } = this.props;
     if (!navigation || !navigation.isFocused()) {
       return;
     }
     navigation.setParams({
       removeEditMode: this.removeEditMode,
     });
   };
 
   editMessage = async (messageID: string, text: string) => {
     if (!this.isMessageEdited()) {
       this.exitEditMode();
       return;
     }
     text = trimMessage(text);
     try {
       await this.props.editMessage(messageID, text);
       this.exitEditMode();
     } catch (error) {
       Alert.alert(
         'Couldn’t edit the message',
         'Please try again later',
         [{ text: 'OK' }],
         {
           cancelable: true,
         },
       );
     }
   };
 
   getEditedMessage = (): ?MessageInfo => {
     const editState = this.props.messageEditingContext?.editState;
     return editState?.editedMessage;
   };
 
   onPressExitEditMode = () => {
     if (!this.isMessageEdited()) {
       this.exitEditMode();
       return;
     }
     exitEditAlert({
       onDiscard: this.exitEditMode,
     });
   };
 
   scrollToEditedMessage = () => {
     const editedMessage = this.getEditedMessage();
     if (!editedMessage) {
       return;
     }
     const editedMessageKey = messageKey(editedMessage);
     this.props.inputState?.scrollToMessage(editedMessageKey);
   };
 
   exitEditMode = () => {
     this.props.messageEditingContext?.setEditedMessage(null, () => {
       this.unblockNavigation();
       this.updateText(this.props.draft);
       this.focusAndUpdateButtonsVisibility();
       this.updateSendButton(this.props.draft);
     });
   };
 
   onNavigationFocus = () => {
     this.setState({ isExitingDuringEditMode: false });
   };
 
   onNavigationBlur = () => {
     if (!this.isEditMode()) {
       return;
     }
     this.setState(
       { text: this.props.draft, isExitingDuringEditMode: true },
       this.exitEditMode,
     );
   };
 
   onNavigationBeforeRemove = (e: {
     +data: { +action: GenericNavigationAction },
     +preventDefault: () => void,
     ...
   }) => {
     if (!this.isEditMode()) {
       return;
     }
     const { action } = e.data;
     e.preventDefault();
     const saveExit = () => {
       this.props.messageEditingContext?.setEditedMessage(null, () => {
         this.setState({ isExitingDuringEditMode: true }, () => {
           if (!this.props.navigation) {
             return;
           }
           this.props.navigation.dispatch(action);
         });
       });
     };
     if (!this.isMessageEdited()) {
       saveExit();
       return;
     }
     exitEditAlert({
       onDiscard: saveExit,
     });
   };
 
   onPressJoin = () => {
     this.props.dispatchActionPromise(joinThreadActionTypes, this.joinAction());
   };
 
   async joinAction(): Promise<ThreadJoinPayload> {
     const query = this.props.calendarQuery();
     return await this.props.joinThread({
       threadID: this.props.threadInfo.id,
       calendarQuery: {
         startDate: query.startDate,
         endDate: query.endDate,
         filters: [
           ...query.filters,
           { type: 'threads', threadIDs: [this.props.threadInfo.id] },
         ],
       },
     });
   }
 
   expandButtons = () => {
     if (this.state.buttonsExpanded || this.isEditMode()) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(1);
     this.setState({ buttonsExpanded: true });
   };
 
   hideButtons() {
     if (
       ChatInputBar.mediaGalleryOpen(this.props) ||
       !this.systemKeyboardShowing ||
       !this.state.buttonsExpanded
     ) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   immediatelyHideButtons() {
     this.expandoButtonsOpen.setValue(0);
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   showMediaGallery = () => {
     const { keyboardState } = this.props;
     invariant(keyboardState, 'keyboardState should be initialized');
     keyboardState.showMediaGallery(this.props.threadInfo);
   };
 
   dismissKeyboard = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 const createThreadLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 type ConnectedChatInputBarBaseProps = {
   ...BaseProps,
   +onInputBarLayout?: (event: LayoutEvent) => mixed,
   +openCamera: () => mixed,
   +navigation?: ChatNavigationProp<'MessageList'>,
 };
 function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {
   const navContext = React.useContext(NavContext);
   const keyboardState = React.useContext(KeyboardContext);
   const inputState = React.useContext(InputStateContext);
   const overlayContext = React.useContext(OverlayContext);
 
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const draft = useSelector(
     state =>
       state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
   );
   const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
   const createThreadLoadingStatus = useSelector(
     createThreadLoadingStatusSelector,
   );
   const threadCreationInProgress = createThreadLoadingStatus === 'loading';
   const calendarQuery = useSelector(state =>
     nonThreadCalendarQuery({
       redux: state,
       navContext,
     }),
   );
   const nextLocalID = useNextLocalID();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const isActive = React.useMemo(
     () => props.threadInfo.id === activeThreadSelector(navContext),
     [props.threadInfo.id, navContext],
   );
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
   const callJoinThread = useJoinThread();
 
   const userSearchIndex = useSelector(userStoreMentionSearchIndex);
 
   const { getChatMentionSearchIndex } = useChatMentionContext();
   const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
 
   const { parentThreadID } = props.threadInfo;
   const parentThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
 
   const userMentionsCandidates = getUserMentionsCandidates(
     props.threadInfo,
     parentThreadInfo,
   );
 
   const chatMentionCandidates = useThreadChatMentionCandidates(
     props.threadInfo,
   );
 
   const messageEditingContext = React.useContext(MessageEditingContext);
 
   const editedMessageInfo = messageEditingContext?.editState.editedMessage;
   const editedMessagePreview = useMessagePreview(
     editedMessageInfo,
     props.threadInfo,
     getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
   );
   const editMessage = useEditMessage();
 
   return (
     <ChatInputBar
       {...props}
       viewerID={viewerID}
       draft={draft}
       joinThreadLoadingStatus={joinThreadLoadingStatus}
       threadCreationInProgress={threadCreationInProgress}
       calendarQuery={calendarQuery}
       nextLocalID={nextLocalID}
       userInfos={userInfos}
       colors={colors}
       styles={styles}
       isActive={isActive}
       keyboardState={keyboardState}
       dispatch={dispatch}
       dispatchActionPromise={dispatchActionPromise}
       joinThread={callJoinThread}
       inputState={inputState}
       userSearchIndex={userSearchIndex}
       userMentionsCandidates={userMentionsCandidates}
       chatMentionSearchIndex={chatMentionSearchIndex}
       chatMentionCandidates={chatMentionCandidates}
       parentThreadInfo={parentThreadInfo}
       editedMessagePreview={editedMessagePreview}
       editedMessageInfo={editedMessageInfo}
       editMessage={editMessage}
       navigation={props.navigation}
       overlayContext={overlayContext}
       messageEditingContext={messageEditingContext}
     />
   );
 }
 
 type DummyChatInputBarProps = {
   ...BaseProps,
   +onHeightMeasured: (height: number) => mixed,
 };
 const noop = () => {};
 function DummyChatInputBar(props: DummyChatInputBarProps): React.Node {
   const { onHeightMeasured, ...restProps } = props;
   const onInputBarLayout = React.useCallback(
     (event: LayoutEvent) => {
       const { height } = event.nativeEvent.layout;
       onHeightMeasured(height);
     },
     [onHeightMeasured],
   );
   return (
     <View pointerEvents="none">
       <ConnectedChatInputBarBase
         {...restProps}
         onInputBarLayout={onInputBarLayout}
         openCamera={noop}
       />
     </View>
   );
 }
 
 type ChatInputBarProps = {
   ...BaseProps,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 };
 const ConnectedChatInputBar: React.ComponentType<ChatInputBarProps> =
   React.memo<ChatInputBarProps>(function ConnectedChatInputBar(
     props: ChatInputBarProps,
   ) {
     const { navigation, route, ...restProps } = props;
     const keyboardState = React.useContext(KeyboardContext);
 
     const { threadInfo } = props;
     const imagePastedCallback = React.useCallback(
       (imagePastedEvent: ImagePasteEvent) => {
         if (threadInfo.id !== imagePastedEvent.threadID) {
           return;
         }
         const pastedImage: PhotoPaste = {
           step: 'photo_paste',
           dimensions: {
             height: imagePastedEvent.height,
             width: imagePastedEvent.width,
           },
           filename: imagePastedEvent.fileName,
           uri: 'file://' + imagePastedEvent.filePath,
           selectTime: 0,
           sendTime: 0,
           retries: 0,
         };
         navigation.navigate<'ImagePasteModal'>({
           name: ImagePasteModalRouteName,
           params: {
             imagePasteStagingInfo: pastedImage,
             thread: threadInfo,
           },
         });
       },
       [navigation, threadInfo],
     );
 
     React.useEffect(() => {
       const imagePasteListener = NativeAppEventEmitter.addListener(
         'imagePasted',
         imagePastedCallback,
       );
       return () => imagePasteListener.remove();
     }, [imagePastedCallback]);
 
     const chatContext = React.useContext(ChatContext);
     invariant(chatContext, 'should be set');
     const { setChatInputBarHeight, deleteChatInputBarHeight } = chatContext;
     const onInputBarLayout = React.useCallback(
       (event: LayoutEvent) => {
         const { height } = event.nativeEvent.layout;
         setChatInputBarHeight(threadInfo.id, height);
       },
       [threadInfo.id, setChatInputBarHeight],
     );
 
     React.useEffect(() => {
       return () => {
         deleteChatInputBarHeight(threadInfo.id);
       };
     }, [deleteChatInputBarHeight, threadInfo.id]);
 
     const openCamera = React.useCallback(() => {
       keyboardState?.dismissKeyboard();
       navigation.navigate<'ChatCameraModal'>({
         name: ChatCameraModalRouteName,
         params: {
           presentedFrom: route.key,
           thread: threadInfo,
         },
       });
     }, [keyboardState, navigation, route.key, threadInfo]);
 
     return (
       <ConnectedChatInputBarBase
         {...restProps}
         onInputBarLayout={onInputBarLayout}
         openCamera={openCamera}
         navigation={navigation}
       />
     );
   });
 
 export { ConnectedChatInputBar as ChatInputBar, DummyChatInputBar };
diff --git a/native/chat/failed-send.react.js b/native/chat/failed-send.react.js
index 3a684e378..d7c9ac35a 100644
--- a/native/chat/failed-send.react.js
+++ b/native/chat/failed-send.react.js
@@ -1,177 +1,177 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { messageID } from 'lib/shared/message-utils.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import { assertComposableRawMessage } from 'lib/types/message-types.js';
 import type { RawComposableMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import { multimediaMessageSendFailed } from './multimedia-message-utils.js';
 import textMessageSendFailed from './text-message-send-failed.js';
 import Button from '../components/button.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
 
 const failedSendHeight = 22;
 
 const unboundStyles = {
   deliveryFailed: {
     color: 'listSeparatorLabel',
     paddingHorizontal: 3,
   },
   failedSendInfo: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'flex-end',
     marginRight: 20,
     paddingTop: 5,
   },
   retrySend: {
     paddingHorizontal: 3,
   },
 };
 
 type BaseProps = {
   +item: ChatMessageInfoItemWithHeight,
 };
 type Props = {
   ...BaseProps,
   +rawMessageInfo: ?RawComposableMessageInfo,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +inputState: ?InputState,
   +parentThreadInfo: ?ThreadInfo,
 };
 class FailedSend extends React.PureComponent<Props> {
   retryingText = false;
   retryingMedia = false;
 
   componentDidUpdate(prevProps: Props) {
     const newItem = this.props.item;
     const prevItem = prevProps.item;
     if (
       newItem.messageShapeType === 'multimedia' &&
       prevItem.messageShapeType === 'multimedia'
     ) {
       const isFailed = multimediaMessageSendFailed(newItem);
       const wasFailed = multimediaMessageSendFailed(prevItem);
       const isDone =
         newItem.messageInfo.id !== null && newItem.messageInfo.id !== undefined;
       const wasDone =
         prevItem.messageInfo.id !== null &&
         prevItem.messageInfo.id !== undefined;
       if ((isFailed && !wasFailed) || (isDone && !wasDone)) {
         this.retryingMedia = false;
       }
     } else if (
       newItem.messageShapeType === 'text' &&
       prevItem.messageShapeType === 'text'
     ) {
       const isFailed = textMessageSendFailed(newItem);
       const wasFailed = textMessageSendFailed(prevItem);
       const isDone =
         newItem.messageInfo.id !== null && newItem.messageInfo.id !== undefined;
       const wasDone =
         prevItem.messageInfo.id !== null &&
         prevItem.messageInfo.id !== undefined;
       if ((isFailed && !wasFailed) || (isDone && !wasDone)) {
         this.retryingText = false;
       }
     }
   }
 
   render(): React.Node {
     if (!this.props.rawMessageInfo) {
       return null;
     }
     const threadColor = {
       color: `#${this.props.item.threadInfo.color}`,
     };
 
     return (
       <View style={this.props.styles.failedSendInfo}>
         <Text style={this.props.styles.deliveryFailed} numberOfLines={1}>
           DELIVERY FAILED.
         </Text>
         <Button onPress={this.retrySend}>
           <Text
             style={{
               ...this.props.styles.retrySend,
               ...threadColor,
             }}
             numberOfLines={1}
           >
             {'RETRY?'}
           </Text>
         </Button>
       </View>
     );
   }
 
   retrySend = () => {
     const { rawMessageInfo } = this.props;
     if (!rawMessageInfo) {
       return;
     }
 
     if (rawMessageInfo.type === messageTypes.TEXT) {
       if (this.retryingText) {
         return;
       }
       this.retryingText = true;
     } else if (
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA
     ) {
       if (this.retryingMedia) {
         return;
       }
       this.retryingMedia = true;
     }
 
     const { inputState } = this.props;
     invariant(
       inputState,
       'inputState should be initialized before user can hit retry',
     );
     const { localID } = rawMessageInfo;
     invariant(localID, 'failed RawMessageInfo should have localID');
     inputState.retryMessage(
       localID,
       this.props.item.threadInfo,
       this.props.parentThreadInfo,
     );
   };
 }
 
 const ConnectedFailedSend: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedFailedSend(props: BaseProps) {
     const id = messageID(props.item.messageInfo);
     const rawMessageInfo = useSelector(state => {
       const message = state.messageStore.messages[id];
       return message ? assertComposableRawMessage(message) : null;
     });
     const styles = useStyles(unboundStyles);
     const inputState = React.useContext(InputStateContext);
     const { parentThreadID } = props.item.threadInfo;
     const parentThreadInfo = useSelector(state =>
       parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
     );
     return (
       <FailedSend
         {...props}
         rawMessageInfo={rawMessageInfo}
         styles={styles}
         inputState={inputState}
         parentThreadInfo={parentThreadInfo}
       />
     );
   });
 
 export { ConnectedFailedSend as FailedSend, failedSendHeight };
diff --git a/native/chat/message-list-container.react.js b/native/chat/message-list-container.react.js
index 9a6f87a97..97a22351c 100644
--- a/native/chat/message-list-container.react.js
+++ b/native/chat/message-list-container.react.js
@@ -1,447 +1,447 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome5.js';
 import { useNavigationState } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text } from 'react-native';
 
 import genesis from 'lib/facts/genesis.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import {
   userInfoSelectorForPotentialMembers,
   userSearchIndexForPotentialMembers,
 } from 'lib/selectors/user-selectors.js';
 import {
   getPotentialMemberItems,
   useSearchUsers,
 } from 'lib/shared/search-utils.js';
 import {
   useExistingThreadInfoFinder,
   pendingThreadType,
 } from 'lib/shared/thread-utils.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import type { AccountUserInfo, UserListItem } from 'lib/types/user-types.js';
 
 import { type MessagesMeasurer, useHeightMeasurer } from './chat-context.js';
 import { ChatInputBar } from './chat-input-bar.react.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import {
   type NativeChatMessageItem,
   useNativeMessageListData,
 } from './message-data.react.js';
 import MessageListThreadSearch from './message-list-thread-search.react.js';
 import { MessageListContextProvider } from './message-list-types.js';
 import MessageList from './message-list.react.js';
 import ParentThreadHeader from './parent-thread-header.react.js';
 import ContentLoading from '../components/content-loading.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import {
   ThreadSettingsRouteName,
   MessageResultsScreenRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import type { ChatMessageItemWithHeight } from '../types/chat-types.js';
 
 const unboundStyles = {
   pinnedCountBanner: {
     backgroundColor: 'panelForeground',
     height: 30,
     flexDirection: 'row',
     textAlign: 'center',
     justifyContent: 'center',
     alignItems: 'center',
   },
   pinnedCountText: {
     color: 'panelBackgroundLabel',
     marginRight: 5,
   },
   container: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   threadContent: {
     flex: 1,
   },
   hiddenThreadContent: {
     height: 0,
     opacity: 0,
   },
 };
 
 type BaseProps = {
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +usernameInputText: string,
   +updateUsernameInput: (text: string) => void,
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
   +updateTagInput: (items: $ReadOnlyArray<AccountUserInfo>) => void,
   +resolveToUser: (user: AccountUserInfo) => void,
   +userSearchResults: $ReadOnlyArray<UserListItem>,
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +genesisThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   +messageListData: ?$ReadOnlyArray<NativeChatMessageItem>,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
   +measureMessages: MessagesMeasurer,
 };
 type State = {
   +listDataWithHeights: ?$ReadOnlyArray<ChatMessageItemWithHeight>,
 };
 class MessageListContainer extends React.PureComponent<Props, State> {
   state: State = {
     listDataWithHeights: null,
   };
   pendingListDataWithHeights: ?$ReadOnlyArray<ChatMessageItemWithHeight>;
 
   get frozen(): boolean {
     const { overlayContext } = this.props;
     invariant(
       overlayContext,
       'MessageListContainer should have OverlayContext',
     );
     return overlayContext.scrollBlockingModalStatus !== 'closed';
   }
 
   setListData = (
     listDataWithHeights: $ReadOnlyArray<ChatMessageItemWithHeight>,
   ) => {
     this.setState({ listDataWithHeights });
   };
 
   componentDidMount() {
     this.props.measureMessages(
       this.props.messageListData,
       this.props.threadInfo,
       this.setListData,
     );
   }
 
   componentDidUpdate(prevProps: Props) {
     const oldListData = prevProps.messageListData;
     const newListData = this.props.messageListData;
     if (!newListData && oldListData) {
       this.setState({ listDataWithHeights: null });
     }
 
     if (
       oldListData !== newListData ||
       prevProps.threadInfo !== this.props.threadInfo ||
       prevProps.measureMessages !== this.props.measureMessages
     ) {
       this.props.measureMessages(
         newListData,
         this.props.threadInfo,
         this.allHeightsMeasured,
       );
     }
 
     if (!this.frozen && this.pendingListDataWithHeights) {
       this.setState({ listDataWithHeights: this.pendingListDataWithHeights });
       this.pendingListDataWithHeights = undefined;
     }
   }
 
   render(): React.Node {
     const { threadInfo, styles } = this.props;
     const { listDataWithHeights } = this.state;
     const { searching } = this.props.route.params;
 
     let searchComponent = null;
     if (searching) {
       const { userInfoInputArray, genesisThreadInfo } = this.props;
       // It's technically possible for the client to be missing the Genesis
       // ThreadInfo when it first opens up (before the server delivers it)
       let parentThreadHeader;
       if (genesisThreadInfo) {
         parentThreadHeader = (
           <ParentThreadHeader
             parentThreadInfo={genesisThreadInfo}
             childThreadType={pendingThreadType(userInfoInputArray.length)}
           />
         );
       }
       searchComponent = (
         <>
           {parentThreadHeader}
           <MessageListThreadSearch
             usernameInputText={this.props.usernameInputText}
             updateUsernameInput={this.props.updateUsernameInput}
             userInfoInputArray={userInfoInputArray}
             updateTagInput={this.props.updateTagInput}
             resolveToUser={this.props.resolveToUser}
             userSearchResults={this.props.userSearchResults}
           />
         </>
       );
     }
 
     const showMessageList =
       !searching || this.props.userInfoInputArray.length > 0;
     let messageList;
     if (showMessageList && listDataWithHeights) {
       messageList = (
         <MessageList
           threadInfo={threadInfo}
           messageListData={listDataWithHeights}
           navigation={this.props.navigation}
           route={this.props.route}
         />
       );
     } else if (showMessageList) {
       messageList = (
         <ContentLoading fillType="flex" colors={this.props.colors} />
       );
     }
     const threadContentStyles = showMessageList
       ? [styles.threadContent]
       : [styles.hiddenThreadContent];
     const pointerEvents = showMessageList ? 'auto' : 'none';
     const threadContent = (
       <View style={threadContentStyles} pointerEvents={pointerEvents}>
         {messageList}
         <ChatInputBar
           threadInfo={threadInfo}
           navigation={this.props.navigation}
           route={this.props.route}
         />
       </View>
     );
 
     return (
       <View style={styles.container}>
         {searchComponent}
         {threadContent}
       </View>
     );
   }
 
   allHeightsMeasured = (
     listDataWithHeights: $ReadOnlyArray<ChatMessageItemWithHeight>,
   ) => {
     if (this.frozen) {
       this.pendingListDataWithHeights = listDataWithHeights;
     } else {
       this.setState({ listDataWithHeights });
     }
   };
 }
 
 const ConnectedMessageListContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedMessageListContainer(
     props: BaseProps,
   ) {
     const [usernameInputText, setUsernameInputText] = React.useState('');
     const [userInfoInputArray, setUserInfoInputArray] = React.useState<
       $ReadOnlyArray<AccountUserInfo>,
     >([]);
 
     const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
     const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
 
     const serverSearchResults = useSearchUsers(usernameInputText);
 
     const userSearchResults = React.useMemo(() => {
       return getPotentialMemberItems({
         text: usernameInputText,
         userInfos: otherUserInfos,
         searchIndex: userSearchIndex,
         excludeUserIDs: userInfoInputArray.map(userInfo => userInfo.id),
         includeServerSearchUsers: serverSearchResults,
       });
     }, [
       usernameInputText,
       otherUserInfos,
       userSearchIndex,
       userInfoInputArray,
       serverSearchResults,
     ]);
 
     const [baseThreadInfo, setBaseThreadInfo] = React.useState(
       props.route.params.threadInfo,
     );
 
     const existingThreadInfoFinder =
       useExistingThreadInfoFinder(baseThreadInfo);
 
     const isSearching = !!props.route.params.searching;
     const threadInfo = React.useMemo(
       () =>
         existingThreadInfoFinder({
           searching: isSearching,
           userInfoInputArray,
         }),
       [existingThreadInfoFinder, isSearching, userInfoInputArray],
     );
     invariant(
       threadInfo,
       'threadInfo must be specified in messageListContainer',
     );
 
     const inputState = React.useContext(InputStateContext);
     invariant(inputState, 'inputState should be set in MessageListContainer');
 
     const isFocused = props.navigation.isFocused();
     const { setPendingThreadUpdateHandler } = inputState;
     React.useEffect(() => {
       if (!isFocused) {
         return undefined;
       }
       setPendingThreadUpdateHandler(threadInfo.id, setBaseThreadInfo);
       return () => {
         setPendingThreadUpdateHandler(threadInfo.id, undefined);
       };
     }, [setPendingThreadUpdateHandler, isFocused, threadInfo.id]);
 
     const { setParams } = props.navigation;
     const navigationStack = useNavigationState(state => state.routes);
     React.useEffect(() => {
       const topRoute = navigationStack[navigationStack.length - 1];
       if (topRoute?.name !== ThreadSettingsRouteName) {
         return;
       }
       setBaseThreadInfo(threadInfo);
       if (isSearching) {
         setParams({ searching: false });
       }
     }, [isSearching, navigationStack, setParams, threadInfo]);
 
     const hideSearch = React.useCallback(() => {
       setBaseThreadInfo(threadInfo);
       setParams({ searching: false });
     }, [setParams, threadInfo]);
     React.useEffect(() => {
       if (!isSearching) {
         return undefined;
       }
       inputState.registerSendCallback(hideSearch);
       return () => inputState.unregisterSendCallback(hideSearch);
     }, [hideSearch, inputState, isSearching]);
 
     React.useEffect(() => {
       setParams({ threadInfo });
     }, [setParams, threadInfo]);
 
     const updateTagInput = React.useCallback(
       (input: $ReadOnlyArray<AccountUserInfo>) => setUserInfoInputArray(input),
       [],
     );
     const updateUsernameInput = React.useCallback(
       (text: string) => setUsernameInputText(text),
       [],
     );
     const { editInputMessage } = inputState;
     const resolveToUser = React.useCallback(
       (user: AccountUserInfo) => {
         const resolvedThreadInfo = existingThreadInfoFinder({
           searching: true,
           userInfoInputArray: [user],
         });
         invariant(
           resolvedThreadInfo,
           'resolvedThreadInfo must be specified in messageListContainer',
         );
         editInputMessage({ message: '', mode: 'prepend' });
         setBaseThreadInfo(resolvedThreadInfo);
         setParams({ searching: false, threadInfo: resolvedThreadInfo });
       },
       [existingThreadInfoFinder, editInputMessage, setParams],
     );
 
     const messageListData = useNativeMessageListData({
       searching: isSearching,
       userInfoInputArray,
       threadInfo,
     });
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const overlayContext = React.useContext(OverlayContext);
     const measureMessages = useHeightMeasurer();
 
     const genesisThreadInfo = useSelector(
       state => threadInfoSelector(state)[genesis.id],
     );
 
     let bannerText;
     if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) {
       bannerText = '';
     } else {
       const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages';
       bannerText = `${threadInfo.pinnedCount} pinned ${messageNoun}`;
     }
 
     const navigateToMessageResults = React.useCallback(() => {
       props.navigation.navigate<'MessageResultsScreen'>({
         name: MessageResultsScreenRouteName,
         params: {
           threadInfo,
         },
         key: `MessageResultsScreen${threadInfo.id}`,
       });
     }, [props.navigation, threadInfo]);
 
     const pinnedCountBanner = React.useMemo(() => {
       if (!bannerText) {
         return null;
       }
 
       return (
         <View style={styles.pinnedCountBanner}>
           <Text
             onPress={navigateToMessageResults}
             style={styles.pinnedCountText}
           >
             {bannerText}
           </Text>
           <Icon
             name="chevron-right"
             size={12}
             color={colors.panelBackgroundLabel}
           />
         </View>
       );
     }, [
       navigateToMessageResults,
       bannerText,
       styles.pinnedCountBanner,
       styles.pinnedCountText,
       colors.panelBackgroundLabel,
     ]);
 
     return (
       <MessageListContextProvider threadInfo={threadInfo}>
         {pinnedCountBanner}
         <MessageListContainer
           {...props}
           usernameInputText={usernameInputText}
           updateUsernameInput={updateUsernameInput}
           userInfoInputArray={userInfoInputArray}
           updateTagInput={updateTagInput}
           resolveToUser={resolveToUser}
           userSearchResults={userSearchResults}
           threadInfo={threadInfo}
           genesisThreadInfo={genesisThreadInfo}
           messageListData={messageListData}
           colors={colors}
           styles={styles}
           overlayContext={overlayContext}
           measureMessages={measureMessages}
         />
       </MessageListContextProvider>
     );
   });
 
 export default ConnectedMessageListContainer;
diff --git a/native/chat/message-list-header-title.react.js b/native/chat/message-list-header-title.react.js
index b9879e60c..c68eb62ca 100644
--- a/native/chat/message-list-header-title.react.js
+++ b/native/chat/message-list-header-title.react.js
@@ -1,106 +1,106 @@
 // @flow
 
 import type { HeaderTitleInputProps } from '@react-navigation/core';
 import { HeaderTitle } from '@react-navigation/elements';
 import * as React from 'react';
 import { View } from 'react-native';
 
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 import { firstLine } from 'lib/utils/string-utils.js';
 
 import type { ChatNavigationProp } from './chat.react.js';
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
 import Button from '../components/button.react.js';
 import { ThreadSettingsRouteName } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
 
 const unboundStyles = {
   avatarContainer: {
     marginRight: 8,
   },
   button: {
     flex: 1,
   },
   container: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +navigate: $PropertyType<ChatNavigationProp<'MessageList'>, 'navigate'>,
   +isSearchEmpty: boolean,
   +areSettingsEnabled: boolean,
   ...HeaderTitleInputProps,
 };
 type Props = {
   ...BaseProps,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +title: string,
 };
 class MessageListHeaderTitle extends React.PureComponent<Props> {
   render(): React.Node {
     const {
       threadInfo,
       navigate,
       isSearchEmpty,
       areSettingsEnabled,
       styles,
       title,
       ...rest
     } = this.props;
 
     let avatar;
     if (!isSearchEmpty) {
       avatar = (
         <View style={styles.avatarContainer}>
           <ThreadAvatar size="S" threadInfo={threadInfo} />
         </View>
       );
     }
 
     return (
       <Button
         onPress={this.onPress}
         style={styles.button}
         androidBorderlessRipple={true}
         disabled={!areSettingsEnabled}
       >
         <View style={styles.container}>
           {avatar}
           <HeaderTitle {...rest}>{firstLine(title)}</HeaderTitle>
         </View>
       </Button>
     );
   }
 
   onPress = () => {
     const { threadInfo } = this.props;
     this.props.navigate<'ThreadSettings'>({
       name: ThreadSettingsRouteName,
       params: { threadInfo },
       key: `${ThreadSettingsRouteName}${threadInfo.id}`,
     });
   };
 }
 
 const ConnectedMessageListHeaderTitle: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedMessageListHeaderTitle(
     props: BaseProps,
   ) {
     const styles = useStyles(unboundStyles);
 
     const { uiName } = useResolvedThreadInfo(props.threadInfo);
 
     const { isSearchEmpty } = props;
 
     const title = isSearchEmpty ? 'New Message' : uiName;
 
     return <MessageListHeaderTitle {...props} styles={styles} title={title} />;
   });
 
 export default ConnectedMessageListHeaderTitle;
diff --git a/native/chat/message-list.react.js b/native/chat/message-list.react.js
index 5e3896cb9..7b80070d2 100644
--- a/native/chat/message-list.react.js
+++ b/native/chat/message-list.react.js
@@ -1,374 +1,374 @@
 // @flow
 
 import invariant from 'invariant';
 import _find from 'lodash/fp/find.js';
 import * as React from 'react';
 import { View, TouchableWithoutFeedback } from 'react-native';
 import { createSelector } from 'reselect';
 
 import {
   fetchMessagesBeforeCursorActionTypes,
   useFetchMessagesBeforeCursor,
   fetchMostRecentMessagesActionTypes,
   useFetchMostRecentMessages,
   type FetchMostRecentMessagesInput,
   type FetchMessagesBeforeCursorInput,
 } from 'lib/actions/message-actions.js';
 import { useOldestMessageServerID } from 'lib/hooks/message-hooks.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import { messageKey } from 'lib/shared/message-utils.js';
 import { useWatchThread } from 'lib/shared/thread-utils.js';
 import type { FetchMessageInfosPayload } from 'lib/types/message-types.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import ChatList from './chat-list.react.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import Message from './message.react.js';
 import RelationshipPrompt from './relationship-prompt.react.js';
 import ListLoadingIndicator from '../components/list-loading-indicator.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import { defaultStackScreenOptions } from '../navigation/options.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   useStyles,
   type IndicatorStyle,
   useIndicatorStyle,
 } from '../themes/colors.js';
 import type {
   ChatMessageInfoItemWithHeight,
   ChatMessageItemWithHeight,
 } from '../types/chat-types.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 import type { ViewableItemsChange } from '../types/react-native.js';
 
 const unboundStyles = {
   container: {
     backgroundColor: 'listBackground',
     flex: 1,
   },
   header: {
     height: 12,
   },
   listLoadingIndicator: {
     flex: 1,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +messageListData: $ReadOnlyArray<ChatMessageItemWithHeight>,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 };
 type Props = {
   ...BaseProps,
   +startReached: boolean,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +indicatorStyle: IndicatorStyle,
   +dispatchActionPromise: DispatchActionPromise,
   +fetchMessagesBeforeCursor: (
     input: FetchMessagesBeforeCursorInput,
   ) => Promise<FetchMessageInfosPayload>,
   +fetchMostRecentMessages: (
     input: FetchMostRecentMessagesInput,
   ) => Promise<FetchMessageInfosPayload>,
   +overlayContext: ?OverlayContextType,
   +keyboardState: ?KeyboardState,
   +oldestMessageServerID: ?string,
 };
 type State = {
   +focusedMessageKey: ?string,
   +messageListVerticalBounds: ?VerticalBounds,
   +loadingFromScroll: boolean,
 };
 type PropsAndState = {
   ...Props,
   ...State,
 };
 type FlatListExtraData = {
   messageListVerticalBounds: ?VerticalBounds,
   focusedMessageKey: ?string,
   navigation: ChatNavigationProp<'MessageList'>,
   route: NavigationRoute<'MessageList'>,
 };
 class MessageList extends React.PureComponent<Props, State> {
   state: State = {
     focusedMessageKey: null,
     messageListVerticalBounds: null,
     loadingFromScroll: false,
   };
   flatListContainer: ?React.ElementRef<typeof View>;
 
   flatListExtraDataSelector: PropsAndState => FlatListExtraData =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.messageListVerticalBounds,
       (propsAndState: PropsAndState) => propsAndState.focusedMessageKey,
       (propsAndState: PropsAndState) => propsAndState.navigation,
       (propsAndState: PropsAndState) => propsAndState.route,
       (
         messageListVerticalBounds: ?VerticalBounds,
         focusedMessageKey: ?string,
         navigation: ChatNavigationProp<'MessageList'>,
         route: NavigationRoute<'MessageList'>,
       ) => ({
         messageListVerticalBounds,
         focusedMessageKey,
         navigation,
         route,
       }),
     );
 
   get flatListExtraData(): FlatListExtraData {
     return this.flatListExtraDataSelector({ ...this.props, ...this.state });
   }
 
   static getOverlayContext(props: Props): OverlayContextType {
     const { overlayContext } = props;
     invariant(overlayContext, 'MessageList should have OverlayContext');
     return overlayContext;
   }
 
   static scrollDisabled(props: Props): boolean {
     const overlayContext = MessageList.getOverlayContext(props);
     return overlayContext.scrollBlockingModalStatus !== 'closed';
   }
 
   static modalOpen(props: Props): boolean {
     const overlayContext = MessageList.getOverlayContext(props);
     return overlayContext.scrollBlockingModalStatus === 'open';
   }
 
   componentDidUpdate(prevProps: Props) {
     const modalIsOpen = MessageList.modalOpen(this.props);
     const modalWasOpen = MessageList.modalOpen(prevProps);
     if (!modalIsOpen && modalWasOpen) {
       this.setState({ focusedMessageKey: null });
     }
 
     if (defaultStackScreenOptions.gestureEnabled) {
       const scrollIsDisabled = MessageList.scrollDisabled(this.props);
       const scrollWasDisabled = MessageList.scrollDisabled(prevProps);
       if (!scrollWasDisabled && scrollIsDisabled) {
         this.props.navigation.setOptions({ gestureEnabled: false });
       } else if (scrollWasDisabled && !scrollIsDisabled) {
         this.props.navigation.setOptions({ gestureEnabled: true });
       }
     }
   }
 
   dismissKeyboard = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 
   renderItem = (row: { item: ChatMessageItemWithHeight, ... }): React.Node => {
     if (row.item.itemType === 'loader') {
       return (
         <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
           <View style={this.props.styles.listLoadingIndicator}>
             <ListLoadingIndicator />
           </View>
         </TouchableWithoutFeedback>
       );
     }
     const messageInfoItem: ChatMessageInfoItemWithHeight = row.item;
     const { messageListVerticalBounds, focusedMessageKey, navigation, route } =
       this.flatListExtraData;
     const focused =
       messageKey(messageInfoItem.messageInfo) === focusedMessageKey;
     return (
       <Message
         item={messageInfoItem}
         focused={focused}
         navigation={navigation}
         route={route}
         toggleFocus={this.toggleMessageFocus}
         verticalBounds={messageListVerticalBounds}
         shouldDisplayPinIndicator={true}
       />
     );
   };
 
   toggleMessageFocus = (inMessageKey: string) => {
     if (this.state.focusedMessageKey === inMessageKey) {
       this.setState({ focusedMessageKey: null });
     } else {
       this.setState({ focusedMessageKey: inMessageKey });
     }
   };
 
   // Actually header, it's just that our FlatList is inverted
   ListFooterComponent = (): React.Node => (
     <View style={this.props.styles.header} />
   );
 
   render(): React.Node {
     const { messageListData, startReached } = this.props;
     const footer = startReached ? this.ListFooterComponent : undefined;
     let relationshipPrompt = null;
     if (this.props.threadInfo.type === threadTypes.PERSONAL) {
       relationshipPrompt = (
         <RelationshipPrompt
           pendingPersonalThreadUserInfo={
             this.props.route.params.pendingPersonalThreadUserInfo
           }
           threadInfo={this.props.threadInfo}
         />
       );
     }
     return (
       <View
         style={this.props.styles.container}
         ref={this.flatListContainerRef}
         onLayout={this.onFlatListContainerLayout}
       >
         {relationshipPrompt}
         <ChatList
           navigation={this.props.navigation}
           inverted={true}
           data={messageListData}
           renderItem={this.renderItem}
           onViewableItemsChanged={this.onViewableItemsChanged}
           ListFooterComponent={footer}
           scrollsToTop={false}
           scrollEnabled={!MessageList.scrollDisabled(this.props)}
           extraData={this.flatListExtraData}
           indicatorStyle={this.props.indicatorStyle}
           keyboardShouldPersistTaps="always"
         />
       </View>
     );
   }
 
   flatListContainerRef = (
     flatListContainer: ?React.ElementRef<typeof View>,
   ) => {
     this.flatListContainer = flatListContainer;
   };
 
   onFlatListContainerLayout = () => {
     const { flatListContainer } = this;
     if (!flatListContainer) {
       return;
     }
     flatListContainer.measure((x, y, width, height, pageX, pageY) => {
       if (
         height === null ||
         height === undefined ||
         pageY === null ||
         pageY === undefined
       ) {
         return;
       }
       this.setState({ messageListVerticalBounds: { height, y: pageY } });
     });
   };
 
   onViewableItemsChanged = (info: ViewableItemsChange) => {
     if (this.state.focusedMessageKey) {
       let focusedMessageVisible = false;
       for (const token of info.viewableItems) {
         if (
           token.item.itemType === 'message' &&
           messageKey(token.item.messageInfo) === this.state.focusedMessageKey
         ) {
           focusedMessageVisible = true;
           break;
         }
       }
       if (!focusedMessageVisible) {
         this.setState({ focusedMessageKey: null });
       }
     }
 
     const loader = _find({ key: 'loader' })(info.viewableItems);
     if (!loader || this.state.loadingFromScroll) {
       return;
     }
 
     this.setState({ loadingFromScroll: true });
     const { oldestMessageServerID } = this.props;
     const threadID = this.props.threadInfo.id;
 
     (async () => {
       try {
         if (oldestMessageServerID) {
           await this.props.dispatchActionPromise(
             fetchMessagesBeforeCursorActionTypes,
             this.props.fetchMessagesBeforeCursor({
               threadID,
               beforeMessageID: oldestMessageServerID,
             }),
           );
         } else {
           await this.props.dispatchActionPromise(
             fetchMostRecentMessagesActionTypes,
             this.props.fetchMostRecentMessages({ threadID }),
           );
         }
       } finally {
         this.setState({ loadingFromScroll: false });
       }
     })();
   };
 }
 
 registerFetchKey(fetchMessagesBeforeCursorActionTypes);
 registerFetchKey(fetchMostRecentMessagesActionTypes);
 
 const ConnectedMessageList: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedMessageList(props: BaseProps) {
     const keyboardState = React.useContext(KeyboardContext);
     const overlayContext = React.useContext(OverlayContext);
 
     const threadID = props.threadInfo.id;
     const startReached = useSelector(
       state =>
         !!(
           state.messageStore.threads[threadID] &&
           state.messageStore.threads[threadID].startReached
         ),
     );
 
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callFetchMessagesBeforeCursor = useFetchMessagesBeforeCursor();
     const callFetchMostRecentMessages = useFetchMostRecentMessages();
 
     const oldestMessageServerID = useOldestMessageServerID(threadID);
 
     useWatchThread(props.threadInfo);
 
     return (
       <MessageList
         {...props}
         startReached={startReached}
         styles={styles}
         indicatorStyle={indicatorStyle}
         dispatchActionPromise={dispatchActionPromise}
         fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
         fetchMostRecentMessages={callFetchMostRecentMessages}
         overlayContext={overlayContext}
         keyboardState={keyboardState}
         oldestMessageServerID={oldestMessageServerID}
       />
     );
   });
 
 export default ConnectedMessageList;
diff --git a/native/chat/settings/color-selector-modal.react.js b/native/chat/settings/color-selector-modal.react.js
index b52fb1702..dd45a234a 100644
--- a/native/chat/settings/color-selector-modal.react.js
+++ b/native/chat/settings/color-selector-modal.react.js
@@ -1,191 +1,191 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import * as React from 'react';
 import { TouchableHighlight } from 'react-native';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import {
   type ThreadInfo,
   type ChangeThreadSettingsPayload,
   type UpdateThreadRequest,
 } from 'lib/types/thread-types.js';
 import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import ColorSelector from '../../components/color-selector.react.js';
 import Modal from '../../components/modal.react.js';
 import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
 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,
   +color: string,
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +setColor: (color: string) => void,
 };
 
 const unboundStyles = {
   closeButton: {
     borderRadius: 3,
     height: 18,
     position: 'absolute',
     right: 5,
     top: 5,
     width: 18,
   },
   closeButtonIcon: {
     color: 'modalBackgroundSecondaryLabel',
     left: 3,
     position: 'absolute',
   },
   colorSelector: {
     bottom: 10,
     left: 10,
     position: 'absolute',
     right: 10,
     top: 10,
   },
   colorSelectorContainer: {
     backgroundColor: 'modalBackground',
     borderRadius: 5,
     flex: 0,
     marginHorizontal: 15,
     marginVertical: 20,
   },
 };
 
 type BaseProps = {
   +navigation: RootNavigationProp<'ColorSelectorModal'>,
   +route: NavigationRoute<'ColorSelectorModal'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +windowWidth: number,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeThreadSettings: (
     request: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
 };
 function ColorSelectorModal(props: Props): React.Node {
   const {
     changeThreadSettings: updateThreadSettings,
     dispatchActionPromise,
     windowWidth,
   } = props;
   const { threadInfo, setColor } = props.route.params;
 
   const close = props.navigation.goBackOnce;
 
   const onErrorAcknowledged = React.useCallback(() => {
     setColor(threadInfo.color);
   }, [setColor, threadInfo.color]);
 
   const editColor = React.useCallback(
     async (newColor: string) => {
       const threadID = threadInfo.id;
       try {
         return await updateThreadSettings({
           threadID,
           changes: { color: newColor },
         });
       } catch (e) {
         Alert.alert(
           'Unknown error',
           'Uhh... try again?',
           [{ text: 'OK', onPress: onErrorAcknowledged }],
           { cancelable: false },
         );
         throw e;
       }
     },
     [onErrorAcknowledged, threadInfo.id, updateThreadSettings],
   );
 
   const onColorSelected = React.useCallback(
     (color: string) => {
       const colorEditValue = color.substr(1);
       setColor(colorEditValue);
       close();
 
       const action = changeThreadSettingsActionTypes.started;
       const threadID = props.route.params.threadInfo.id;
       dispatchActionPromise(
         changeThreadSettingsActionTypes,
         editColor(colorEditValue),
         {
           customKeyName: `${action}:${threadID}:color`,
         },
       );
     },
     [
       setColor,
       close,
       dispatchActionPromise,
       editColor,
       props.route.params.threadInfo.id,
     ],
   );
 
   const { colorSelectorContainer, closeButton, closeButtonIcon } = props.styles;
   // Based on the assumption we are always in portrait,
   // and consequently width is the lowest dimensions
   const modalStyle = React.useMemo(
     () => [colorSelectorContainer, { height: 0.75 * windowWidth }],
     [colorSelectorContainer, windowWidth],
   );
 
   const { modalIosHighlightUnderlay } = props.colors;
   const { color } = props.route.params;
   return (
     <Modal modalStyle={modalStyle}>
       <ColorSelector
         currentColor={color}
         windowWidth={windowWidth}
         onColorSelected={onColorSelected}
       />
       <TouchableHighlight
         onPress={close}
         style={closeButton}
         underlayColor={modalIosHighlightUnderlay}
       >
         <Icon name="close" size={16} style={closeButtonIcon} />
       </TouchableHighlight>
     </Modal>
   );
 }
 
 const ConnectedColorSelectorModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedColorSelectorModal(props: BaseProps) {
     const styles = useStyles(unboundStyles);
     const colors = useColors();
     const windowWidth = useSelector(state => state.dimensions.width);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callChangeThreadSettings = useChangeThreadSettings();
 
     return (
       <ColorSelectorModal
         {...props}
         styles={styles}
         colors={colors}
         windowWidth={windowWidth}
         dispatchActionPromise={dispatchActionPromise}
         changeThreadSettings={callChangeThreadSettings}
       />
     );
   });
 
 export default ConnectedColorSelectorModal;
diff --git a/native/chat/settings/compose-subchannel-modal.react.js b/native/chat/settings/compose-subchannel-modal.react.js
index f28dbe218..640d5e579 100644
--- a/native/chat/settings/compose-subchannel-modal.react.js
+++ b/native/chat/settings/compose-subchannel-modal.react.js
@@ -1,153 +1,153 @@
 // @flow
 
 import IonIcon from '@expo/vector-icons/Ionicons.js';
 import * as React from 'react';
 import { Text } from 'react-native';
 
 import { threadTypeDescriptions } from 'lib/shared/thread-utils.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 
 import Button from '../../components/button.react.js';
 import Modal from '../../components/modal.react.js';
 import SWMansionIcon from '../../components/swmansion-icon.react.js';
 import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { ComposeSubchannelRouteName } from '../../navigation/route-names.js';
 import { type Colors, useStyles, useColors } from '../../themes/colors.js';
 
 export type ComposeSubchannelModalParams = {
   +presentedFrom: string,
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 
 const unboundStyles = {
   forwardIcon: {
     color: 'modalForegroundSecondaryLabel',
     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,
   },
 };
 
 type BaseProps = {
   +navigation: RootNavigationProp<'ComposeSubchannelModal'>,
   +route: NavigationRoute<'ComposeSubchannelModal'>,
 };
 type Props = {
   ...BaseProps,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
 };
 class ComposeSubchannelModal extends React.PureComponent<Props> {
   render(): React.Node {
     return (
       <Modal modalStyle={this.props.styles.modal}>
         <Text style={this.props.styles.visibility}>Chat type</Text>
         <Button style={this.props.styles.option} onPress={this.onPressOpen}>
           <SWMansionIcon
             name="globe-1"
             size={32}
             style={this.props.styles.visibilityIcon}
           />
           <Text style={this.props.styles.optionText}>Open</Text>
           <Text style={this.props.styles.optionExplanation}>
             {threadTypeDescriptions[threadTypes.COMMUNITY_OPEN_SUBTHREAD]}
           </Text>
           <IonIcon
             name="ios-arrow-forward"
             size={20}
             style={this.props.styles.forwardIcon}
           />
         </Button>
         <Button style={this.props.styles.option} onPress={this.onPressSecret}>
           <SWMansionIcon
             name="lock-on"
             size={32}
             style={this.props.styles.visibilityIcon}
           />
           <Text style={this.props.styles.optionText}>Secret</Text>
           <Text style={this.props.styles.optionExplanation}>
             {threadTypeDescriptions[threadTypes.COMMUNITY_SECRET_SUBTHREAD]}
           </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<'ComposeSubchannel'>({
       name: ComposeSubchannelRouteName,
       params: {
         threadType: threadTypes.COMMUNITY_OPEN_SUBTHREAD,
         parentThreadInfo: threadInfo,
       },
       key:
         `${ComposeSubchannelRouteName}|` +
         `${threadInfo.id}|${threadTypes.COMMUNITY_OPEN_SUBTHREAD}`,
     });
   };
 
   onPressSecret = () => {
     const threadInfo = this.props.route.params.threadInfo;
     this.props.navigation.navigate<'ComposeSubchannel'>({
       name: ComposeSubchannelRouteName,
       params: {
         threadType: threadTypes.COMMUNITY_SECRET_SUBTHREAD,
         parentThreadInfo: threadInfo,
       },
       key:
         `${ComposeSubchannelRouteName}|` +
         `${threadInfo.id}|${threadTypes.COMMUNITY_SECRET_SUBTHREAD}`,
     });
   };
 }
 
 const ConnectedComposeSubchannelModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedComposeSubchannelModal(
     props: BaseProps,
   ) {
     const styles = useStyles(unboundStyles);
     const colors = useColors();
 
     return (
       <ComposeSubchannelModal {...props} styles={styles} colors={colors} />
     );
   });
 
 export default ConnectedComposeSubchannelModal;
diff --git a/native/chat/settings/delete-thread.react.js b/native/chat/settings/delete-thread.react.js
index c87f3b368..6b67ed04e 100644
--- a/native/chat/settings/delete-thread.react.js
+++ b/native/chat/settings/delete-thread.react.js
@@ -1,297 +1,297 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   View,
   TextInput as BaseTextInput,
   ActivityIndicator,
 } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import {
   deleteThreadActionTypes,
   useDeleteThread,
 } from 'lib/actions/thread-actions.js';
 import type { DeleteThreadInput } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import {
   threadInfoSelector,
   containedThreadInfos,
 } from 'lib/selectors/thread-selectors.js';
 import {
   identifyInvalidatedThreads,
   getThreadsToDeleteText,
 } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type {
   MinimallyEncodedResolvedThreadInfo,
   MinimallyEncodedThreadInfo,
 } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type {
   ThreadInfo,
   ResolvedThreadInfo,
   LeaveThreadPayload,
 } from 'lib/types/thread-types.js';
 import {
   useDispatchActionPromise,
   type DispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import Button from '../../components/button.react.js';
 import { clearThreadsActionType } from '../../navigation/action-types.js';
 import {
   NavContext,
   type NavAction,
 } from '../../navigation/navigation-context.js';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 import Alert from '../../utils/alert.js';
 import type { ChatNavigationProp } from '../chat.react.js';
 
 export type DeleteThreadParams = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 
 const unboundStyles = {
   deleteButton: {
     backgroundColor: 'vibrantRedButton',
     borderRadius: 5,
     flex: 1,
     marginHorizontal: 24,
     marginVertical: 12,
     padding: 12,
   },
   deleteText: {
     color: 'white',
     fontSize: 18,
     textAlign: 'center',
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   input: {
     color: 'panelForegroundLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     paddingVertical: 0,
     borderBottomColor: 'transparent',
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
     marginBottom: 24,
     paddingHorizontal: 24,
     paddingVertical: 12,
   },
   warningText: {
     color: 'panelForegroundLabel',
     fontSize: 16,
     marginBottom: 24,
     marginHorizontal: 24,
     textAlign: 'center',
   },
 };
 
 type BaseProps = {
   +navigation: ChatNavigationProp<'DeleteThread'>,
   +route: NavigationRoute<'DeleteThread'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
   +shouldUseDeleteConfirmationAlert: boolean,
   +loadingStatus: LoadingStatus,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +deleteThread: (input: DeleteThreadInput) => Promise<LeaveThreadPayload>,
   // withNavContext
   +navDispatch: (action: NavAction) => void,
 };
 class DeleteThread extends React.PureComponent<Props> {
   mounted = false;
   passwordInput: ?React.ElementRef<typeof BaseTextInput>;
 
   componentDidMount() {
     this.mounted = true;
   }
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
   render(): React.Node {
     const buttonContent =
       this.props.loadingStatus === 'loading' ? (
         <ActivityIndicator size="small" color="white" />
       ) : (
         <Text style={this.props.styles.deleteText}>Delete chat</Text>
       );
     const { threadInfo } = this.props;
     return (
       <ScrollView
         contentContainerStyle={this.props.styles.scrollViewContentContainer}
         style={this.props.styles.scrollView}
       >
         <View>
           <Text style={this.props.styles.warningText}>
             {`The chat "${threadInfo.uiName}" will be permanently deleted. `}
             There is no way to reverse this.
           </Text>
         </View>
         <Button
           onPress={this.submitDeletion}
           style={this.props.styles.deleteButton}
         >
           {buttonContent}
         </Button>
       </ScrollView>
     );
   }
 
   passwordInputRef = (
     passwordInput: ?React.ElementRef<typeof BaseTextInput>,
   ) => {
     this.passwordInput = passwordInput;
   };
 
   focusPasswordInput = () => {
     invariant(this.passwordInput, 'passwordInput should be set');
     this.passwordInput.focus();
   };
 
   dispatchDeleteThreadAction = () => {
     this.props.dispatchActionPromise(
       deleteThreadActionTypes,
       this.deleteThread(),
     );
   };
 
   submitDeletion = () => {
     if (!this.props.shouldUseDeleteConfirmationAlert) {
       this.dispatchDeleteThreadAction();
       return;
     }
     Alert.alert(
       'Warning',
       `${getThreadsToDeleteText(
         this.props.threadInfo,
       )} will also be permanently deleted.`,
       [
         { text: 'Cancel', style: 'cancel' },
         { text: 'Continue', onPress: this.dispatchDeleteThreadAction },
       ],
       { cancelable: false },
     );
   };
 
   async deleteThread(): Promise<LeaveThreadPayload> {
     const { threadInfo, navDispatch } = this.props;
     navDispatch({
       type: clearThreadsActionType,
       payload: { threadIDs: [threadInfo.id] },
     });
     try {
       const result = await this.props.deleteThread({ threadID: threadInfo.id });
       const invalidated = identifyInvalidatedThreads(
         result.updatesResult.newUpdates,
       );
       navDispatch({
         type: clearThreadsActionType,
         payload: { threadIDs: [...invalidated] },
       });
       return result;
     } catch (e) {
       if (e.message === 'invalid_credentials') {
         Alert.alert(
           'Permission not granted',
           'You do not have permission to delete this thread',
           [{ text: 'OK' }],
           { cancelable: false },
         );
       } else {
         Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
           cancelable: false,
         });
       }
       throw e;
     }
   }
 }
 
 const loadingStatusSelector = createLoadingStatusSelector(
   deleteThreadActionTypes,
 );
 
 const ConnectedDeleteThread: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedDeleteThread(props: BaseProps) {
     const threadID = props.route.params.threadInfo.id;
     const reduxThreadInfo = useSelector(
       state => threadInfoSelector(state)[threadID],
     );
     const reduxContainedThreadInfos = useSelector(
       state => containedThreadInfos(state)[threadID],
     );
 
     const { setParams } = props.navigation;
     React.useEffect(() => {
       if (reduxThreadInfo) {
         setParams({ threadInfo: reduxThreadInfo });
       }
     }, [reduxThreadInfo, setParams]);
     const threadInfo = reduxThreadInfo ?? props.route.params.threadInfo;
     const resolvedThreadInfo = useResolvedThreadInfo(threadInfo);
 
     const loadingStatus = useSelector(loadingStatusSelector);
 
     const colors = useColors();
     const styles = useStyles(unboundStyles);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callDeleteThread = useDeleteThread();
 
     const navContext = React.useContext(NavContext);
     invariant(navContext, 'NavContext should be set in DeleteThread');
     const navDispatch = navContext.dispatch;
 
     const shouldUseDeleteConfirmationAlert =
       reduxContainedThreadInfos && reduxContainedThreadInfos.length > 0;
 
     return (
       <DeleteThread
         {...props}
         threadInfo={resolvedThreadInfo}
         shouldUseDeleteConfirmationAlert={shouldUseDeleteConfirmationAlert}
         loadingStatus={loadingStatus}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         deleteThread={callDeleteThread}
         navDispatch={navDispatch}
       />
     );
   });
 
 export default ConnectedDeleteThread;
diff --git a/native/chat/settings/thread-settings-color.react.js b/native/chat/settings/thread-settings-color.react.js
index 23ea84c74..8d1f3f6b5 100644
--- a/native/chat/settings/thread-settings-color.react.js
+++ b/native/chat/settings/thread-settings-color.react.js
@@ -1,126 +1,126 @@
 // @flow
 
 import * as React from 'react';
 import { Text, ActivityIndicator, View, Platform } from 'react-native';
 
 import { changeThreadSettingsActionTypes } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 
 import type { ThreadSettingsNavigate } from './thread-settings.react.js';
 import ColorSplotch from '../../components/color-splotch.react.js';
 import EditSettingButton from '../../components/edit-setting-button.react.js';
 import { ColorSelectorModalRouteName } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 
 const unboundStyles = {
   colorLine: {
     lineHeight: Platform.select({ android: 22, default: 25 }),
   },
   colorRow: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingBottom: 8,
     paddingHorizontal: 24,
     paddingTop: 4,
   },
   currentValue: {
     flex: 1,
     paddingLeft: 4,
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     width: 96,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +colorEditValue: string,
   +setColorEditValue: (color: string) => void,
   +canChangeSettings: boolean,
   +navigate: ThreadSettingsNavigate,
   +threadSettingsRouteKey: string,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
 };
 class ThreadSettingsColor extends React.PureComponent<Props> {
   render(): React.Node {
     let colorButton;
     if (this.props.loadingStatus !== 'loading') {
       colorButton = (
         <EditSettingButton
           onPress={this.onPressEditColor}
           canChangeSettings={this.props.canChangeSettings}
           style={this.props.styles.colorLine}
         />
       );
     } else {
       colorButton = (
         <ActivityIndicator
           size="small"
           key="activityIndicator"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     }
 
     return (
       <View style={this.props.styles.colorRow}>
         <Text style={[this.props.styles.label, this.props.styles.colorLine]}>
           Color
         </Text>
         <View style={this.props.styles.currentValue}>
           <ColorSplotch color={this.props.threadInfo.color} />
         </View>
         {colorButton}
       </View>
     );
   }
 
   onPressEditColor = () => {
     this.props.navigate<'ColorSelectorModal'>({
       name: ColorSelectorModalRouteName,
       params: {
         presentedFrom: this.props.threadSettingsRouteKey,
         color: this.props.colorEditValue,
         threadInfo: this.props.threadInfo,
         setColor: this.props.setColorEditValue,
       },
     });
   };
 }
 
 const ConnectedThreadSettingsColor: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsColor(
     props: BaseProps,
   ) {
     const threadID = props.threadInfo.id;
     const loadingStatus = useSelector(
       createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:color`,
       ),
     );
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     return (
       <ThreadSettingsColor
         {...props}
         loadingStatus={loadingStatus}
         colors={colors}
         styles={styles}
       />
     );
   });
 
 export default ConnectedThreadSettingsColor;
diff --git a/native/chat/settings/thread-settings-description.react.js b/native/chat/settings/thread-settings-description.react.js
index e072d2e8e..5a3fe8432 100644
--- a/native/chat/settings/thread-settings-description.react.js
+++ b/native/chat/settings/thread-settings-description.react.js
@@ -1,325 +1,325 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   ActivityIndicator,
   TextInput as BaseTextInput,
   View,
 } from 'react-native';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadHasPermission } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import {
   type ThreadInfo,
   type ChangeThreadSettingsPayload,
   type UpdateThreadRequest,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import SaveSettingButton from './save-setting-button.react.js';
 import {
   ThreadSettingsCategoryHeader,
   ThreadSettingsCategoryFooter,
 } from './thread-settings-category.react.js';
 import Button from '../../components/button.react.js';
 import EditSettingButton from '../../components/edit-setting-button.react.js';
 import SWMansionIcon from '../../components/swmansion-icon.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 type {
   LayoutEvent,
   ContentSizeChangeEvent,
 } from '../../types/react-native.js';
 import Alert from '../../utils/alert.js';
 
 const unboundStyles = {
   addDescriptionButton: {
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 10,
   },
   addDescriptionText: {
     color: 'panelForegroundTertiaryLabel',
     flex: 1,
     fontSize: 16,
   },
   editIcon: {
     color: 'panelForegroundTertiaryLabel',
     paddingLeft: 10,
     textAlign: 'right',
   },
   outlineCategory: {
     backgroundColor: 'panelForeground',
     borderColor: 'panelForegroundBorder',
     borderRadius: 1,
     borderStyle: 'dashed',
     borderWidth: 1,
     marginLeft: -1,
     marginRight: -1,
   },
   row: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 4,
   },
   text: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     margin: 0,
     padding: 0,
     borderBottomColor: 'transparent',
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +descriptionEditValue: ?string,
   +setDescriptionEditValue: (value: ?string, callback?: () => void) => void,
   +descriptionTextHeight: ?number,
   +setDescriptionTextHeight: (number: number) => void,
   +canChangeSettings: boolean,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeThreadSettings: (
     update: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
 };
 class ThreadSettingsDescription extends React.PureComponent<Props> {
   textInput: ?React.ElementRef<typeof BaseTextInput>;
 
   render(): React.Node {
     if (
       this.props.descriptionEditValue !== null &&
       this.props.descriptionEditValue !== undefined
     ) {
       const textInputStyle: { height?: number } = {};
       if (
         this.props.descriptionTextHeight !== undefined &&
         this.props.descriptionTextHeight !== null
       ) {
         textInputStyle.height = this.props.descriptionTextHeight;
       }
       return (
         <View>
           <ThreadSettingsCategoryHeader type="full" title="Description" />
           <View style={this.props.styles.row}>
             <TextInput
               style={[this.props.styles.text, textInputStyle]}
               value={this.props.descriptionEditValue}
               onChangeText={this.props.setDescriptionEditValue}
               multiline={true}
               autoFocus={true}
               selectTextOnFocus={true}
               onBlur={this.onSubmit}
               editable={this.props.loadingStatus !== 'loading'}
               onContentSizeChange={this.onTextInputContentSizeChange}
               ref={this.textInputRef}
               selectionColor={`#${this.props.threadInfo.color}`}
             />
             {this.renderButton()}
           </View>
           <ThreadSettingsCategoryFooter type="full" />
         </View>
       );
     }
 
     if (this.props.threadInfo.description) {
       return (
         <View>
           <ThreadSettingsCategoryHeader type="full" title="Description" />
           <View style={this.props.styles.row}>
             <Text style={this.props.styles.text} onLayout={this.onLayoutText}>
               {this.props.threadInfo.description}
             </Text>
             {this.renderButton()}
           </View>
           <ThreadSettingsCategoryFooter type="full" />
         </View>
       );
     }
 
     const canEditThreadDescription = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.EDIT_THREAD_DESCRIPTION,
     );
     const { panelIosHighlightUnderlay } = this.props.colors;
     if (canEditThreadDescription) {
       return (
         <View>
           <ThreadSettingsCategoryHeader type="outline" title="Description" />
           <View style={this.props.styles.outlineCategory}>
             <Button
               onPress={this.onPressEdit}
               style={this.props.styles.addDescriptionButton}
               iosFormat="highlight"
               iosHighlightUnderlayColor={panelIosHighlightUnderlay}
               iosActiveOpacity={0.85}
             >
               <Text style={this.props.styles.addDescriptionText}>
                 Add a description...
               </Text>
               <SWMansionIcon
                 name="edit-1"
                 size={20}
                 style={this.props.styles.editIcon}
               />
             </Button>
           </View>
           <ThreadSettingsCategoryFooter type="outline" />
         </View>
       );
     }
 
     return null;
   }
 
   renderButton(): React.Node {
     if (this.props.loadingStatus === 'loading') {
       return (
         <ActivityIndicator
           size="small"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     } else if (
       this.props.descriptionEditValue === null ||
       this.props.descriptionEditValue === undefined
     ) {
       return (
         <EditSettingButton
           onPress={this.onPressEdit}
           canChangeSettings={this.props.canChangeSettings}
         />
       );
     }
     return <SaveSettingButton onPress={this.onSubmit} />;
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof BaseTextInput>) => {
     this.textInput = textInput;
   };
 
   onLayoutText = (event: LayoutEvent) => {
     this.props.setDescriptionTextHeight(event.nativeEvent.layout.height);
   };
 
   onTextInputContentSizeChange = (event: ContentSizeChangeEvent) => {
     this.props.setDescriptionTextHeight(event.nativeEvent.contentSize.height);
   };
 
   onPressEdit = () => {
     this.props.setDescriptionEditValue(this.props.threadInfo.description);
   };
 
   onSubmit = () => {
     invariant(
       this.props.descriptionEditValue !== null &&
         this.props.descriptionEditValue !== undefined,
       'should be set',
     );
     const description = this.props.descriptionEditValue.trim();
 
     if (description === this.props.threadInfo.description) {
       this.props.setDescriptionEditValue(null);
       return;
     }
 
     const editDescriptionPromise = this.editDescription(description);
     const action = changeThreadSettingsActionTypes.started;
     const threadID = this.props.threadInfo.id;
 
     this.props.dispatchActionPromise(
       changeThreadSettingsActionTypes,
       editDescriptionPromise,
       {
         customKeyName: `${action}:${threadID}:description`,
       },
     );
     editDescriptionPromise.then(() => {
       this.props.setDescriptionEditValue(null);
     });
   };
 
   async editDescription(
     newDescription: string,
   ): Promise<ChangeThreadSettingsPayload> {
     try {
       return await this.props.changeThreadSettings({
         threadID: this.props.threadInfo.id,
         changes: { description: newDescription },
       });
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: this.onErrorAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }
 
   onErrorAcknowledged = () => {
     this.props.setDescriptionEditValue(
       this.props.threadInfo.description,
       () => {
         invariant(this.textInput, 'textInput should be set');
         this.textInput.focus();
       },
     );
   };
 }
 
 const ConnectedThreadSettingsDescription: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsDescription(
     props: BaseProps,
   ) {
     const threadID = props.threadInfo.id;
     const loadingStatus = useSelector(
       createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:description`,
       ),
     );
     const colors = useColors();
     const styles = useStyles(unboundStyles);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callChangeThreadSettings = useChangeThreadSettings();
     return (
       <ThreadSettingsDescription
         {...props}
         loadingStatus={loadingStatus}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         changeThreadSettings={callChangeThreadSettings}
       />
     );
   });
 
 export default ConnectedThreadSettingsDescription;
diff --git a/native/chat/settings/thread-settings-home-notifs.react.js b/native/chat/settings/thread-settings-home-notifs.react.js
index c549e9a0b..7ef4c33e2 100644
--- a/native/chat/settings/thread-settings-home-notifs.react.js
+++ b/native/chat/settings/thread-settings-home-notifs.react.js
@@ -1,117 +1,117 @@
 // @flow
 
 import * as React from 'react';
 import { View, Switch } from 'react-native';
 
 import {
   updateSubscriptionActionTypes,
   useUpdateSubscription,
 } from 'lib/actions/user-actions.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type {
   SubscriptionUpdateRequest,
   SubscriptionUpdateResult,
 } from 'lib/types/subscription-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import SingleLine from '../../components/single-line.react.js';
 import { useStyles } from '../../themes/colors.js';
 
 const unboundStyles = {
   currentValue: {
     alignItems: 'flex-end',
     margin: 0,
     paddingLeft: 4,
     paddingRight: 0,
     paddingVertical: 0,
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     flex: 1,
   },
   row: {
     alignItems: 'center',
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 3,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 type Props = {
   ...BaseProps,
   // Redux state
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +updateSubscription: (
     subscriptionUpdate: SubscriptionUpdateRequest,
   ) => Promise<SubscriptionUpdateResult>,
 };
 type State = {
   +currentValue: boolean,
 };
 class ThreadSettingsHomeNotifs extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
       currentValue: !props.threadInfo.currentUser.subscription.home,
     };
   }
 
   render(): React.Node {
     const componentLabel = 'Background';
     return (
       <View style={this.props.styles.row}>
         <SingleLine style={this.props.styles.label} adjustsFontSizeToFit={true}>
           {componentLabel}
         </SingleLine>
         <View style={this.props.styles.currentValue}>
           <Switch
             value={this.state.currentValue}
             onValueChange={this.onValueChange}
           />
         </View>
       </View>
     );
   }
 
   onValueChange = (value: boolean) => {
     this.setState({ currentValue: value });
     this.props.dispatchActionPromise(
       updateSubscriptionActionTypes,
       this.props.updateSubscription({
         threadID: this.props.threadInfo.id,
         updatedFields: {
           home: !value,
         },
       }),
     );
   };
 }
 
 const ConnectedThreadSettingsHomeNotifs: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsHomeNotifs(
     props: BaseProps,
   ) {
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const callUpdateSubscription = useUpdateSubscription();
     return (
       <ThreadSettingsHomeNotifs
         {...props}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         updateSubscription={callUpdateSubscription}
       />
     );
   });
 
 export default ConnectedThreadSettingsHomeNotifs;
diff --git a/native/chat/settings/thread-settings-leave-thread.react.js b/native/chat/settings/thread-settings-leave-thread.react.js
index 2eed79922..dba089ad6 100644
--- a/native/chat/settings/thread-settings-leave-thread.react.js
+++ b/native/chat/settings/thread-settings-leave-thread.react.js
@@ -1,185 +1,185 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, ActivityIndicator, View } from 'react-native';
 
 import {
   leaveThreadActionTypes,
   useLeaveThread,
 } from 'lib/actions/thread-actions.js';
 import type { LeaveThreadInput } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js';
 import { identifyInvalidatedThreads } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { ThreadInfo, LeaveThreadPayload } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import Button from '../../components/button.react.js';
 import { clearThreadsActionType } from '../../navigation/action-types.js';
 import {
   NavContext,
   type NavContextType,
 } from '../../navigation/navigation-context.js';
 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';
 
 const unboundStyles = {
   button: {
     flexDirection: 'row',
     paddingHorizontal: 12,
     paddingVertical: 10,
   },
   container: {
     backgroundColor: 'panelForeground',
     paddingHorizontal: 12,
   },
   text: {
     color: 'redText',
     flex: 1,
     fontSize: 16,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +buttonStyle: ViewStyle,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +otherUsersButNoOtherAdmins: boolean,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +leaveThread: (input: LeaveThreadInput) => Promise<LeaveThreadPayload>,
   // withNavContext
   +navContext: ?NavContextType,
 };
 class ThreadSettingsLeaveThread extends React.PureComponent<Props> {
   render(): React.Node {
     const { panelIosHighlightUnderlay, panelForegroundSecondaryLabel } =
       this.props.colors;
     const loadingIndicator =
       this.props.loadingStatus === 'loading' ? (
         <ActivityIndicator size="small" color={panelForegroundSecondaryLabel} />
       ) : null;
     return (
       <View style={this.props.styles.container}>
         <Button
           onPress={this.onPress}
           style={[this.props.styles.button, this.props.buttonStyle]}
           iosFormat="highlight"
           iosHighlightUnderlayColor={panelIosHighlightUnderlay}
         >
           <Text style={this.props.styles.text}>Leave chat...</Text>
           {loadingIndicator}
         </Button>
       </View>
     );
   }
 
   onPress = () => {
     if (this.props.otherUsersButNoOtherAdmins) {
       Alert.alert(
         'Need another admin',
         'Make somebody else an admin before you leave!',
         undefined,
         { cancelable: true },
       );
       return;
     }
 
     Alert.alert(
       'Confirm action',
       'Are you sure you want to leave this chat?',
       [
         { text: 'Cancel', style: 'cancel' },
         { text: 'OK', onPress: this.onConfirmLeaveThread },
       ],
       { cancelable: true },
     );
   };
 
   onConfirmLeaveThread = () => {
     const threadID = this.props.threadInfo.id;
     this.props.dispatchActionPromise(
       leaveThreadActionTypes,
       this.leaveThread(),
       {
         customKeyName: `${leaveThreadActionTypes.started}:${threadID}`,
       },
     );
   };
 
   async leaveThread(): Promise<LeaveThreadPayload> {
     const threadID = this.props.threadInfo.id;
     const { navContext } = this.props;
     invariant(navContext, 'navContext should exist in leaveThread');
     navContext.dispatch({
       type: clearThreadsActionType,
       payload: { threadIDs: [threadID] },
     });
     try {
       const result = await this.props.leaveThread({ threadID });
       const invalidated = identifyInvalidatedThreads(
         result.updatesResult.newUpdates,
       );
       navContext.dispatch({
         type: clearThreadsActionType,
         payload: { threadIDs: [...invalidated] },
       });
       return result;
     } catch (e) {
       Alert.alert('Unknown error', 'Uhh... try again?', undefined, {
         cancelable: true,
       });
       throw e;
     }
   }
 }
 
 const ConnectedThreadSettingsLeaveThread: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsLeaveThread(
     props: BaseProps,
   ) {
     const threadID = props.threadInfo.id;
     const loadingStatus = useSelector(
       createLoadingStatusSelector(
         leaveThreadActionTypes,
         `${leaveThreadActionTypes.started}:${threadID}`,
       ),
     );
     const otherUsersButNoOtherAdminsValue = useSelector(
       otherUsersButNoOtherAdmins(props.threadInfo.id),
     );
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const callLeaveThread = useLeaveThread();
     const navContext = React.useContext(NavContext);
     return (
       <ThreadSettingsLeaveThread
         {...props}
         loadingStatus={loadingStatus}
         otherUsersButNoOtherAdmins={otherUsersButNoOtherAdminsValue}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         leaveThread={callLeaveThread}
         navContext={navContext}
       />
     );
   });
 
 export default ConnectedThreadSettingsLeaveThread;
diff --git a/native/chat/settings/thread-settings-list-action.react.js b/native/chat/settings/thread-settings-list-action.react.js
index e045bcd38..99a486dd7 100644
--- a/native/chat/settings/thread-settings-list-action.react.js
+++ b/native/chat/settings/thread-settings-list-action.react.js
@@ -1,152 +1,152 @@
 // @flow
 
 import type { IoniconsGlyphs } from '@expo/vector-icons';
 import Icon from '@expo/vector-icons/Ionicons.js';
 import * as React from 'react';
 import { View, Text, Platform } from 'react-native';
 
 import Button from '../../components/button.react.js';
 import { useStyles } from '../../themes/colors.js';
 import type { ViewStyle, TextStyle } from '../../types/styles.js';
 
 const unboundStyles = {
   addSubchannelButton: {
     paddingTop: Platform.OS === 'ios' ? 4 : 1,
   },
   addIcon: {
     color: 'link',
   },
   addItemRow: {
     backgroundColor: 'panelForeground',
     paddingHorizontal: 12,
   },
   addMemberButton: {
     paddingTop: Platform.OS === 'ios' ? 4 : 1,
   },
   container: {
     flex: 1,
     flexDirection: 'row',
     paddingHorizontal: 12,
     paddingVertical: 8,
     justifyContent: 'center',
   },
   icon: {
     lineHeight: 20,
   },
   seeMoreButton: {
     paddingBottom: Platform.OS === 'ios' ? 4 : 2,
     paddingTop: Platform.OS === 'ios' ? 2 : 0,
   },
   seeMoreContents: {
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
   },
   seeMoreIcon: {
     color: 'link',
     position: 'absolute',
     right: 10,
     top: Platform.OS === 'android' ? 12 : 10,
   },
   seeMoreRow: {
     backgroundColor: 'panelForeground',
     paddingHorizontal: 12,
   },
   text: {
     color: 'link',
     flex: 1,
     fontSize: 16,
     fontStyle: 'italic',
   },
 };
 
 type ListActionProps = {
   +onPress: () => void,
   +text: string,
   +iconName: IoniconsGlyphs,
   +iconSize: number,
   +iconStyle?: TextStyle,
   +buttonStyle?: ViewStyle,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
 };
 function ThreadSettingsListAction(props: ListActionProps) {
   return (
     <Button onPress={props.onPress} style={props.buttonStyle}>
       <View style={props.styles.container}>
         <Text style={props.styles.text}>{props.text}</Text>
         <Icon
           name={props.iconName}
           size={props.iconSize}
           style={[props.styles.icon, props.iconStyle]}
         />
       </View>
     </Button>
   );
 }
 
 type SeeMoreProps = {
   +onPress: () => void,
 };
 function ThreadSettingsSeeMore(props: SeeMoreProps): React.Node {
   const styles = useStyles(unboundStyles);
   return (
     <View style={styles.seeMoreRow}>
       <View style={styles.seeMoreContents}>
         <ThreadSettingsListAction
           onPress={props.onPress}
           text="See more..."
           iconName="ellipsis-horizontal"
           iconSize={24}
           iconStyle={styles.seeMoreIcon}
           buttonStyle={styles.seeMoreButton}
           styles={styles}
         />
       </View>
     </View>
   );
 }
 
 type AddMemberProps = {
   +onPress: () => void,
 };
 function ThreadSettingsAddMember(props: AddMemberProps): React.Node {
   const styles = useStyles(unboundStyles);
   return (
     <View style={styles.addItemRow}>
       <ThreadSettingsListAction
         onPress={props.onPress}
         text="Add users"
         iconName="md-add"
         iconStyle={styles.addIcon}
         iconSize={20}
         buttonStyle={styles.addMemberButton}
         styles={styles}
       />
     </View>
   );
 }
 
 type AddChildChannelProps = {
   +onPress: () => void,
 };
 function ThreadSettingsAddSubchannel(props: AddChildChannelProps): React.Node {
   const styles = useStyles(unboundStyles);
   return (
     <View style={styles.addItemRow}>
       <ThreadSettingsListAction
         onPress={props.onPress}
         text="Add subchannel"
         iconName="md-add"
         iconStyle={styles.addIcon}
         iconSize={20}
         buttonStyle={styles.addSubchannelButton}
         styles={styles}
       />
     </View>
   );
 }
 
 export {
   ThreadSettingsSeeMore,
   ThreadSettingsAddMember,
   ThreadSettingsAddSubchannel,
 };
diff --git a/native/chat/settings/thread-settings-member.react.js b/native/chat/settings/thread-settings-member.react.js
index dc26eb2ca..d5c360289 100644
--- a/native/chat/settings/thread-settings-member.react.js
+++ b/native/chat/settings/thread-settings-member.react.js
@@ -1,306 +1,306 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   Platform,
   ActivityIndicator,
   TouchableOpacity,
 } from 'react-native';
 
 import {
   removeUsersFromThreadActionTypes,
   changeThreadMemberRolesActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { getAvailableThreadMemberActions } from 'lib/shared/thread-utils.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type {
   MinimallyEncodedRelativeMemberInfo,
   MinimallyEncodedThreadInfo,
 } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import {
   type ThreadInfo,
   type RelativeMemberInfo,
 } from 'lib/types/thread-types.js';
 import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js';
 
 import type { ThreadSettingsNavigate } from './thread-settings.react.js';
 import UserAvatar from '../../avatars/user-avatar.react.js';
 import PencilIcon from '../../components/pencil-icon.react.js';
 import SingleLine from '../../components/single-line.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../../keyboard/keyboard-state.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../../navigation/overlay-context.js';
 import { ThreadSettingsMemberTooltipModalRouteName } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 import type { VerticalBounds } from '../../types/layout-types.js';
 import { useNavigateToUserProfileBottomSheet } from '../../user-profile/user-profile-utils.js';
 
 const unboundStyles = {
   container: {
     backgroundColor: 'panelForeground',
     flex: 1,
     paddingHorizontal: 24,
     paddingVertical: 8,
   },
   editButton: {
     paddingLeft: 10,
   },
   topBorder: {
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
   },
   lastContainer: {
     paddingBottom: Platform.OS === 'ios' ? 12 : 10,
   },
   role: {
     color: 'panelForegroundTertiaryLabel',
     flex: 1,
     fontSize: 14,
     paddingTop: 4,
   },
   row: {
     flex: 1,
     flexDirection: 'row',
   },
   userInfoContainer: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
   },
   username: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
     lineHeight: 20,
     marginLeft: 8,
   },
   anonymous: {
     color: 'panelForegroundTertiaryLabel',
     fontStyle: 'italic',
   },
 };
 
 type BaseProps = {
   +memberInfo: RelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +canEdit: boolean,
   +navigate: ThreadSettingsNavigate,
   +firstListItem: boolean,
   +lastListItem: boolean,
   +verticalBounds: ?VerticalBounds,
   +threadSettingsRouteKey: string,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +roleName: ?string,
   +removeUserLoadingStatus: LoadingStatus,
   +changeRoleLoadingStatus: LoadingStatus,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
   +navigateToUserProfileBottomSheet: (userID: string) => mixed,
 };
 class ThreadSettingsMember extends React.PureComponent<Props> {
   editButton: ?React.ElementRef<typeof View>;
 
   render(): React.Node {
     const userText = stringForUser(this.props.memberInfo);
 
     let usernameInfo = null;
     if (this.props.memberInfo.username) {
       usernameInfo = (
         <SingleLine style={this.props.styles.username}>{userText}</SingleLine>
       );
     } else {
       usernameInfo = (
         <SingleLine
           style={[this.props.styles.username, this.props.styles.anonymous]}
         >
           {userText}
         </SingleLine>
       );
     }
 
     let editButton = null;
     if (
       this.props.removeUserLoadingStatus === 'loading' ||
       this.props.changeRoleLoadingStatus === 'loading'
     ) {
       editButton = (
         <ActivityIndicator
           size="small"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     } else if (
       getAvailableThreadMemberActions(
         this.props.memberInfo,
         this.props.threadInfo,
         this.props.canEdit,
       ).length !== 0
     ) {
       editButton = (
         <TouchableOpacity
           onPress={this.onPressEdit}
           style={this.props.styles.editButton}
         >
           <View onLayout={this.onEditButtonLayout} ref={this.editButtonRef}>
             <PencilIcon />
           </View>
         </TouchableOpacity>
       );
     }
 
     const roleInfo = (
       <View style={this.props.styles.row}>
         <Text style={this.props.styles.role} numberOfLines={1}>
           {this.props.roleName}
         </Text>
       </View>
     );
 
     const firstItem = this.props.firstListItem
       ? null
       : this.props.styles.topBorder;
     const lastItem = this.props.lastListItem
       ? this.props.styles.lastContainer
       : null;
     return (
       <TouchableOpacity
         onPress={this.onPressUser}
         style={[this.props.styles.container, firstItem, lastItem]}
       >
         <View style={this.props.styles.row}>
           <View style={this.props.styles.userInfoContainer}>
             <UserAvatar size="S" userID={this.props.memberInfo.id} />
             {usernameInfo}
           </View>
           {editButton}
         </View>
         {roleInfo}
       </TouchableOpacity>
     );
   }
 
   onPressUser = () => {
     this.props.navigateToUserProfileBottomSheet(this.props.memberInfo.id);
   };
 
   editButtonRef = (editButton: ?React.ElementRef<typeof View>) => {
     this.editButton = editButton;
   };
 
   onEditButtonLayout = () => {};
 
   onPressEdit = () => {
     if (this.dismissKeyboardIfShowing()) {
       return;
     }
 
     const {
       editButton,
       props: { verticalBounds },
     } = this;
     if (!editButton || !verticalBounds) {
       return;
     }
 
     const { overlayContext } = this.props;
     invariant(
       overlayContext,
       'ThreadSettingsMember should have OverlayContext',
     );
     overlayContext.setScrollBlockingModalStatus('open');
 
     editButton.measure((x, y, width, height, pageX, pageY) => {
       const coordinates = { x: pageX, y: pageY, width, height };
       this.props.navigate<'ThreadSettingsMemberTooltipModal'>({
         name: ThreadSettingsMemberTooltipModalRouteName,
         params: {
           presentedFrom: this.props.threadSettingsRouteKey,
           initialCoordinates: coordinates,
           verticalBounds,
           visibleEntryIDs: getAvailableThreadMemberActions(
             this.props.memberInfo,
             this.props.threadInfo,
             this.props.canEdit,
           ),
           memberInfo: this.props.memberInfo,
           threadInfo: this.props.threadInfo,
         },
       });
     });
   };
 
   dismissKeyboardIfShowing = (): boolean => {
     const { keyboardState } = this.props;
     return !!(keyboardState && keyboardState.dismissKeyboardIfShowing());
   };
 }
 
 const ConnectedThreadSettingsMember: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsMember(
     props: BaseProps,
   ) {
     const memberID = props.memberInfo.id;
     const removeUserLoadingStatus = useSelector(state =>
       createLoadingStatusSelector(
         removeUsersFromThreadActionTypes,
         `${removeUsersFromThreadActionTypes.started}:${memberID}`,
       )(state),
     );
     const changeRoleLoadingStatus = useSelector(state =>
       createLoadingStatusSelector(
         changeThreadMemberRolesActionTypes,
         `${changeThreadMemberRolesActionTypes.started}:${memberID}`,
       )(state),
     );
 
     const [memberInfo] = useENSNames([props.memberInfo]);
 
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const keyboardState = React.useContext(KeyboardContext);
     const overlayContext = React.useContext(OverlayContext);
 
     const navigateToUserProfileBottomSheet =
       useNavigateToUserProfileBottomSheet();
 
     const roles = useRolesFromCommunityThreadInfo(props.threadInfo, [
       props.memberInfo,
     ]);
     const roleName = roles.get(props.memberInfo.id)?.name;
 
     return (
       <ThreadSettingsMember
         {...props}
         memberInfo={memberInfo}
         roleName={roleName}
         removeUserLoadingStatus={removeUserLoadingStatus}
         changeRoleLoadingStatus={changeRoleLoadingStatus}
         colors={colors}
         styles={styles}
         keyboardState={keyboardState}
         overlayContext={overlayContext}
         navigateToUserProfileBottomSheet={navigateToUserProfileBottomSheet}
       />
     );
   });
 
 export default ConnectedThreadSettingsMember;
diff --git a/native/chat/settings/thread-settings-name.react.js b/native/chat/settings/thread-settings-name.react.js
index defbd8292..432f7889c 100644
--- a/native/chat/settings/thread-settings-name.react.js
+++ b/native/chat/settings/thread-settings-name.react.js
@@ -1,247 +1,247 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   ActivityIndicator,
   TextInput as BaseTextInput,
   View,
 } from 'react-native';
 
 import {
   changeThreadSettingsActionTypes,
   useChangeThreadSettings,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { MinimallyEncodedResolvedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import {
   type ResolvedThreadInfo,
   type ChangeThreadSettingsPayload,
   type UpdateThreadRequest,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { firstLine } from 'lib/utils/string-utils.js';
 import { chatNameMaxLength } from 'lib/utils/validation-utils.js';
 
 import SaveSettingButton from './save-setting-button.react.js';
 import EditSettingButton from '../../components/edit-setting-button.react.js';
 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';
 
 const unboundStyles = {
   currentValue: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     margin: 0,
     paddingLeft: 4,
     paddingRight: 0,
     paddingVertical: 0,
     borderBottomColor: 'transparent',
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     width: 96,
   },
   row: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 8,
   },
 };
 
 type BaseProps = {
   +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
   +nameEditValue: ?string,
   +setNameEditValue: (value: ?string, callback?: () => void) => void,
   +canChangeSettings: boolean,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeThreadSettings: (
     update: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
 };
 class ThreadSettingsName extends React.PureComponent<Props> {
   textInput: ?React.ElementRef<typeof BaseTextInput>;
 
   render(): React.Node {
     return (
       <View style={this.props.styles.row}>
         <Text style={this.props.styles.label}>Name</Text>
         {this.renderContent()}
       </View>
     );
   }
 
   renderButton(): React.Node {
     if (this.props.loadingStatus === 'loading') {
       return (
         <ActivityIndicator
           size="small"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     } else if (
       this.props.nameEditValue === null ||
       this.props.nameEditValue === undefined
     ) {
       return (
         <EditSettingButton
           onPress={this.onPressEdit}
           canChangeSettings={this.props.canChangeSettings}
         />
       );
     }
     return <SaveSettingButton onPress={this.onSubmit} />;
   }
 
   renderContent(): React.Node {
     if (
       this.props.nameEditValue === null ||
       this.props.nameEditValue === undefined
     ) {
       return (
         <React.Fragment>
           <SingleLine style={this.props.styles.currentValue}>
             {this.props.threadInfo.uiName}
           </SingleLine>
           {this.renderButton()}
         </React.Fragment>
       );
     }
 
     return (
       <React.Fragment>
         <TextInput
           style={this.props.styles.currentValue}
           value={this.props.nameEditValue}
           onChangeText={this.props.setNameEditValue}
           autoFocus={true}
           selectTextOnFocus={true}
           onBlur={this.onSubmit}
           editable={this.props.loadingStatus !== 'loading'}
           ref={this.textInputRef}
           selectionColor={`#${this.props.threadInfo.color}`}
           maxLength={chatNameMaxLength}
         />
         {this.renderButton()}
       </React.Fragment>
     );
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof BaseTextInput>) => {
     this.textInput = textInput;
   };
 
   threadEditName(): string {
     return firstLine(
       this.props.threadInfo.name ? this.props.threadInfo.name : '',
     );
   }
 
   onPressEdit = () => {
     this.props.setNameEditValue(this.threadEditName());
   };
 
   onSubmit = () => {
     invariant(
       this.props.nameEditValue !== null &&
         this.props.nameEditValue !== undefined,
       'should be set',
     );
     const name = firstLine(this.props.nameEditValue);
 
     if (name === this.threadEditName()) {
       this.props.setNameEditValue(null);
       return;
     }
 
     const editNamePromise = this.editName(name);
     const action = changeThreadSettingsActionTypes.started;
     const threadID = this.props.threadInfo.id;
 
     this.props.dispatchActionPromise(
       changeThreadSettingsActionTypes,
       editNamePromise,
       {
         customKeyName: `${action}:${threadID}:name`,
       },
     );
     editNamePromise.then(() => {
       this.props.setNameEditValue(null);
     });
   };
 
   async editName(newName: string): Promise<ChangeThreadSettingsPayload> {
     try {
       return await this.props.changeThreadSettings({
         threadID: this.props.threadInfo.id,
         changes: { name: newName },
       });
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: this.onErrorAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }
 
   onErrorAcknowledged = () => {
     this.props.setNameEditValue(this.threadEditName(), () => {
       invariant(this.textInput, 'textInput should be set');
       this.textInput.focus();
     });
   };
 }
 
 const ConnectedThreadSettingsName: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsName(props: BaseProps) {
     const styles = useStyles(unboundStyles);
     const colors = useColors();
 
     const threadID = props.threadInfo.id;
     const loadingStatus = useSelector(
       createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:name`,
       ),
     );
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callChangeThreadSettings = useChangeThreadSettings();
 
     return (
       <ThreadSettingsName
         {...props}
         styles={styles}
         colors={colors}
         loadingStatus={loadingStatus}
         dispatchActionPromise={dispatchActionPromise}
         changeThreadSettings={callChangeThreadSettings}
       />
     );
   });
 
 export default ConnectedThreadSettingsName;
diff --git a/native/chat/settings/thread-settings-promote-sidebar.react.js b/native/chat/settings/thread-settings-promote-sidebar.react.js
index d1192072e..0ad411021 100644
--- a/native/chat/settings/thread-settings-promote-sidebar.react.js
+++ b/native/chat/settings/thread-settings-promote-sidebar.react.js
@@ -1,115 +1,115 @@
 // @flow
 
 import * as React from 'react';
 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';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 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';
 
 const unboundStyles = {
   button: {
     flexDirection: 'row',
     paddingHorizontal: 12,
     paddingVertical: 10,
   },
   container: {
     backgroundColor: 'panelForeground',
     paddingHorizontal: 12,
   },
   text: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +buttonStyle: ViewStyle,
 };
 type Props = {
   ...BaseProps,
   +loadingStatus: LoadingStatus,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +promoteSidebar: () => mixed,
 };
 class ThreadSettingsPromoteSidebar extends React.PureComponent<Props> {
   onClick = () => {
     Alert.alert(
       'Are you sure?',
       'Promoting a thread to a channel cannot be undone.',
       [
         {
           text: 'Cancel',
           style: 'cancel',
         },
         {
           text: 'Yes',
           onPress: this.props.promoteSidebar,
         },
       ],
     );
   };
 
   render(): React.Node {
     const { panelIosHighlightUnderlay, panelForegroundSecondaryLabel } =
       this.props.colors;
     const loadingIndicator =
       this.props.loadingStatus === 'loading' ? (
         <ActivityIndicator size="small" color={panelForegroundSecondaryLabel} />
       ) : null;
 
     return (
       <View style={this.props.styles.container}>
         <Button
           onPress={this.onClick}
           style={[this.props.styles.button, this.props.buttonStyle]}
           iosFormat="highlight"
           iosHighlightUnderlayColor={panelIosHighlightUnderlay}
         >
           <Text style={this.props.styles.text}>Promote to channel</Text>
           {loadingIndicator}
         </Button>
       </View>
     );
   }
 }
 
 const onError = () => {
   Alert.alert('Unknown error', 'Uhh... try again?', undefined, {
     cancelable: true,
   });
 };
 
 const ConnectedThreadSettingsPromoteSidebar: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsPromoteSidebar(
     props: BaseProps,
   ) {
     const { threadInfo } = props;
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const { onPromoteSidebar, loading } = usePromoteSidebar(
       threadInfo,
       onError,
     );
 
     return (
       <ThreadSettingsPromoteSidebar
         {...props}
         colors={colors}
         styles={styles}
         promoteSidebar={onPromoteSidebar}
         loadingStatus={loading}
       />
     );
   });
 
 export default ConnectedThreadSettingsPromoteSidebar;
diff --git a/native/chat/settings/thread-settings-push-notifs.react.js b/native/chat/settings/thread-settings-push-notifs.react.js
index fbcd81293..ac98e2f5f 100644
--- a/native/chat/settings/thread-settings-push-notifs.react.js
+++ b/native/chat/settings/thread-settings-push-notifs.react.js
@@ -1,197 +1,197 @@
 // @flow
 
 import * as React from 'react';
 import { View, Switch, TouchableOpacity, Platform } from 'react-native';
 import Linking from 'react-native/Libraries/Linking/Linking.js';
 
 import {
   updateSubscriptionActionTypes,
   useUpdateSubscription,
 } from 'lib/actions/user-actions.js';
 import { deviceTokenSelector } from 'lib/selectors/keyserver-selectors.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type {
   SubscriptionUpdateRequest,
   SubscriptionUpdateResult,
 } from 'lib/types/subscription-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
 import {
   useDispatchActionPromise,
   extractKeyserverIDFromID,
 } from 'lib/utils/action-utils.js';
 
 import SingleLine from '../../components/single-line.react.js';
 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';
 
 const unboundStyles = {
   currentValue: {
     alignItems: 'flex-end',
     margin: 0,
     paddingLeft: 4,
     paddingRight: 0,
     paddingVertical: 0,
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     flex: 1,
   },
   row: {
     alignItems: 'center',
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 3,
   },
   infoIcon: {
     paddingRight: 20,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 type Props = {
   ...BaseProps,
   // Redux state
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +hasPushPermissions: boolean,
   +updateSubscription: (
     subscriptionUpdate: SubscriptionUpdateRequest,
   ) => Promise<SubscriptionUpdateResult>,
 };
 type State = {
   +currentValue: boolean,
 };
 class ThreadSettingsPushNotifs extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
       currentValue: props.threadInfo.currentUser.subscription.pushNotifs,
     };
   }
 
   render(): React.Node {
     const componentLabel = 'Push notifs';
     let notificationsSettingsLinkingIcon: React.Node = undefined;
     if (!this.props.hasPushPermissions) {
       notificationsSettingsLinkingIcon = (
         <TouchableOpacity
           onPress={this.onNotificationsSettingsLinkingIconPress}
         >
           <View style={this.props.styles.infoIcon}>
             <SWMansionIcon name="info-circle" size={25} color="gray" />
           </View>
         </TouchableOpacity>
       );
     }
     return (
       <View style={this.props.styles.row}>
         <SingleLine style={this.props.styles.label} adjustsFontSizeToFit={true}>
           {componentLabel}
         </SingleLine>
         {notificationsSettingsLinkingIcon}
         <View style={this.props.styles.currentValue}>
           <Switch
             value={this.state.currentValue}
             onValueChange={this.onValueChange}
             disabled={!this.props.hasPushPermissions}
           />
         </View>
       </View>
     );
   }
 
   onValueChange = (value: boolean) => {
     this.setState({ currentValue: value });
     this.props.dispatchActionPromise(
       updateSubscriptionActionTypes,
       this.props.updateSubscription({
         threadID: this.props.threadInfo.id,
         updatedFields: {
           pushNotifs: value,
         },
       }),
     );
   };
 
   onNotificationsSettingsLinkingIconPress = async () => {
     let platformRequestsPermission;
     if (Platform.OS !== 'android') {
       platformRequestsPermission = true;
     } else {
       platformRequestsPermission =
         await CommAndroidNotifications.canRequestNotificationsPermissionFromUser();
     }
 
     const alertTitle = platformRequestsPermission
       ? 'Need notif permissions'
       : 'Unable to initialize notifs';
     const notificationsSettingsPath =
       Platform.OS === 'ios'
         ? 'Settings App → Notifications → Comm'
         : 'Settings → Apps → Comm → Notifications';
 
     let alertMessage;
     if (platformRequestsPermission && this.state.currentValue) {
       alertMessage =
         'Notifs for this chat are enabled, but cannot be delivered ' +
         'to this device because you haven’t granted notif permissions to Comm. ' +
         'Please enable them in ' +
         notificationsSettingsPath;
     } else if (platformRequestsPermission) {
       alertMessage =
         'In order to enable push notifs for this chat, ' +
         'you need to first grant notif permissions to Comm. ' +
         'Please enable them in ' +
         notificationsSettingsPath;
     } else {
       alertMessage =
         'Please check your network connection, make sure Google Play ' +
         'services are installed and enabled, and confirm that your Google ' +
         'Play credentials are valid in the Google Play Store.';
     }
     Alert.alert(alertTitle, alertMessage, [
       {
         text: 'Go to settings',
         onPress: () => Linking.openSettings(),
       },
       {
         text: 'Cancel',
         style: 'cancel',
       },
     ]);
   };
 }
 
 const ConnectedThreadSettingsPushNotifs: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsPushNotifs(
     props: BaseProps,
   ) {
     const keyserverID = extractKeyserverIDFromID(props.threadInfo.id);
     const deviceToken = useSelector(deviceTokenSelector(keyserverID));
     const hasPushPermissions =
       deviceToken !== null && deviceToken !== undefined;
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const callUpdateSubscription = useUpdateSubscription();
     return (
       <ThreadSettingsPushNotifs
         {...props}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         updateSubscription={callUpdateSubscription}
         hasPushPermissions={hasPushPermissions}
       />
     );
   });
 
 export default ConnectedThreadSettingsPushNotifs;
diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
index 1b71f4918..3d689e89e 100644
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -1,1301 +1,1301 @@
 // @flow
 
 import type {
   TabNavigationState,
   BottomTabOptions,
   BottomTabNavigationEventMap,
 } from '@react-navigation/core';
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Platform } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { createSelector } from 'reselect';
 import tinycolor from 'tinycolor2';
 
 import {
   changeThreadSettingsActionTypes,
   leaveThreadActionTypes,
   removeUsersFromThreadActionTypes,
   changeThreadMemberRolesActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import {
   threadInfoSelector,
   childThreadInfos,
 } from 'lib/selectors/thread-selectors.js';
 import { getAvailableRelationshipButtons } from 'lib/shared/relationship-utils.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadInChatList,
   getSingleOtherUser,
   threadIsChannel,
 } from 'lib/shared/thread-utils.js';
 import threadWatcher from 'lib/shared/thread-watcher.js';
 import type {
   MinimallyEncodedRelativeMemberInfo,
   MinimallyEncodedResolvedThreadInfo,
   MinimallyEncodedThreadInfo,
 } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { RelationshipButton } from 'lib/types/relationship-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import {
   type ThreadInfo,
   type ResolvedThreadInfo,
   type RelativeMemberInfo,
 } from 'lib/types/thread-types.js';
 import type { UserInfos } from 'lib/types/user-types.js';
 import {
   useResolvedThreadInfo,
   useResolvedOptionalThreadInfo,
   useResolvedOptionalThreadInfos,
 } from 'lib/utils/entity-helpers.js';
 
 import ThreadSettingsAvatar from './thread-settings-avatar.react.js';
 import type { CategoryType } from './thread-settings-category.react.js';
 import {
   ThreadSettingsCategoryHeader,
   ThreadSettingsCategoryActionHeader,
   ThreadSettingsCategoryFooter,
 } from './thread-settings-category.react.js';
 import ThreadSettingsChildThread from './thread-settings-child-thread.react.js';
 import ThreadSettingsColor from './thread-settings-color.react.js';
 import ThreadSettingsDeleteThread from './thread-settings-delete-thread.react.js';
 import ThreadSettingsDescription from './thread-settings-description.react.js';
 import ThreadSettingsEditRelationship from './thread-settings-edit-relationship.react.js';
 import ThreadSettingsHomeNotifs from './thread-settings-home-notifs.react.js';
 import ThreadSettingsLeaveThread from './thread-settings-leave-thread.react.js';
 import {
   ThreadSettingsSeeMore,
   ThreadSettingsAddMember,
   ThreadSettingsAddSubchannel,
 } from './thread-settings-list-action.react.js';
 import ThreadSettingsMediaGallery from './thread-settings-media-gallery.react.js';
 import ThreadSettingsMember from './thread-settings-member.react.js';
 import ThreadSettingsName from './thread-settings-name.react.js';
 import ThreadSettingsParent from './thread-settings-parent.react.js';
 import ThreadSettingsPromoteSidebar from './thread-settings-promote-sidebar.react.js';
 import ThreadSettingsPushNotifs from './thread-settings-push-notifs.react.js';
 import ThreadSettingsVisibility from './thread-settings-visibility.react.js';
 import ThreadAncestors from '../../components/thread-ancestors.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../../keyboard/keyboard-state.js';
 import { defaultStackScreenOptions } from '../../navigation/options.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../../navigation/overlay-context.js';
 import {
   AddUsersModalRouteName,
   ComposeSubchannelModalRouteName,
   FullScreenThreadMediaGalleryRouteName,
   type ScreenParamList,
   type NavigationRoute,
 } from '../../navigation/route-names.js';
 import type { TabNavigationProp } from '../../navigation/tab-navigator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import type { AppState } from '../../redux/state-types.js';
 import {
   useStyles,
   type IndicatorStyle,
   useIndicatorStyle,
 } from '../../themes/colors.js';
 import type { VerticalBounds } from '../../types/layout-types.js';
 import type { ViewStyle } from '../../types/styles.js';
 import type { ChatNavigationProp } from '../chat.react.js';
 
 const itemPageLength = 5;
 
 export type ThreadSettingsParams = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 
 export type ThreadSettingsNavigate = $PropertyType<
   ChatNavigationProp<'ThreadSettings'>,
   'navigate',
 >;
 
 type ChatSettingsItem =
   | {
       +itemType: 'header',
       +key: string,
       +title: string,
       +categoryType: CategoryType,
     }
   | {
       +itemType: 'actionHeader',
       +key: string,
       +title: string,
       +actionText: string,
       +onPress: () => void,
     }
   | {
       +itemType: 'footer',
       +key: string,
       +categoryType: CategoryType,
     }
   | {
       +itemType: 'avatar',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +canChangeSettings: boolean,
     }
   | {
       +itemType: 'name',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +nameEditValue: ?string,
       +canChangeSettings: boolean,
     }
   | {
       +itemType: 'color',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +colorEditValue: string,
       +canChangeSettings: boolean,
       +navigate: ThreadSettingsNavigate,
       +threadSettingsRouteKey: string,
     }
   | {
       +itemType: 'description',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +descriptionEditValue: ?string,
       +descriptionTextHeight: ?number,
       +canChangeSettings: boolean,
     }
   | {
       +itemType: 'parent',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +parentThreadInfo:
         | ?ResolvedThreadInfo
         | ?MinimallyEncodedResolvedThreadInfo,
     }
   | {
       +itemType: 'visibility',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
     }
   | {
       +itemType: 'pushNotifs',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
     }
   | {
       +itemType: 'homeNotifs',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
     }
   | {
       +itemType: 'seeMore',
       +key: string,
       +onPress: () => void,
     }
   | {
       +itemType: 'childThread',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +firstListItem: boolean,
       +lastListItem: boolean,
     }
   | {
       +itemType: 'addSubchannel',
       +key: string,
     }
   | {
       +itemType: 'member',
       +key: string,
       +memberInfo: RelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +canEdit: boolean,
       +navigate: ThreadSettingsNavigate,
       +firstListItem: boolean,
       +lastListItem: boolean,
       +verticalBounds: ?VerticalBounds,
       +threadSettingsRouteKey: string,
     }
   | {
       +itemType: 'addMember',
       +key: string,
     }
   | {
       +itemType: 'mediaGallery',
       +key: string,
       +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
       +limit: number,
       +verticalBounds: ?VerticalBounds,
     }
   | {
       +itemType: 'promoteSidebar' | 'leaveThread' | 'deleteThread',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +navigate: ThreadSettingsNavigate,
       +buttonStyle: ViewStyle,
     }
   | {
       +itemType: 'editRelationship',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +navigate: ThreadSettingsNavigate,
       +buttonStyle: ViewStyle,
       +relationshipButton: RelationshipButton,
     };
 
 const unboundStyles = {
   container: {
     backgroundColor: 'panelBackground',
     flex: 1,
   },
   flatList: {
     paddingVertical: 16,
   },
   nonTopButton: {
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
   },
   lastButton: {
     paddingBottom: Platform.OS === 'ios' ? 14 : 12,
   },
 };
 
 type BaseProps = {
   +navigation: ChatNavigationProp<'ThreadSettings'>,
   +route: NavigationRoute<'ThreadSettings'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +userInfos: UserInfos,
   +viewerID: ?string,
   +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
   +parentThreadInfo: ?ResolvedThreadInfo | ?MinimallyEncodedResolvedThreadInfo,
   +childThreadInfos: ?$ReadOnlyArray<ResolvedThreadInfo>,
   +somethingIsSaving: boolean,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +indicatorStyle: IndicatorStyle,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   +canPromoteSidebar: boolean,
 };
 type State = {
   +numMembersShowing: number,
   +numSubchannelsShowing: number,
   +numSidebarsShowing: number,
   +nameEditValue: ?string,
   +descriptionEditValue: ?string,
   +descriptionTextHeight: ?number,
   +colorEditValue: string,
   +verticalBounds: ?VerticalBounds,
 };
 type PropsAndState = { ...Props, ...State };
 class ThreadSettings extends React.PureComponent<Props, State> {
   flatListContainer: ?React.ElementRef<typeof View>;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       numMembersShowing: itemPageLength,
       numSubchannelsShowing: itemPageLength,
       numSidebarsShowing: itemPageLength,
       nameEditValue: null,
       descriptionEditValue: null,
       descriptionTextHeight: null,
       colorEditValue: props.threadInfo.color,
       verticalBounds: null,
     };
   }
 
   static scrollDisabled(props: Props): boolean {
     const { overlayContext } = props;
     invariant(overlayContext, 'ThreadSettings should have OverlayContext');
     return overlayContext.scrollBlockingModalStatus !== 'closed';
   }
 
   componentDidUpdate(prevProps: Props) {
     const prevThreadInfo = prevProps.threadInfo;
     const newThreadInfo = this.props.threadInfo;
 
     if (
       !tinycolor.equals(newThreadInfo.color, prevThreadInfo.color) &&
       tinycolor.equals(this.state.colorEditValue, prevThreadInfo.color)
     ) {
       this.setState({ colorEditValue: newThreadInfo.color });
     }
 
     if (defaultStackScreenOptions.gestureEnabled) {
       const scrollIsDisabled = ThreadSettings.scrollDisabled(this.props);
       const scrollWasDisabled = ThreadSettings.scrollDisabled(prevProps);
       if (!scrollWasDisabled && scrollIsDisabled) {
         this.props.navigation.setOptions({ gestureEnabled: false });
       } else if (scrollWasDisabled && !scrollIsDisabled) {
         this.props.navigation.setOptions({ gestureEnabled: true });
       }
     }
   }
 
   threadBasicsListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfo,
       (propsAndState: PropsAndState) => propsAndState.parentThreadInfo,
       (propsAndState: PropsAndState) => propsAndState.nameEditValue,
       (propsAndState: PropsAndState) => propsAndState.colorEditValue,
       (propsAndState: PropsAndState) => propsAndState.descriptionEditValue,
       (propsAndState: PropsAndState) => propsAndState.descriptionTextHeight,
       (propsAndState: PropsAndState) => !propsAndState.somethingIsSaving,
       (propsAndState: PropsAndState) => propsAndState.navigation.navigate,
       (propsAndState: PropsAndState) => propsAndState.route.key,
       (
         threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         parentThreadInfo:
           | ?ResolvedThreadInfo
           | ?MinimallyEncodedResolvedThreadInfo,
         nameEditValue: ?string,
         colorEditValue: string,
         descriptionEditValue: ?string,
         descriptionTextHeight: ?number,
         canStartEditing: boolean,
         navigate: ThreadSettingsNavigate,
         routeKey: string,
       ) => {
         const canEditThreadAvatar = threadHasPermission(
           threadInfo,
           threadPermissions.EDIT_THREAD_AVATAR,
         );
         const canEditThreadName = threadHasPermission(
           threadInfo,
           threadPermissions.EDIT_THREAD_NAME,
         );
         const canEditThreadDescription = threadHasPermission(
           threadInfo,
           threadPermissions.EDIT_THREAD_DESCRIPTION,
         );
         const canEditThreadColor = threadHasPermission(
           threadInfo,
           threadPermissions.EDIT_THREAD_COLOR,
         );
 
         const canChangeAvatar = canEditThreadAvatar && canStartEditing;
         const canChangeName = canEditThreadName && canStartEditing;
         const canChangeDescription =
           canEditThreadDescription && canStartEditing;
         const canChangeColor = canEditThreadColor && canStartEditing;
 
         const listData: ChatSettingsItem[] = [];
         listData.push({
           itemType: 'header',
           key: 'avatarHeader',
           title: 'Channel Avatar',
           categoryType: 'unpadded',
         });
         listData.push({
           itemType: 'avatar',
           key: 'avatar',
           threadInfo,
           canChangeSettings: canChangeAvatar,
         });
         listData.push({
           itemType: 'footer',
           key: 'avatarFooter',
           categoryType: 'outline',
         });
 
         listData.push({
           itemType: 'header',
           key: 'basicsHeader',
           title: 'Basics',
           categoryType: 'full',
         });
         listData.push({
           itemType: 'name',
           key: 'name',
           threadInfo,
           nameEditValue,
           canChangeSettings: canChangeName,
         });
         listData.push({
           itemType: 'color',
           key: 'color',
           threadInfo,
           colorEditValue,
           canChangeSettings: canChangeColor,
           navigate,
           threadSettingsRouteKey: routeKey,
         });
         listData.push({
           itemType: 'footer',
           key: 'basicsFooter',
           categoryType: 'full',
         });
 
         if (
           (descriptionEditValue !== null &&
             descriptionEditValue !== undefined) ||
           threadInfo.description ||
           canEditThreadDescription
         ) {
           listData.push({
             itemType: 'description',
             key: 'description',
             threadInfo,
             descriptionEditValue,
             descriptionTextHeight,
             canChangeSettings: canChangeDescription,
           });
         }
 
         const isMember = viewerIsMember(threadInfo);
         if (isMember) {
           listData.push({
             itemType: 'header',
             key: 'subscriptionHeader',
             title: 'Subscription',
             categoryType: 'full',
           });
           listData.push({
             itemType: 'pushNotifs',
             key: 'pushNotifs',
             threadInfo,
           });
           if (threadInfo.type !== threadTypes.SIDEBAR) {
             listData.push({
               itemType: 'homeNotifs',
               key: 'homeNotifs',
               threadInfo,
             });
           }
           listData.push({
             itemType: 'footer',
             key: 'subscriptionFooter',
             categoryType: 'full',
           });
         }
 
         listData.push({
           itemType: 'header',
           key: 'privacyHeader',
           title: 'Privacy',
           categoryType: 'full',
         });
         listData.push({
           itemType: 'visibility',
           key: 'visibility',
           threadInfo,
         });
         listData.push({
           itemType: 'parent',
           key: 'parent',
           threadInfo,
           parentThreadInfo,
         });
         listData.push({
           itemType: 'footer',
           key: 'privacyFooter',
           categoryType: 'full',
         });
         return listData;
       },
     );
 
   subchannelsListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfo,
       (propsAndState: PropsAndState) => propsAndState.navigation.navigate,
       (propsAndState: PropsAndState) => propsAndState.childThreadInfos,
       (propsAndState: PropsAndState) => propsAndState.numSubchannelsShowing,
       (
         threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         navigate: ThreadSettingsNavigate,
         childThreads: ?$ReadOnlyArray<
           ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         >,
         numSubchannelsShowing: number,
       ) => {
         const listData: ChatSettingsItem[] = [];
 
         const subchannels = childThreads?.filter(threadIsChannel) ?? [];
         const canCreateSubchannels = threadHasPermission(
           threadInfo,
           threadPermissions.CREATE_SUBCHANNELS,
         );
         if (subchannels.length === 0 && !canCreateSubchannels) {
           return listData;
         }
 
         listData.push({
           itemType: 'header',
           key: 'subchannelHeader',
           title: 'Subchannels',
           categoryType: 'unpadded',
         });
 
         if (canCreateSubchannels) {
           listData.push({
             itemType: 'addSubchannel',
             key: 'addSubchannel',
           });
         }
 
         const numItems = Math.min(numSubchannelsShowing, subchannels.length);
         for (let i = 0; i < numItems; i++) {
           const subchannelInfo = subchannels[i];
           listData.push({
             itemType: 'childThread',
             key: `childThread${subchannelInfo.id}`,
             threadInfo: subchannelInfo,
             firstListItem: i === 0 && !canCreateSubchannels,
             lastListItem: i === numItems - 1 && numItems === subchannels.length,
           });
         }
 
         if (numItems < subchannels.length) {
           listData.push({
             itemType: 'seeMore',
             key: 'seeMoreSubchannels',
             onPress: this.onPressSeeMoreSubchannels,
           });
         }
 
         listData.push({
           itemType: 'footer',
           key: 'subchannelFooter',
           categoryType: 'unpadded',
         });
 
         return listData;
       },
     );
 
   sidebarsListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.navigation.navigate,
       (propsAndState: PropsAndState) => propsAndState.childThreadInfos,
       (propsAndState: PropsAndState) => propsAndState.numSidebarsShowing,
       (
         navigate: ThreadSettingsNavigate,
         childThreads: ?$ReadOnlyArray<
           ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         >,
         numSidebarsShowing: number,
       ) => {
         const listData: ChatSettingsItem[] = [];
 
         const sidebars =
           childThreads?.filter(
             childThreadInfo => childThreadInfo.type === threadTypes.SIDEBAR,
           ) ?? [];
         if (sidebars.length === 0) {
           return listData;
         }
 
         listData.push({
           itemType: 'header',
           key: 'sidebarHeader',
           title: 'Threads',
           categoryType: 'unpadded',
         });
 
         const numItems = Math.min(numSidebarsShowing, sidebars.length);
         for (let i = 0; i < numItems; i++) {
           const sidebarInfo = sidebars[i];
           listData.push({
             itemType: 'childThread',
             key: `childThread${sidebarInfo.id}`,
             threadInfo: sidebarInfo,
             firstListItem: i === 0,
             lastListItem: i === numItems - 1 && numItems === sidebars.length,
           });
         }
 
         if (numItems < sidebars.length) {
           listData.push({
             itemType: 'seeMore',
             key: 'seeMoreSidebars',
             onPress: this.onPressSeeMoreSidebars,
           });
         }
 
         listData.push({
           itemType: 'footer',
           key: 'sidebarFooter',
           categoryType: 'unpadded',
         });
 
         return listData;
       },
     );
 
   threadMembersListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfo,
       (propsAndState: PropsAndState) => !propsAndState.somethingIsSaving,
       (propsAndState: PropsAndState) => propsAndState.navigation.navigate,
       (propsAndState: PropsAndState) => propsAndState.route.key,
       (propsAndState: PropsAndState) => propsAndState.numMembersShowing,
       (propsAndState: PropsAndState) => propsAndState.verticalBounds,
       (
         threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         canStartEditing: boolean,
         navigate: ThreadSettingsNavigate,
         routeKey: string,
         numMembersShowing: number,
         verticalBounds: ?VerticalBounds,
       ) => {
         const listData: ChatSettingsItem[] = [];
 
         const canAddMembers = threadHasPermission(
           threadInfo,
           threadPermissions.ADD_MEMBERS,
         );
         if (threadInfo.members.length === 0 && !canAddMembers) {
           return listData;
         }
 
         listData.push({
           itemType: 'header',
           key: 'memberHeader',
           title: 'Members',
           categoryType: 'unpadded',
         });
 
         if (canAddMembers) {
           listData.push({
             itemType: 'addMember',
             key: 'addMember',
           });
         }
 
         const numItems = Math.min(numMembersShowing, threadInfo.members.length);
         for (let i = 0; i < numItems; i++) {
           const memberInfo = threadInfo.members[i];
           listData.push({
             itemType: 'member',
             key: `member${memberInfo.id}`,
             memberInfo,
             threadInfo,
             canEdit: canStartEditing,
             navigate,
             firstListItem: i === 0 && !canAddMembers,
             lastListItem:
               i === numItems - 1 && numItems === threadInfo.members.length,
             verticalBounds,
             threadSettingsRouteKey: routeKey,
           });
         }
 
         if (numItems < threadInfo.members.length) {
           listData.push({
             itemType: 'seeMore',
             key: 'seeMoreMembers',
             onPress: this.onPressSeeMoreMembers,
           });
         }
 
         listData.push({
           itemType: 'footer',
           key: 'memberFooter',
           categoryType: 'unpadded',
         });
 
         return listData;
       },
     );
 
   mediaGalleryListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfo,
       (propsAndState: PropsAndState) => propsAndState.verticalBounds,
       (
         threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
         verticalBounds: ?VerticalBounds,
       ) => {
         const listData: ChatSettingsItem[] = [];
         const limit = 6;
 
         listData.push({
           itemType: 'actionHeader',
           key: 'mediaGalleryHeader',
           title: 'Media Gallery',
           actionText: 'See more',
           onPress: this.onPressSeeMoreMediaGallery,
         });
 
         listData.push({
           itemType: 'mediaGallery',
           key: 'mediaGallery',
           threadInfo,
           limit,
           verticalBounds,
         });
 
         listData.push({
           itemType: 'footer',
           key: 'mediaGalleryFooter',
           categoryType: 'outline',
         });
 
         return listData;
       },
     );
 
   actionsListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfo,
       (propsAndState: PropsAndState) => propsAndState.parentThreadInfo,
       (propsAndState: PropsAndState) => propsAndState.navigation.navigate,
       (propsAndState: PropsAndState) => propsAndState.styles,
       (propsAndState: PropsAndState) => propsAndState.userInfos,
       (propsAndState: PropsAndState) => propsAndState.viewerID,
       (
         threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         parentThreadInfo:
           | ?ResolvedThreadInfo
           | ?MinimallyEncodedResolvedThreadInfo,
         navigate: ThreadSettingsNavigate,
-        styles: typeof unboundStyles,
+        styles: $ReadOnly<typeof unboundStyles>,
         userInfos: UserInfos,
         viewerID: ?string,
       ) => {
         const buttons = [];
 
         if (this.props.canPromoteSidebar) {
           buttons.push({
             itemType: 'promoteSidebar',
             key: 'promoteSidebar',
             threadInfo,
             navigate,
           });
         }
 
         const canLeaveThread = threadHasPermission(
           threadInfo,
           threadPermissions.LEAVE_THREAD,
         );
 
         if (viewerIsMember(threadInfo) && canLeaveThread) {
           buttons.push({
             itemType: 'leaveThread',
             key: 'leaveThread',
             threadInfo,
             navigate,
           });
         }
 
         const canDeleteThread = threadHasPermission(
           threadInfo,
           threadPermissions.DELETE_THREAD,
         );
         if (canDeleteThread) {
           buttons.push({
             itemType: 'deleteThread',
             key: 'deleteThread',
             threadInfo,
             navigate,
           });
         }
 
         const threadIsPersonal = threadInfo.type === threadTypes.PERSONAL;
         if (threadIsPersonal && viewerID) {
           const otherMemberID = getSingleOtherUser(threadInfo, viewerID);
           if (otherMemberID) {
             const otherUserInfo = userInfos[otherMemberID];
             const availableRelationshipActions =
               getAvailableRelationshipButtons(otherUserInfo);
 
             for (const action of availableRelationshipActions) {
               buttons.push({
                 itemType: 'editRelationship',
                 key: action,
                 threadInfo,
                 navigate,
                 relationshipButton: action,
               });
             }
           }
         }
 
         const listData: ChatSettingsItem[] = [];
         if (buttons.length === 0) {
           return listData;
         }
 
         listData.push({
           itemType: 'header',
           key: 'actionsHeader',
           title: 'Actions',
           categoryType: 'unpadded',
         });
         for (let i = 0; i < buttons.length; i++) {
           // Necessary for Flow...
           if (buttons[i].itemType === 'editRelationship') {
             listData.push({
               ...buttons[i],
               buttonStyle: [
                 i === 0 ? null : styles.nonTopButton,
                 i === buttons.length - 1 ? styles.lastButton : null,
               ],
             });
           } else {
             listData.push({
               ...buttons[i],
               buttonStyle: [
                 i === 0 ? null : styles.nonTopButton,
                 i === buttons.length - 1 ? styles.lastButton : null,
               ],
             });
           }
         }
         listData.push({
           itemType: 'footer',
           key: 'actionsFooter',
           categoryType: 'unpadded',
         });
 
         return listData;
       },
     );
 
   listDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       this.threadBasicsListDataSelector,
       this.subchannelsListDataSelector,
       this.sidebarsListDataSelector,
       this.threadMembersListDataSelector,
       this.mediaGalleryListDataSelector,
       this.actionsListDataSelector,
       (
         threadBasicsListData: $ReadOnlyArray<ChatSettingsItem>,
         subchannelsListData: $ReadOnlyArray<ChatSettingsItem>,
         sidebarsListData: $ReadOnlyArray<ChatSettingsItem>,
         threadMembersListData: $ReadOnlyArray<ChatSettingsItem>,
         mediaGalleryListData: $ReadOnlyArray<ChatSettingsItem>,
         actionsListData: $ReadOnlyArray<ChatSettingsItem>,
       ) => [
         ...threadBasicsListData,
         ...subchannelsListData,
         ...sidebarsListData,
         ...threadMembersListData,
         ...mediaGalleryListData,
         ...actionsListData,
       ],
     );
 
   get listData(): $ReadOnlyArray<ChatSettingsItem> {
     return this.listDataSelector({ ...this.props, ...this.state });
   }
 
   render(): React.Node {
     return (
       <View
         style={this.props.styles.container}
         ref={this.flatListContainerRef}
         onLayout={this.onFlatListContainerLayout}
       >
         <ThreadAncestors threadInfo={this.props.threadInfo} />
         <FlatList
           data={this.listData}
           contentContainerStyle={this.props.styles.flatList}
           renderItem={this.renderItem}
           scrollEnabled={!ThreadSettings.scrollDisabled(this.props)}
           indicatorStyle={this.props.indicatorStyle}
           initialNumToRender={20}
         />
       </View>
     );
   }
 
   flatListContainerRef = (
     flatListContainer: ?React.ElementRef<typeof View>,
   ) => {
     this.flatListContainer = flatListContainer;
   };
 
   onFlatListContainerLayout = () => {
     const { flatListContainer } = this;
     if (!flatListContainer) {
       return;
     }
 
     const { keyboardState } = this.props;
     if (!keyboardState || keyboardState.keyboardShowing) {
       return;
     }
 
     flatListContainer.measure((x, y, width, height, pageX, pageY) => {
       if (
         height === null ||
         height === undefined ||
         pageY === null ||
         pageY === undefined
       ) {
         return;
       }
       this.setState({ verticalBounds: { height, y: pageY } });
     });
   };
 
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   renderItem = (row: { +item: ChatSettingsItem, ... }): React.Node => {
     const item = row.item;
     if (item.itemType === 'header') {
       return (
         <ThreadSettingsCategoryHeader
           type={item.categoryType}
           title={item.title}
         />
       );
     } else if (item.itemType === 'actionHeader') {
       return (
         <ThreadSettingsCategoryActionHeader
           title={item.title}
           actionText={item.actionText}
           onPress={item.onPress}
         />
       );
     } else if (item.itemType === 'footer') {
       return <ThreadSettingsCategoryFooter type={item.categoryType} />;
     } else if (item.itemType === 'avatar') {
       return (
         <ThreadSettingsAvatar
           threadInfo={item.threadInfo}
           canChangeSettings={item.canChangeSettings}
         />
       );
     } else if (item.itemType === 'name') {
       return (
         <ThreadSettingsName
           threadInfo={item.threadInfo}
           nameEditValue={item.nameEditValue}
           setNameEditValue={this.setNameEditValue}
           canChangeSettings={item.canChangeSettings}
         />
       );
     } else if (item.itemType === 'color') {
       return (
         <ThreadSettingsColor
           threadInfo={item.threadInfo}
           colorEditValue={item.colorEditValue}
           setColorEditValue={this.setColorEditValue}
           canChangeSettings={item.canChangeSettings}
           navigate={item.navigate}
           threadSettingsRouteKey={item.threadSettingsRouteKey}
         />
       );
     } else if (item.itemType === 'description') {
       return (
         <ThreadSettingsDescription
           threadInfo={item.threadInfo}
           descriptionEditValue={item.descriptionEditValue}
           setDescriptionEditValue={this.setDescriptionEditValue}
           descriptionTextHeight={item.descriptionTextHeight}
           setDescriptionTextHeight={this.setDescriptionTextHeight}
           canChangeSettings={item.canChangeSettings}
         />
       );
     } else if (item.itemType === 'parent') {
       return (
         <ThreadSettingsParent
           threadInfo={item.threadInfo}
           parentThreadInfo={item.parentThreadInfo}
         />
       );
     } else if (item.itemType === 'visibility') {
       return <ThreadSettingsVisibility threadInfo={item.threadInfo} />;
     } else if (item.itemType === 'pushNotifs') {
       return <ThreadSettingsPushNotifs threadInfo={item.threadInfo} />;
     } else if (item.itemType === 'homeNotifs') {
       return <ThreadSettingsHomeNotifs threadInfo={item.threadInfo} />;
     } else if (item.itemType === 'seeMore') {
       return <ThreadSettingsSeeMore onPress={item.onPress} />;
     } else if (item.itemType === 'childThread') {
       return (
         <ThreadSettingsChildThread
           threadInfo={item.threadInfo}
           firstListItem={item.firstListItem}
           lastListItem={item.lastListItem}
         />
       );
     } else if (item.itemType === 'addSubchannel') {
       return (
         <ThreadSettingsAddSubchannel onPress={this.onPressComposeSubchannel} />
       );
     } else if (item.itemType === 'member') {
       return (
         <ThreadSettingsMember
           memberInfo={item.memberInfo}
           threadInfo={item.threadInfo}
           canEdit={item.canEdit}
           navigate={item.navigate}
           firstListItem={item.firstListItem}
           lastListItem={item.lastListItem}
           verticalBounds={item.verticalBounds}
           threadSettingsRouteKey={item.threadSettingsRouteKey}
         />
       );
     } else if (item.itemType === 'addMember') {
       return <ThreadSettingsAddMember onPress={this.onPressAddMember} />;
     } else if (item.itemType === 'mediaGallery') {
       return (
         <ThreadSettingsMediaGallery
           threadID={item.threadInfo.id}
           limit={item.limit}
           verticalBounds={item.verticalBounds}
         />
       );
     } else if (item.itemType === 'leaveThread') {
       return (
         <ThreadSettingsLeaveThread
           threadInfo={item.threadInfo}
           buttonStyle={item.buttonStyle}
         />
       );
     } else if (item.itemType === 'deleteThread') {
       return (
         <ThreadSettingsDeleteThread
           threadInfo={item.threadInfo}
           navigate={item.navigate}
           buttonStyle={item.buttonStyle}
         />
       );
     } else if (item.itemType === 'promoteSidebar') {
       return (
         <ThreadSettingsPromoteSidebar
           threadInfo={item.threadInfo}
           buttonStyle={item.buttonStyle}
         />
       );
     } else if (item.itemType === 'editRelationship') {
       return (
         <ThreadSettingsEditRelationship
           threadInfo={item.threadInfo}
           relationshipButton={item.relationshipButton}
           buttonStyle={item.buttonStyle}
         />
       );
     } else {
       invariant(false, `unexpected ThreadSettings item type ${item.itemType}`);
     }
   };
 
   setNameEditValue = (value: ?string, callback?: () => void) => {
     this.setState({ nameEditValue: value }, callback);
   };
 
   setColorEditValue = (color: string) => {
     this.setState({ colorEditValue: color });
   };
 
   setDescriptionEditValue = (value: ?string, callback?: () => void) => {
     this.setState({ descriptionEditValue: value }, callback);
   };
 
   setDescriptionTextHeight = (height: number) => {
     this.setState({ descriptionTextHeight: height });
   };
 
   onPressComposeSubchannel = () => {
     this.props.navigation.navigate(ComposeSubchannelModalRouteName, {
       presentedFrom: this.props.route.key,
       threadInfo: this.props.threadInfo,
     });
   };
 
   onPressAddMember = () => {
     this.props.navigation.navigate(AddUsersModalRouteName, {
       presentedFrom: this.props.route.key,
       threadInfo: this.props.threadInfo,
     });
   };
 
   onPressSeeMoreMembers = () => {
     this.setState(prevState => ({
       numMembersShowing: prevState.numMembersShowing + itemPageLength,
     }));
   };
 
   onPressSeeMoreSubchannels = () => {
     this.setState(prevState => ({
       numSubchannelsShowing: prevState.numSubchannelsShowing + itemPageLength,
     }));
   };
 
   onPressSeeMoreSidebars = () => {
     this.setState(prevState => ({
       numSidebarsShowing: prevState.numSidebarsShowing + itemPageLength,
     }));
   };
 
   onPressSeeMoreMediaGallery = () => {
     this.props.navigation.navigate(FullScreenThreadMediaGalleryRouteName, {
       threadInfo: this.props.threadInfo,
     });
   };
 }
 
 const threadMembersChangeIsSaving = (
   state: AppState,
   threadMembers: $ReadOnlyArray<
     RelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
   >,
 ) => {
   for (const threadMember of threadMembers) {
     const removeUserLoadingStatus = createLoadingStatusSelector(
       removeUsersFromThreadActionTypes,
       `${removeUsersFromThreadActionTypes.started}:${threadMember.id}`,
     )(state);
     if (removeUserLoadingStatus === 'loading') {
       return true;
     }
     const changeRoleLoadingStatus = createLoadingStatusSelector(
       changeThreadMemberRolesActionTypes,
       `${changeThreadMemberRolesActionTypes.started}:${threadMember.id}`,
     )(state);
     if (changeRoleLoadingStatus === 'loading') {
       return true;
     }
   }
   return false;
 };
 
 const ConnectedThreadSettings: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettings(props: BaseProps) {
     const userInfos = useSelector(state => state.userStore.userInfos);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const threadID = props.route.params.threadInfo.id;
 
     const reduxThreadInfo: ?ThreadInfo = useSelector(
       state => threadInfoSelector(state)[threadID],
     );
     React.useEffect(() => {
       invariant(
         reduxThreadInfo,
         'ReduxThreadInfo should exist when ThreadSettings is opened',
       );
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const { setParams } = props.navigation;
     React.useEffect(() => {
       if (reduxThreadInfo) {
         setParams({ threadInfo: reduxThreadInfo });
       }
     }, [reduxThreadInfo, setParams]);
     const threadInfo: ThreadInfo | MinimallyEncodedThreadInfo =
       reduxThreadInfo ?? props.route.params.threadInfo;
     const resolvedThreadInfo = useResolvedThreadInfo(threadInfo);
 
     React.useEffect(() => {
       if (threadInChatList(threadInfo)) {
         return undefined;
       }
       threadWatcher.watchID(threadInfo.id);
       return () => {
         threadWatcher.removeID(threadInfo.id);
       };
     }, [threadInfo]);
 
     const parentThreadID = threadInfo.parentThreadID;
     const parentThreadInfo: ?ThreadInfo = useSelector(state =>
       parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
     );
     const resolvedParentThreadInfo =
       useResolvedOptionalThreadInfo(parentThreadInfo);
     const threadMembers = threadInfo.members;
     const boundChildThreadInfos = useSelector(
       state => childThreadInfos(state)[threadID],
     );
     const resolvedChildThreadInfos = useResolvedOptionalThreadInfos(
       boundChildThreadInfos,
     );
 
     const somethingIsSaving = useSelector(state => {
       const editNameLoadingStatus = createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:name`,
       )(state);
 
       const editColorLoadingStatus = createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:color`,
       )(state);
 
       const editDescriptionLoadingStatus = createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:description`,
       )(state);
 
       const leaveThreadLoadingStatus = createLoadingStatusSelector(
         leaveThreadActionTypes,
         `${leaveThreadActionTypes.started}:${threadID}`,
       )(state);
 
       const boundThreadMembersChangeIsSaving = threadMembersChangeIsSaving(
         state,
         threadMembers,
       );
 
       return (
         boundThreadMembersChangeIsSaving ||
         editNameLoadingStatus === 'loading' ||
         editColorLoadingStatus === 'loading' ||
         editDescriptionLoadingStatus === 'loading' ||
         leaveThreadLoadingStatus === 'loading'
       );
     });
 
     const { navigation } = props;
     React.useEffect(() => {
       const tabNavigation = navigation.getParent<
         ScreenParamList,
         'Chat',
         TabNavigationState,
         BottomTabOptions,
         BottomTabNavigationEventMap,
         TabNavigationProp<'Chat'>,
       >();
       invariant(tabNavigation, 'ChatNavigator should be within TabNavigator');
 
       const onTabPress = () => {
         if (navigation.isFocused() && !somethingIsSaving) {
           navigation.popToTop();
         }
       };
 
       tabNavigation.addListener('tabPress', onTabPress);
       return () => tabNavigation.removeListener('tabPress', onTabPress);
     }, [navigation, somethingIsSaving]);
 
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
     const overlayContext = React.useContext(OverlayContext);
     const keyboardState = React.useContext(KeyboardContext);
     const { canPromoteSidebar } = usePromoteSidebar(threadInfo);
 
     return (
       <ThreadSettings
         {...props}
         userInfos={userInfos}
         viewerID={viewerID}
         threadInfo={resolvedThreadInfo}
         parentThreadInfo={resolvedParentThreadInfo}
         childThreadInfos={resolvedChildThreadInfos}
         somethingIsSaving={somethingIsSaving}
         styles={styles}
         indicatorStyle={indicatorStyle}
         overlayContext={overlayContext}
         keyboardState={keyboardState}
         canPromoteSidebar={canPromoteSidebar}
       />
     );
   });
 
 export default ConnectedThreadSettings;
diff --git a/native/chat/thread-settings-button.react.js b/native/chat/thread-settings-button.react.js
index bc9ec4473..330e06260 100644
--- a/native/chat/thread-settings-button.react.js
+++ b/native/chat/thread-settings-button.react.js
@@ -1,62 +1,62 @@
 // @flow
 
 import * as React from 'react';
 
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 
 import type { ChatNavigationProp } from './chat.react.js';
 import Button from '../components/button.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { ThreadSettingsRouteName } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
 
 const unboundStyles = {
   button: {
     color: 'panelForegroundLabel',
     paddingHorizontal: 10,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +navigate: $PropertyType<ChatNavigationProp<'MessageList'>, 'navigate'>,
 };
 type Props = {
   ...BaseProps,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
 };
 
 class ThreadSettingsButton extends React.PureComponent<Props> {
   render(): React.Node {
     return (
       <Button onPress={this.onPress} androidBorderlessRipple={true}>
         <SWMansionIcon
           name="settings"
           size={24}
           style={this.props.styles.button}
         />
       </Button>
     );
   }
 
   onPress = () => {
     const threadInfo = this.props.threadInfo;
     this.props.navigate<'ThreadSettings'>({
       name: ThreadSettingsRouteName,
       params: { threadInfo },
       key: `${ThreadSettingsRouteName}${threadInfo.id}`,
     });
   };
 }
 
 const ConnectedThreadSettingsButton: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsButton(
     props: BaseProps,
   ) {
     const styles = useStyles(unboundStyles);
 
     return <ThreadSettingsButton {...props} styles={styles} />;
   });
 
 export default ConnectedThreadSettingsButton;
diff --git a/native/components/link-button.react.js b/native/components/link-button.react.js
index ac0ac21dd..9d95cb237 100644
--- a/native/components/link-button.react.js
+++ b/native/components/link-button.react.js
@@ -1,59 +1,59 @@
 // @flow
 
 import * as React from 'react';
 import { Text } from 'react-native';
 
 import Button from './button.react.js';
 import { useStyles } from '../themes/colors.js';
 import type { ViewStyle } from '../types/styles.js';
 
 const unboundStyles = {
   disabled: {
     color: 'modalBackgroundSecondaryLabel',
   },
   text: {
     color: 'link',
     fontSize: 17,
     paddingHorizontal: 10,
   },
 };
 
 type BaseProps = {
   +text: string,
   +onPress: () => void,
   +disabled?: boolean,
   +style?: ViewStyle,
 };
 type Props = {
   ...BaseProps,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
 };
 class LinkButton extends React.PureComponent<Props> {
   render(): React.Node {
     const disabledStyle = this.props.disabled
       ? this.props.styles.disabled
       : null;
     return (
       <Button
         onPress={this.props.onPress}
         androidBorderlessRipple={true}
         iosActiveOpacity={0.85}
         disabled={!!this.props.disabled}
         style={this.props.style}
       >
         <Text style={[this.props.styles.text, disabledStyle]}>
           {this.props.text}
         </Text>
       </Button>
     );
   }
 }
 
 const ConnectedLinkButton: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedLinkButton(props: BaseProps) {
     const styles = useStyles(unboundStyles);
 
     return <LinkButton {...props} styles={styles} />;
   });
 
 export default ConnectedLinkButton;
diff --git a/native/components/thread-list-thread.react.js b/native/components/thread-list-thread.react.js
index b0848b72f..c654c798c 100644
--- a/native/components/thread-list-thread.react.js
+++ b/native/components/thread-list-thread.react.js
@@ -1,87 +1,87 @@
 // @flow
 
 import * as React from 'react';
 
 import type { MinimallyEncodedResolvedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { ThreadInfo, ResolvedThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import Button from './button.react.js';
 import SingleLine from './single-line.react.js';
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
 import { type Colors, useStyles, useColors } from '../themes/colors.js';
 import type { ViewStyle, TextStyle } from '../types/styles.js';
 
 const unboundStyles = {
   button: {
     alignItems: 'center',
     flexDirection: 'row',
     paddingLeft: 13,
   },
   text: {
     color: 'modalForegroundLabel',
     fontSize: 16,
     paddingLeft: 9,
     paddingRight: 12,
     paddingVertical: 6,
   },
 };
 
 type SharedProps = {
   +onSelect: (threadID: string) => void,
   +style?: ViewStyle,
   +textStyle?: TextStyle,
 };
 type BaseProps = {
   ...SharedProps,
   +threadInfo: ThreadInfo,
 };
 type Props = {
   ...SharedProps,
   +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
 };
 class ThreadListThread extends React.PureComponent<Props> {
   render(): React.Node {
     const { modalIosHighlightUnderlay: underlayColor } = this.props.colors;
 
     return (
       <Button
         onPress={this.onSelect}
         iosFormat="highlight"
         iosHighlightUnderlayColor={underlayColor}
         iosActiveOpacity={0.85}
         style={[this.props.styles.button, this.props.style]}
       >
         <ThreadAvatar size="S" threadInfo={this.props.threadInfo} />
         <SingleLine style={[this.props.styles.text, this.props.textStyle]}>
           {this.props.threadInfo.uiName}
         </SingleLine>
       </Button>
     );
   }
 
   onSelect = () => {
     this.props.onSelect(this.props.threadInfo.id);
   };
 }
 
 const ConnectedThreadListThread: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadListThread(props: BaseProps) {
     const { threadInfo, ...rest } = props;
     const styles = useStyles(unboundStyles);
     const colors = useColors();
     const resolvedThreadInfo = useResolvedThreadInfo(threadInfo);
 
     return (
       <ThreadListThread
         {...rest}
         threadInfo={resolvedThreadInfo}
         styles={styles}
         colors={colors}
       />
     );
   });
 
 export default ConnectedThreadListThread;
diff --git a/native/components/thread-list.react.js b/native/components/thread-list.react.js
index 988bd2292..a26e801e0 100644
--- a/native/components/thread-list.react.js
+++ b/native/components/thread-list.react.js
@@ -1,157 +1,157 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { FlatList, TextInput } from 'react-native';
 import { createSelector } from 'reselect';
 
 import SearchIndex from 'lib/shared/search-index.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import Search from './search.react.js';
 import ThreadListThread from './thread-list-thread.react.js';
 import {
   type IndicatorStyle,
   useStyles,
   useIndicatorStyle,
 } from '../themes/colors.js';
 import type { ViewStyle, TextStyle } from '../types/styles.js';
 import { waitForModalInputFocus } from '../utils/timers.js';
 
 const unboundStyles = {
   search: {
     marginBottom: 8,
   },
 };
 
 type BaseProps = {
   +threadInfos: $ReadOnlyArray<ThreadInfo>,
   +onSelect: (threadID: string) => void,
   +itemStyle?: ViewStyle,
   +itemTextStyle?: TextStyle,
   +searchIndex?: SearchIndex,
 };
 type Props = {
   ...BaseProps,
   // Redux state
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +indicatorStyle: IndicatorStyle,
 };
 type State = {
   +searchText: string,
   +searchResults: Set<string>,
 };
 type PropsAndState = { ...Props, ...State };
 class ThreadList extends React.PureComponent<Props, State> {
   state: State = {
     searchText: '',
     searchResults: new Set(),
   };
   textInput: ?React.ElementRef<typeof TextInput>;
 
   listDataSelector: PropsAndState => $ReadOnlyArray<ThreadInfo> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfos,
       (propsAndState: PropsAndState) => propsAndState.searchText,
       (propsAndState: PropsAndState) => propsAndState.searchResults,
       (propsAndState: PropsAndState) => propsAndState.itemStyle,
       (propsAndState: PropsAndState) => propsAndState.itemTextStyle,
       (
         threadInfos: $ReadOnlyArray<ThreadInfo>,
         text: string,
         searchResults: Set<string>,
       ): $ReadOnlyArray<ThreadInfo> =>
         text
           ? threadInfos.filter(threadInfo => searchResults.has(threadInfo.id))
           : // We spread to make sure the result of this selector updates when
             // any input param (namely itemStyle or itemTextStyle) changes
             [...threadInfos],
     );
 
   get listData(): $ReadOnlyArray<ThreadInfo> {
     return this.listDataSelector({ ...this.props, ...this.state });
   }
 
   render(): React.Node {
     let searchBar = null;
     if (this.props.searchIndex) {
       searchBar = (
         <Search
           searchText={this.state.searchText}
           onChangeText={this.onChangeSearchText}
           containerStyle={this.props.styles.search}
           placeholder="Search chats"
           ref={this.searchRef}
         />
       );
     }
     return (
       <React.Fragment>
         {searchBar}
         <FlatList
           data={this.listData}
           renderItem={this.renderItem}
           keyExtractor={ThreadList.keyExtractor}
           getItemLayout={ThreadList.getItemLayout}
           keyboardShouldPersistTaps="handled"
           initialNumToRender={20}
           indicatorStyle={this.props.indicatorStyle}
         />
       </React.Fragment>
     );
   }
 
   static keyExtractor = (
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ): string => {
     return threadInfo.id;
   };
 
   renderItem = (row: { +item: ThreadInfo, ... }): React.Node => {
     return (
       <ThreadListThread
         threadInfo={row.item}
         onSelect={this.props.onSelect}
         style={this.props.itemStyle}
         textStyle={this.props.itemTextStyle}
       />
     );
   };
 
   static getItemLayout = (
     data: ?$ReadOnlyArray<ThreadInfo | MinimallyEncodedThreadInfo>,
     index: number,
   ): { length: number, offset: number, index: number } => {
     return { length: 24, offset: 24 * index, index };
   };
 
   onChangeSearchText = (searchText: string) => {
     invariant(this.props.searchIndex, 'should be set');
     const results = this.props.searchIndex.getSearchResults(searchText);
     this.setState({ searchText, searchResults: new Set(results) });
   };
 
   searchRef = async (textInput: ?React.ElementRef<typeof TextInput>) => {
     this.textInput = textInput;
     if (!textInput) {
       return;
     }
     await waitForModalInputFocus();
     if (this.textInput) {
       this.textInput.focus();
     }
   };
 }
 
 const ConnectedThreadList: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadList(props: BaseProps) {
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
 
     return (
       <ThreadList {...props} styles={styles} indicatorStyle={indicatorStyle} />
     );
   });
 
 export default ConnectedThreadList;
diff --git a/native/components/user-list-user.react.js b/native/components/user-list-user.react.js
index 8a309acf6..d6b4cb4bb 100644
--- a/native/components/user-list-user.react.js
+++ b/native/components/user-list-user.react.js
@@ -1,98 +1,98 @@
 // @flow
 
 import * as React from 'react';
 import { Text, Platform } from 'react-native';
 
 import type { UserListItem, AccountUserInfo } from 'lib/types/user-types.js';
 
 import Button from './button.react.js';
 import SingleLine from './single-line.react.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import type { TextStyle } from '../types/styles.js';
 import Alert from '../utils/alert.js';
 
 // eslint-disable-next-line no-unused-vars
 const getUserListItemHeight = (item: UserListItem): number => {
   // TODO consider parent thread notice
   return Platform.OS === 'ios' ? 31.5 : 33.5;
 };
 
 const unboundStyles = {
   button: {
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   notice: {
     color: 'modalForegroundSecondaryLabel',
     fontStyle: 'italic',
   },
   text: {
     color: 'modalForegroundLabel',
     flex: 1,
     fontSize: 16,
     paddingHorizontal: 12,
     paddingVertical: 6,
   },
 };
 
 type BaseProps = {
   +userInfo: UserListItem,
   +onSelect: (user: AccountUserInfo) => void,
   +textStyle?: TextStyle,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
 };
 class UserListUser extends React.PureComponent<Props> {
   render(): React.Node {
     const { userInfo } = this.props;
     let notice = null;
     if (userInfo.notice) {
       notice = <Text style={this.props.styles.notice}>{userInfo.notice}</Text>;
     }
     const { modalIosHighlightUnderlay: underlayColor } = this.props.colors;
 
     return (
       <Button
         onPress={this.onSelect}
         disabled={userInfo.disabled}
         iosFormat="highlight"
         iosHighlightUnderlayColor={underlayColor}
         iosActiveOpacity={0.85}
         style={this.props.styles.button}
       >
         <UserAvatar size="S" userID={this.props.userInfo.id} />
         <SingleLine style={[this.props.styles.text, this.props.textStyle]}>
           {this.props.userInfo.username}
         </SingleLine>
         {notice}
       </Button>
     );
   }
 
   onSelect = () => {
     const { userInfo } = this.props;
     if (!userInfo.alert) {
       const { alert, notice, disabled, ...accountUserInfo } = userInfo;
       this.props.onSelect(accountUserInfo);
       return;
     }
     Alert.alert(userInfo.alert.title, userInfo.alert.text, [{ text: 'OK' }], {
       cancelable: true,
     });
   };
 }
 
 const ConnectedUserListUser: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedUserListUser(props: BaseProps) {
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     return <UserListUser {...props} colors={colors} styles={styles} />;
   });
 
 export { ConnectedUserListUser as UserListUser, getUserListItemHeight };
diff --git a/native/keyboard/keyboard-input-host.react.js b/native/keyboard/keyboard-input-host.react.js
index bbbf61c1e..311d743c1 100644
--- a/native/keyboard/keyboard-input-host.react.js
+++ b/native/keyboard/keyboard-input-host.react.js
@@ -1,123 +1,123 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { TextInput } from 'react-native';
 import { KeyboardAccessoryView } from 'react-native-keyboard-input';
 
 import type { MediaLibrarySelection } from 'lib/types/media-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import { type KeyboardState, KeyboardContext } from './keyboard-state.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import { mediaGalleryKeyboardName } from '../media/media-gallery-keyboard.react.js';
 import { activeMessageListSelector } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { useStyles } from '../themes/colors.js';
 
 const unboundStyles = {
   // This is a special style needed by 'react-native-keyboard-input':
   // https://github.com/wix/react-native-keyboard-input/blob/acb3a58e96988026f449b48e8b49f49164684d9f/src/KeyboardAccessoryView.js#L115
   kbInitialProps: {
     backgroundColor: 'listBackground',
   },
 };
 
 type BaseProps = {
   +textInputRef?: ?React.ElementRef<typeof TextInput>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +activeMessageList: ?string,
   // withKeyboardState
   +keyboardState: KeyboardState,
   // withInputState
   +inputState: ?InputState,
 };
 class KeyboardInputHost extends React.PureComponent<Props> {
   componentDidUpdate(prevProps: Props) {
     if (
       prevProps.activeMessageList &&
       this.props.activeMessageList !== prevProps.activeMessageList
     ) {
       this.hideMediaGallery();
     }
   }
 
   static mediaGalleryOpen(props: Props): boolean {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.mediaGalleryOpen);
   }
 
   render(): React.Node {
     const kbComponent = KeyboardInputHost.mediaGalleryOpen(this.props)
       ? mediaGalleryKeyboardName
       : null;
     const kbInitialProps = {
       ...this.props.styles.kbInitialProps,
       threadInfo: this.props.keyboardState.getMediaGalleryThread(),
     };
     return (
       <KeyboardAccessoryView
         kbInputRef={this.props.textInputRef}
         kbComponent={kbComponent}
         kbInitialProps={kbInitialProps}
         onItemSelected={this.onMediaGalleryItemSelected}
         onKeyboardResigned={this.hideMediaGallery}
         manageScrollView={false}
       />
     );
   }
 
   onMediaGalleryItemSelected = async (
     keyboardName: string,
     result: {
       +selections: $ReadOnlyArray<MediaLibrarySelection>,
       +threadInfo: ?ThreadInfo,
     },
   ) => {
     const { keyboardState } = this.props;
     keyboardState.dismissKeyboard();
 
     const { selections, threadInfo: mediaGalleryThread } = result;
     if (!mediaGalleryThread) {
       return;
     }
 
     const { inputState } = this.props;
     invariant(
       inputState,
       'inputState should be set in onMediaGalleryItemSelected',
     );
     inputState.sendMultimediaMessage(selections, mediaGalleryThread);
   };
 
   hideMediaGallery = () => {
     const { keyboardState } = this.props;
     keyboardState.hideMediaGallery();
   };
 }
 
 const ConnectedKeyboardInputHost: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedKeyboardInputHost(props: BaseProps) {
     const inputState = React.useContext(InputStateContext);
     const keyboardState = React.useContext(KeyboardContext);
     invariant(keyboardState, 'keyboardState should be initialized');
     const navContext = React.useContext(NavContext);
     const styles = useStyles(unboundStyles);
     const activeMessageList = activeMessageListSelector(navContext);
 
     return (
       <KeyboardInputHost
         {...props}
         styles={styles}
         activeMessageList={activeMessageList}
         keyboardState={keyboardState}
         inputState={inputState}
       />
     );
   });
 
 export default ConnectedKeyboardInputHost;
diff --git a/native/media/media-gallery-keyboard.react.js b/native/media/media-gallery-keyboard.react.js
index f92352d1c..cff4e4f73 100644
--- a/native/media/media-gallery-keyboard.react.js
+++ b/native/media/media-gallery-keyboard.react.js
@@ -1,685 +1,685 @@
 // @flow
 
 import * as ImagePicker from 'expo-image-picker';
 import * as MediaLibrary from 'expo-media-library';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   FlatList,
   ActivityIndicator,
   Animated,
   Easing,
   Platform,
 } from 'react-native';
 import { KeyboardRegistry } from 'react-native-keyboard-input';
 import { Provider } from 'react-redux';
 
 import {
   extensionFromFilename,
   filenameFromPathOrURI,
 } from 'lib/media/file-utils.js';
 import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils.js';
 import type { MediaLibrarySelection } from 'lib/types/media-types.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import { getCompatibleMediaURI } from './identifier-utils.js';
 import MediaGalleryMedia from './media-gallery-media.react.js';
 import SendMediaButton from './send-media-button.react.js';
 import Button from '../components/button.react.js';
 import type { DimensionsInfo } from '../redux/dimensions-updater.react.js';
 import { store } from '../redux/redux-setup.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import type {
   LayoutEvent,
   ViewableItemsChange,
 } from '../types/react-native.js';
 import type { ViewStyle } from '../types/styles.js';
 
 const animationSpec = {
   duration: 400,
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 
 const unboundStyles = {
   container: {
     backgroundColor: 'listBackground',
     position: 'absolute',
     left: 0,
     right: 0,
     top: 0,
   },
   galleryHeader: {
     height: 56,
     borderTopWidth: 1,
     borderColor: 'modalForegroundBorder',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingHorizontal: 16,
   },
   galleryHeaderTitle: {
     color: 'modalForegroundLabel',
     fontSize: 14,
     fontWeight: '500',
   },
   nativePickerButton: {
     backgroundColor: 'rgba(255, 255, 255, 0.08)',
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 7,
   },
   nativePickerButtonLabel: {
     color: 'modalButtonLabel',
     fontSize: 12,
     fontWeight: '500',
   },
   galleryContainer: {
     flex: 1,
     alignItems: 'center',
     flexDirection: 'row',
   },
   error: {
     color: 'listBackgroundLabel',
     flex: 1,
     fontSize: 28,
     textAlign: 'center',
   },
   loadingIndicator: {
     flex: 1,
   },
   sendButtonContainer: {
     bottom: 20,
     position: 'absolute',
     right: 30,
   },
   separator: {
     width: 2,
   },
 };
 
 type BaseProps = {
   +threadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +dimensions: DimensionsInfo,
   +foreground: boolean,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
 };
 type State = {
   +selections: ?$ReadOnlyArray<MediaLibrarySelection>,
   +error: ?string,
   +containerHeight: ?number,
   // null means end reached; undefined means no fetch yet
   +cursor: ?string,
   +queuedMediaURIs: ?Set<string>,
   +focusedMediaURI: ?string,
   +dimensions: DimensionsInfo,
 };
 class MediaGalleryKeyboard extends React.PureComponent<Props, State> {
   mounted = false;
   fetchingPhotos = false;
   flatList: ?FlatList<MediaLibrarySelection>;
   viewableIndices: number[] = [];
   queueModeProgress: Animated.Value = new Animated.Value(0);
   sendButtonStyle: ViewStyle;
   mediaSelected = false;
 
   constructor(props: Props) {
     super(props);
     const sendButtonScale = this.queueModeProgress.interpolate({
       inputRange: [0, 1],
       outputRange: ([1.3, 1]: number[]), // Flow...
     });
     this.sendButtonStyle = {
       opacity: this.queueModeProgress,
       transform: [{ scale: sendButtonScale }],
     };
     this.state = {
       selections: null,
       error: null,
       containerHeight: null,
       cursor: undefined,
       queuedMediaURIs: null,
       focusedMediaURI: null,
       dimensions: props.dimensions,
     };
   }
 
   static getDerivedStateFromProps(props: Props): Partial<State> {
     // We keep this in state since we pass this.state as
     // FlatList's extraData prop
     return { dimensions: props.dimensions };
   }
 
   componentDidMount() {
     this.mounted = true;
     this.fetchPhotos();
   }
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const { queuedMediaURIs } = this.state;
     const prevQueuedMediaURIs = prevState.queuedMediaURIs;
     if (queuedMediaURIs && !prevQueuedMediaURIs) {
       Animated.timing(this.queueModeProgress, {
         ...animationSpec,
         toValue: 1,
       }).start();
     } else if (!queuedMediaURIs && prevQueuedMediaURIs) {
       Animated.timing(this.queueModeProgress, {
         ...animationSpec,
         toValue: 0,
       }).start();
     }
 
     const { flatList, viewableIndices } = this;
     const { selections, focusedMediaURI } = this.state;
     let scrollingSomewhere = false;
     if (flatList && selections) {
       let newURI;
       if (focusedMediaURI && focusedMediaURI !== prevState.focusedMediaURI) {
         newURI = focusedMediaURI;
       } else if (
         queuedMediaURIs &&
         (!prevQueuedMediaURIs ||
           queuedMediaURIs.size > prevQueuedMediaURIs.size)
       ) {
         const flowMadeMeDoThis = queuedMediaURIs;
         for (const queuedMediaURI of flowMadeMeDoThis) {
           if (prevQueuedMediaURIs && prevQueuedMediaURIs.has(queuedMediaURI)) {
             continue;
           }
           newURI = queuedMediaURI;
           break;
         }
       }
       let index;
       if (newURI !== null && newURI !== undefined) {
         index = selections.findIndex(({ uri }) => uri === newURI);
       }
       if (index !== null && index !== undefined) {
         if (index === viewableIndices[0]) {
           scrollingSomewhere = true;
           flatList.scrollToIndex({ index });
         } else if (index === viewableIndices[viewableIndices.length - 1]) {
           scrollingSomewhere = true;
           flatList.scrollToIndex({ index, viewPosition: 1 });
         }
       }
     }
 
     if (this.props.foreground && !prevProps.foreground) {
       this.fetchPhotos();
     }
 
     if (
       !scrollingSomewhere &&
       this.flatList &&
       this.state.selections &&
       prevState.selections &&
       this.state.selections.length > 0 &&
       prevState.selections.length > 0 &&
       this.state.selections[0].uri !== prevState.selections[0].uri
     ) {
       this.flatList.scrollToIndex({ index: 0 });
     }
   }
 
   guardedSetState(change: Partial<State>) {
     if (this.mounted) {
       this.setState(change);
     }
   }
 
   async fetchPhotos(after?: ?string) {
     if (this.fetchingPhotos) {
       return;
     }
     this.fetchingPhotos = true;
     try {
       const hasPermission = await this.getPermissions();
       if (!hasPermission) {
         return;
       }
       const { assets, endCursor, hasNextPage } =
         await MediaLibrary.getAssetsAsync({
           first: 20,
           after,
           mediaType: [
             MediaLibrary.MediaType.photo,
             MediaLibrary.MediaType.video,
           ],
           sortBy: [MediaLibrary.SortBy.modificationTime],
         });
 
       let firstRemoved = false,
         lastRemoved = false;
 
       const mediaURIs = this.state.selections
         ? this.state.selections.map(({ uri }) => uri)
         : [];
       const existingURIs = new Set(mediaURIs);
       let first = true;
       const selections = assets
         .map(asset => {
           const { id, height, width, filename, mediaType, duration } = asset;
           const isVideo = mediaType === MediaLibrary.MediaType.video;
           const uri = getCompatibleMediaURI(
             asset.uri,
             extensionFromFilename(filename),
           );
 
           if (existingURIs.has(uri)) {
             if (first) {
               firstRemoved = true;
             }
             lastRemoved = true;
             first = false;
             return null;
           }
           first = false;
           lastRemoved = false;
           existingURIs.add(uri);
 
           if (isVideo) {
             return {
               step: 'video_library',
               dimensions: { height, width },
               uri,
               filename,
               mediaNativeID: id,
               duration,
               selectTime: 0,
               sendTime: 0,
               retries: 0,
             };
           } else {
             return {
               step: 'photo_library',
               dimensions: { height, width },
               uri,
               filename,
               mediaNativeID: id,
               selectTime: 0,
               sendTime: 0,
               retries: 0,
             };
           }
         })
         .filter(Boolean);
 
       let appendOrPrepend = after ? 'append' : 'prepend';
       if (firstRemoved && !lastRemoved) {
         appendOrPrepend = 'append';
       } else if (!firstRemoved && lastRemoved) {
         appendOrPrepend = 'prepend';
       }
 
       let newSelections = selections;
       if (this.state.selections) {
         if (appendOrPrepend === 'prepend') {
           newSelections = [...newSelections, ...this.state.selections];
         } else {
           newSelections = [...this.state.selections, ...newSelections];
         }
       }
 
       this.guardedSetState({
         selections: newSelections,
         error: null,
         cursor: hasNextPage ? endCursor : null,
       });
     } catch (e) {
       this.guardedSetState({
         selections: null,
         error: 'something went wrong :(',
       });
     }
     this.fetchingPhotos = false;
   }
 
   openNativePicker = async () => {
     try {
       const { assets, canceled } = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.All,
         allowsEditing: false,
         allowsMultipleSelection: true,
         // maximum quality is 1 - it disables compression
         quality: 1,
         // we don't want to compress videos at this point
         videoExportPreset: ImagePicker.VideoExportPreset.Passthrough,
       });
 
       if (canceled || assets.length === 0) {
         return;
       }
 
       const selections = assets.map(asset => {
         const {
           width,
           height,
           fileName,
           type,
           duration,
           assetId: mediaNativeID,
         } = asset;
         const isVideo = type === 'video';
         const filename = fileName || filenameFromPathOrURI(asset.uri) || '';
         const uri = getCompatibleMediaURI(
           asset.uri,
           extensionFromFilename(filename),
         );
 
         if (isVideo) {
           return {
             step: 'video_library',
             dimensions: { height, width },
             uri,
             filename,
             mediaNativeID,
             duration,
             selectTime: 0,
             sendTime: 0,
             retries: 0,
           };
         } else {
           return {
             step: 'photo_library',
             dimensions: { height, width },
             uri,
             filename,
             mediaNativeID,
             selectTime: 0,
             sendTime: 0,
             retries: 0,
           };
         }
       });
 
       this.sendMedia(selections);
     } catch (e) {
       if (__DEV__) {
         console.warn(e);
       }
       this.guardedSetState({
         selections: null,
         error: 'something went wrong :(',
       });
     }
   };
 
   async getPermissions(): Promise<boolean> {
     const { granted } = await MediaLibrary.requestPermissionsAsync();
     if (!granted) {
       this.guardedSetState({ error: "don't have permission :(" });
     }
     return granted;
   }
 
   get queueModeActive(): boolean {
     return !!this.state.queuedMediaURIs;
   }
 
   renderItem = (row: { +item: MediaLibrarySelection, ... }): React.Node => {
     const { containerHeight, queuedMediaURIs } = this.state;
     invariant(containerHeight, 'should be set');
     const { uri } = row.item;
     const isQueued = !!(queuedMediaURIs && queuedMediaURIs.has(uri));
     const { queueModeActive } = this;
     return (
       <MediaGalleryMedia
         selection={row.item}
         containerHeight={containerHeight}
         queueModeActive={queueModeActive}
         isQueued={isQueued}
         setMediaQueued={this.setMediaQueued}
         sendMedia={this.sendSingleMedia}
         isFocused={this.state.focusedMediaURI === uri}
         setFocus={this.setFocus}
         dimensions={this.state.dimensions}
       />
     );
   };
 
   ItemSeparator = (): React.Node => {
     return <View style={this.props.styles.separator} />;
   };
 
   static keyExtractor = (item: MediaLibrarySelection): string => {
     return item.uri;
   };
 
   GalleryHeader = (): React.Node => (
     <View style={this.props.styles.galleryHeader}>
       <Text style={this.props.styles.galleryHeaderTitle}>Photos</Text>
       <Button
         onPress={this.openNativePicker}
         style={this.props.styles.nativePickerButton}
       >
         <Text style={this.props.styles.nativePickerButtonLabel}>
           Browse all Photos
         </Text>
       </Button>
     </View>
   );
 
   render(): React.Node {
     let content;
     const { selections, error, containerHeight } = this.state;
     const bottomOffsetStyle: ViewStyle = {
       marginBottom: this.props.dimensions.bottomInset,
     };
     if (selections && selections.length > 0 && containerHeight) {
       content = (
         <FlatList
           horizontal={true}
           data={selections}
           renderItem={this.renderItem}
           ItemSeparatorComponent={this.ItemSeparator}
           keyExtractor={MediaGalleryKeyboard.keyExtractor}
           scrollsToTop={false}
           showsHorizontalScrollIndicator={false}
           onEndReached={this.onEndReached}
           onEndReachedThreshold={5}
           onViewableItemsChanged={this.onViewableItemsChanged}
           extraData={this.state}
           ref={this.flatListRef}
         />
       );
     } else if (selections && containerHeight) {
       content = (
         <Text style={[this.props.styles.error, bottomOffsetStyle]}>
           no media was found!
         </Text>
       );
     } else if (error) {
       content = (
         <Text style={[this.props.styles.error, bottomOffsetStyle]}>
           {error}
         </Text>
       );
     } else {
       content = (
         <ActivityIndicator
           color={this.props.colors.listSeparatorLabel}
           size="large"
           style={[this.props.styles.loadingIndicator, bottomOffsetStyle]}
         />
       );
     }
 
     const { queuedMediaURIs } = this.state;
     const queueCount = queuedMediaURIs ? queuedMediaURIs.size : 0;
     const bottomInset = Platform.select({
       ios: -1 * this.props.dimensions.bottomInset,
       default: 0,
     });
     const containerStyle = { bottom: bottomInset };
     return (
       <View style={[this.props.styles.container, containerStyle]}>
         <this.GalleryHeader />
         <View
           style={this.props.styles.galleryContainer}
           onLayout={this.onContainerLayout}
         >
           {content}
           <SendMediaButton
             onPress={this.sendQueuedMedia}
             queueCount={queueCount}
             pointerEvents={queuedMediaURIs ? 'auto' : 'none'}
             containerStyle={[
               this.props.styles.sendButtonContainer,
               bottomOffsetStyle,
             ]}
             style={this.sendButtonStyle}
           />
         </View>
       </View>
     );
   }
 
   flatListRef = (flatList: ?FlatList<MediaLibrarySelection>) => {
     this.flatList = flatList;
   };
 
   onContainerLayout = (event: LayoutEvent) => {
     this.guardedSetState({ containerHeight: event.nativeEvent.layout.height });
   };
 
   onEndReached = () => {
     const { cursor } = this.state;
     if (cursor !== null) {
       this.fetchPhotos(cursor);
     }
   };
 
   onViewableItemsChanged = (info: ViewableItemsChange) => {
     const viewableIndices = [];
     for (const { index } of info.viewableItems) {
       if (index !== null && index !== undefined) {
         viewableIndices.push(index);
       }
     }
     this.viewableIndices = viewableIndices;
   };
 
   setMediaQueued = (selection: MediaLibrarySelection, isQueued: boolean) => {
     this.setState((prevState: State) => {
       const prevQueuedMediaURIs = prevState.queuedMediaURIs
         ? [...prevState.queuedMediaURIs]
         : [];
       if (isQueued) {
         return {
           queuedMediaURIs: new Set([...prevQueuedMediaURIs, selection.uri]),
           focusedMediaURI: null,
         };
       }
       const queuedMediaURIs = prevQueuedMediaURIs.filter(
         uri => uri !== selection.uri,
       );
       if (queuedMediaURIs.length < prevQueuedMediaURIs.length) {
         return {
           queuedMediaURIs: new Set(queuedMediaURIs),
           focusedMediaURI: null,
         };
       }
       return null;
     });
   };
 
   setFocus = (selection: MediaLibrarySelection, isFocused: boolean) => {
     const { uri } = selection;
     if (isFocused) {
       this.setState({ focusedMediaURI: uri });
     } else if (this.state.focusedMediaURI === uri) {
       this.setState({ focusedMediaURI: null });
     }
   };
 
   sendSingleMedia = (selection: MediaLibrarySelection) => {
     this.sendMedia([selection]);
   };
 
   sendQueuedMedia = () => {
     const { selections, queuedMediaURIs } = this.state;
     if (!selections || !queuedMediaURIs) {
       return;
     }
     const queuedSelections = [];
     for (const uri of queuedMediaURIs) {
       for (const selection of selections) {
         if (selection.uri === uri) {
           queuedSelections.push(selection);
           break;
         }
       }
     }
     this.sendMedia(queuedSelections);
   };
 
   sendMedia(selections: $ReadOnlyArray<MediaLibrarySelection>) {
     if (this.mediaSelected) {
       return;
     }
     this.mediaSelected = true;
 
     const now = Date.now();
     const timeProps = {
       selectTime: now,
       sendTime: now,
     };
     const selectionsWithTime = selections.map(selection => ({
       ...selection,
       ...timeProps,
     }));
 
     KeyboardRegistry.onItemSelected(mediaGalleryKeyboardName, {
       selections: selectionsWithTime,
       threadInfo: this.props.threadInfo,
     });
   }
 }
 
 const mediaGalleryKeyboardName = 'MediaGalleryKeyboard';
 
 function ConnectedMediaGalleryKeyboard(props: BaseProps) {
   const dimensions = useSelector(state => state.dimensions);
   const foreground = useIsAppForegrounded();
   const colors = useColors();
   const styles = useStyles(unboundStyles);
   return (
     <MediaGalleryKeyboard
       dimensions={dimensions}
       foreground={foreground}
       colors={colors}
       styles={styles}
       {...props}
     />
   );
 }
 
 function ReduxMediaGalleryKeyboard(props: BaseProps) {
   return (
     <Provider store={store}>
       <ConnectedMediaGalleryKeyboard {...props} />
     </Provider>
   );
 }
 
 KeyboardRegistry.registerKeyboard(
   mediaGalleryKeyboardName,
   () => ReduxMediaGalleryKeyboard,
 );
 
 export { mediaGalleryKeyboardName };
diff --git a/native/profile/appearance-preferences.react.js b/native/profile/appearance-preferences.react.js
index 321bbabe5..abcabacd7 100644
--- a/native/profile/appearance-preferences.react.js
+++ b/native/profile/appearance-preferences.react.js
@@ -1,163 +1,163 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text, Platform } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { useUpdateThemePreference } from 'lib/hooks/theme.js';
 import type {
   GlobalThemeInfo,
   GlobalThemePreference,
 } from 'lib/types/theme-types.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import Button from '../components/button.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import { osCanTheme } from '../themes/theme-utils.js';
 
 const CheckIcon = () => (
   <SWMansionIcon
     name="check"
     size={20}
     color="#888888"
     style={unboundStyles.icon}
   />
 );
 
 const unboundStyles = {
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   hr: {
     backgroundColor: 'panelForegroundBorder',
     height: 1,
     marginHorizontal: 15,
   },
   icon: {
     lineHeight: Platform.OS === 'ios' ? 18 : 20,
   },
   option: {
     color: 'panelForegroundLabel',
     fontSize: 16,
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 10,
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     paddingVertical: 2,
   },
 };
 
 type OptionText = {
   themePreference: GlobalThemePreference,
   text: string,
 };
 const optionTexts: OptionText[] = [
   { themePreference: 'light', text: 'Light' },
   { themePreference: 'dark', text: 'Dark' },
 ];
 if (osCanTheme) {
   optionTexts.push({
     themePreference: 'system',
     text: 'Follow system preferences',
   });
 }
 
 type Props = {
   +navigation: ProfileNavigationProp<'AppearancePreferences'>,
   +route: NavigationRoute<'AppearancePreferences'>,
   +globalThemeInfo: GlobalThemeInfo,
   +updateThemePreference: (themePreference: GlobalThemePreference) => mixed,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +colors: Colors,
 };
 class AppearancePreferences extends React.PureComponent<Props> {
   render(): React.Node {
     const { panelIosHighlightUnderlay: underlay } = this.props.colors;
 
     const options: Array<React.Node> = [];
     for (let i = 0; i < optionTexts.length; i++) {
       const { themePreference, text } = optionTexts[i];
       const icon =
         themePreference === this.props.globalThemeInfo.preference ? (
           <CheckIcon />
         ) : null;
       options.push(
         <Button
           onPress={() => this.props.updateThemePreference(themePreference)}
           style={this.props.styles.row}
           iosFormat="highlight"
           iosHighlightUnderlayColor={underlay}
           iosActiveOpacity={0.85}
           key={`button_${themePreference}`}
         >
           <Text style={this.props.styles.option}>{text}</Text>
           {icon}
         </Button>,
       );
       if (i + 1 < optionTexts.length) {
         options.push(
           <View style={this.props.styles.hr} key={`hr_${themePreference}`} />,
         );
       }
     }
 
     return (
       <ScrollView
         contentContainerStyle={this.props.styles.scrollViewContentContainer}
         style={this.props.styles.scrollView}
       >
         <Text style={this.props.styles.header}>APP THEME</Text>
         <View style={this.props.styles.section}>{options}</View>
       </ScrollView>
     );
   }
 }
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<'AppearancePreferences'>,
   +route: NavigationRoute<'AppearancePreferences'>,
 };
 const ConnectedAppearancePreferences: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedAppearancePreferences(
     props: BaseProps,
   ) {
     const globalThemeInfo = useSelector(state => state.globalThemeInfo);
     const updateThemePreference = useUpdateThemePreference();
 
     const styles = useStyles(unboundStyles);
     const colors = useColors();
 
     return (
       <AppearancePreferences
         {...props}
         globalThemeInfo={globalThemeInfo}
         updateThemePreference={updateThemePreference}
         styles={styles}
         colors={colors}
       />
     );
   });
 
 export default ConnectedAppearancePreferences;
diff --git a/native/profile/custom-server-modal.react.js b/native/profile/custom-server-modal.react.js
index b8dcc9519..1b24117ad 100644
--- a/native/profile/custom-server-modal.react.js
+++ b/native/profile/custom-server-modal.react.js
@@ -1,140 +1,140 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text } from 'react-native';
 
 import { urlPrefixSelector } from 'lib/selectors/keyserver-selectors.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { setURLPrefix } from 'lib/utils/url-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import Button from '../components/button.react.js';
 import Modal from '../components/modal.react.js';
 import TextInput from '../components/text-input.react.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import { setCustomServer } from '../utils/url-utils.js';
 
 export type CustomServerModalParams = {
   +presentedFrom: string,
 };
 
 const unboundStyles = {
   button: {
     backgroundColor: 'vibrantGreenButton',
     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',
   },
 };
 
 type BaseProps = {
   +navigation: RootNavigationProp<'CustomServerModal'>,
   +route: NavigationRoute<'CustomServerModal'>,
 };
 type Props = {
   ...BaseProps,
   +urlPrefix: string,
   +customServer: ?string,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +dispatch: Dispatch,
 };
 type State = {
   +customServer: string,
 };
 class CustomServerModal extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     const { customServer } = props;
     this.state = {
       customServer: customServer ? customServer : '',
     };
   }
 
   render(): React.Node {
     return (
       <Modal
         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.dispatch({
         type: setURLPrefix,
         payload: customServer,
       });
     }
     if (customServer && customServer !== this.props.customServer) {
       this.props.dispatch({
         type: setCustomServer,
         payload: customServer,
       });
     }
     this.props.navigation.goBackOnce();
   };
 }
 
 const ConnectedCustomServerModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedCustomServerModal(props: BaseProps) {
     const urlPrefix = useSelector(urlPrefixSelector(ashoatKeyserverID));
     invariant(urlPrefix, "missing urlPrefix for ashoat's keyserver");
     const customServer = useSelector(state => state.customServer);
     const styles = useStyles(unboundStyles);
     const dispatch = useDispatch();
 
     return (
       <CustomServerModal
         {...props}
         urlPrefix={urlPrefix}
         customServer={customServer}
         styles={styles}
         dispatch={dispatch}
       />
     );
   });
 
 export default ConnectedCustomServerModal;
diff --git a/native/profile/default-notifications-preferences.react.js b/native/profile/default-notifications-preferences.react.js
index 9233cc8f3..706df3400 100644
--- a/native/profile/default-notifications-preferences.react.js
+++ b/native/profile/default-notifications-preferences.react.js
@@ -1,213 +1,213 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text, Platform } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import {
   useSetUserSettings,
   setUserSettingsActionTypes,
 } from 'lib/actions/user-actions.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import {
   type UpdateUserSettingsRequest,
   type NotificationTypes,
   type DefaultNotificationPayload,
   notificationTypes,
   userSettingsTypes,
 } from 'lib/types/account-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import Action from '../components/action-row.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.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 CheckIcon = () => (
   <SWMansionIcon
     name="check"
     size={20}
     color="#888888"
     style={unboundStyles.icon}
   />
 );
 
 type ProfileRowProps = {
   +content: string,
   +onPress: () => void,
   +danger?: boolean,
   +selected?: boolean,
 };
 
 function NotificationRow(props: ProfileRowProps): React.Node {
   const { content, onPress, danger, selected } = props;
   return (
     <Action.Row onPress={onPress}>
       <Action.Text danger={danger} content={content} />
       {selected ? <CheckIcon /> : null}
     </Action.Row>
   );
 }
 
 const unboundStyles = {
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     marginVertical: 2,
   },
   icon: {
     lineHeight: Platform.OS === 'ios' ? 18 : 20,
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
 };
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<'DefaultNotifications'>,
   +route: NavigationRoute<'DefaultNotifications'>,
 };
 
 type Props = {
   ...BaseProps,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +dispatchActionPromise: DispatchActionPromise,
   +changeNotificationSettings: (
     notificationSettingsRequest: UpdateUserSettingsRequest,
   ) => Promise<void>,
   +selectedDefaultNotification: NotificationTypes,
 };
 
 class DefaultNotificationsPreferences extends React.PureComponent<Props> {
   async updatedDefaultNotifications(
     data: NotificationTypes,
   ): Promise<DefaultNotificationPayload> {
     const { changeNotificationSettings } = this.props;
 
     try {
       await changeNotificationSettings({
         name: userSettingsTypes.DEFAULT_NOTIFICATIONS,
         data,
       });
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: () => {} }],
         { cancelable: false },
       );
     }
 
     return {
       [userSettingsTypes.DEFAULT_NOTIFICATIONS]: data,
     };
   }
 
   selectNotificationSetting = (data: NotificationTypes) => {
     const { dispatchActionPromise } = this.props;
 
     dispatchActionPromise(
       setUserSettingsActionTypes,
       this.updatedDefaultNotifications(data),
     );
   };
 
   selectAllNotifications = () => {
     this.selectNotificationSetting(notificationTypes.FOCUSED);
   };
 
   selectBackgroundNotifications = () => {
     this.selectNotificationSetting(notificationTypes.BACKGROUND);
   };
 
   selectNoneNotifications = () => {
     this.selectNotificationSetting(notificationTypes.BADGE_ONLY);
   };
 
   render(): React.Node {
     const { styles, selectedDefaultNotification } = this.props;
     return (
       <ScrollView
         contentContainerStyle={styles.scrollViewContentContainer}
         style={styles.scrollView}
       >
         <Text style={styles.header}>NOTIFICATIONS</Text>
         <View style={styles.section}>
           <NotificationRow
             content="Focused"
             onPress={this.selectAllNotifications}
             selected={notificationTypes.FOCUSED === selectedDefaultNotification}
           />
           <NotificationRow
             content="Focused (badge only)"
             onPress={this.selectBackgroundNotifications}
             selected={
               notificationTypes.BADGE_ONLY === selectedDefaultNotification
             }
           />
           <NotificationRow
             content="Background"
             onPress={this.selectNoneNotifications}
             selected={
               notificationTypes.BACKGROUND === selectedDefaultNotification
             }
           />
         </View>
       </ScrollView>
     );
   }
 }
 
 registerFetchKey(setUserSettingsActionTypes);
 const ConnectedDefaultNotificationPreferences: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedDefaultNotificationPreferences(
     props: BaseProps,
   ) {
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const changeNotificationSettings = useSetUserSettings();
     const defaultNotification = userSettingsTypes.DEFAULT_NOTIFICATIONS;
 
     const selectedDefaultNotification = useSelector<NotificationTypes>(
       ({ currentUserInfo }) => {
         if (
           currentUserInfo?.settings &&
           currentUserInfo?.settings[defaultNotification]
         ) {
           return currentUserInfo?.settings[defaultNotification];
         }
         return notificationTypes.FOCUSED;
       },
     );
 
     return (
       <DefaultNotificationsPreferences
         {...props}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         changeNotificationSettings={changeNotificationSettings}
         selectedDefaultNotification={selectedDefaultNotification}
       />
     );
   });
 
 export default ConnectedDefaultNotificationPreferences;
diff --git a/native/profile/dev-tools.react.js b/native/profile/dev-tools.react.js
index 591c60aea..c0bb78475 100644
--- a/native/profile/dev-tools.react.js
+++ b/native/profile/dev-tools.react.js
@@ -1,260 +1,260 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, Platform } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { urlPrefixSelector } from 'lib/selectors/keyserver-selectors.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { setURLPrefix } from 'lib/utils/url-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import Button from '../components/button.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { commCoreModule } from '../native-modules.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { CustomServerModalRouteName } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useColors, useStyles, type Colors } from '../themes/colors.js';
 import { wipeAndExit } from '../utils/crash-utils.js';
 import { checkForMissingNatDevHostname } from '../utils/dev-hostname.js';
 import { nodeServerOptions } from '../utils/url-utils.js';
 
 const ServerIcon = () => (
   <SWMansionIcon
     name="check"
     size={20}
     color="#888888"
     style={unboundStyles.icon}
   />
 );
 
 const unboundStyles = {
   container: {
     flex: 1,
   },
   customServerLabel: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   hr: {
     backgroundColor: 'panelForegroundBorder',
     height: 1,
     marginHorizontal: 15,
   },
   icon: {
     lineHeight: Platform.OS === 'ios' ? 18 : 20,
   },
   redText: {
     color: 'redText',
     flex: 1,
     fontSize: 16,
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 10,
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   serverContainer: {
     flex: 1,
   },
   serverText: {
     color: 'panelForegroundLabel',
     fontSize: 16,
   },
   slightlyPaddedSection: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     paddingVertical: 2,
   },
 };
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<'DevTools'>,
   +route: NavigationRoute<'DevTools'>,
 };
 type Props = {
   ...BaseProps,
   +urlPrefix: string,
   +customServer: ?string,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +dispatch: Dispatch,
 };
 class DevTools extends React.PureComponent<Props> {
   render(): React.Node {
     const { panelIosHighlightUnderlay: underlay } = this.props.colors;
 
     const serverButtons: Array<React.Node> = [];
     for (const server of nodeServerOptions) {
       const icon = server === this.props.urlPrefix ? <ServerIcon /> : null;
       serverButtons.push(
         <Button
           onPress={() => this.onSelectServer(server)}
           style={this.props.styles.row}
           iosFormat="highlight"
           iosHighlightUnderlayColor={underlay}
           iosActiveOpacity={0.85}
           key={`server${server}`}
         >
           <Text style={this.props.styles.serverText}>{server}</Text>
           {icon}
         </Button>,
       );
       serverButtons.push(
         <View style={this.props.styles.hr} key={`hr${server}`} />,
       );
     }
     const customServerLabel = this.props.customServer ? (
       <Text>
         <Text style={this.props.styles.customServerLabel}>{'custom: '}</Text>
         <Text style={this.props.styles.serverText}>
           {this.props.customServer}
         </Text>
       </Text>
     ) : (
       <Text
         style={[
           this.props.styles.customServerLabel,
           this.props.styles.serverContainer,
         ]}
       >
         custom
       </Text>
     );
     const customServerIcon =
       this.props.customServer === this.props.urlPrefix ? <ServerIcon /> : null;
     serverButtons.push(
       <Button
         onPress={this.onSelectCustomServer}
         style={this.props.styles.row}
         iosFormat="highlight"
         iosHighlightUnderlayColor={underlay}
         iosActiveOpacity={0.85}
         key="customServer"
       >
         {customServerLabel}
         {customServerIcon}
       </Button>,
     );
 
     return (
       <View style={this.props.styles.container}>
         <ScrollView
           contentContainerStyle={this.props.styles.scrollViewContentContainer}
           style={this.props.styles.scrollView}
         >
           <View style={this.props.styles.slightlyPaddedSection}>
             <Button
               onPress={this.onPressCrash}
               style={this.props.styles.row}
               iosFormat="highlight"
               iosHighlightUnderlayColor={underlay}
               iosActiveOpacity={0.85}
             >
               <Text style={this.props.styles.redText}>Trigger a crash</Text>
             </Button>
             <View style={this.props.styles.hr} />
             <Button
               onPress={this.onPressKill}
               style={this.props.styles.row}
               iosFormat="highlight"
               iosHighlightUnderlayColor={underlay}
               iosActiveOpacity={0.85}
             >
               <Text style={this.props.styles.redText}>Kill the app</Text>
             </Button>
             <View style={this.props.styles.hr} />
             <Button
               onPress={this.onPressWipe}
               style={this.props.styles.row}
               iosFormat="highlight"
               iosHighlightUnderlayColor={underlay}
               iosActiveOpacity={0.85}
             >
               <Text style={this.props.styles.redText}>
                 Wipe state and kill app
               </Text>
             </Button>
           </View>
           <Text style={this.props.styles.header}>SERVER</Text>
           <View style={this.props.styles.slightlyPaddedSection}>
             {serverButtons}
           </View>
         </ScrollView>
       </View>
     );
   }
 
   onPressCrash = (): empty => {
     throw new Error('User triggered crash through dev menu!');
   };
 
   onPressKill = () => {
     commCoreModule.terminate();
   };
 
   onPressWipe = async () => {
     await wipeAndExit();
   };
 
   onSelectServer = (server: string) => {
     if (server !== this.props.urlPrefix) {
       this.props.dispatch({
         type: setURLPrefix,
         payload: server,
       });
     }
   };
 
   onSelectCustomServer = () => {
     checkForMissingNatDevHostname();
     this.props.navigation.navigate(CustomServerModalRouteName, {
       presentedFrom: this.props.route.key,
     });
   };
 }
 
 const ConnectedDevTools: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedDevTools(props: BaseProps) {
     const urlPrefix = useSelector(urlPrefixSelector(ashoatKeyserverID));
     invariant(urlPrefix, "missing urlPrefix for ashoat's keyserver");
     const customServer = useSelector(state => state.customServer);
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const dispatch = useDispatch();
 
     return (
       <DevTools
         {...props}
         urlPrefix={urlPrefix}
         customServer={customServer}
         colors={colors}
         styles={styles}
         dispatch={dispatch}
       />
     );
   },
 );
 
 export default ConnectedDevTools;
diff --git a/native/profile/edit-password.react.js b/native/profile/edit-password.react.js
index ca1359e00..1b320f7dd 100644
--- a/native/profile/edit-password.react.js
+++ b/native/profile/edit-password.react.js
@@ -1,371 +1,371 @@
 // @flow
 
 import { CommonActions } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   View,
   TextInput as BaseTextInput,
   ActivityIndicator,
 } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import {
   changeUserPasswordActionTypes,
   changeUserPassword,
 } from 'lib/actions/user-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { PasswordUpdate } from 'lib/types/user-types.js';
 import {
   useServerCall,
   useDispatchActionPromise,
   type DispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import { setNativeCredentials } from '../account/native-credentials.js';
 import Button from '../components/button.react.js';
 import TextInput from '../components/text-input.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
 
 const unboundStyles = {
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   hr: {
     backgroundColor: 'panelForegroundBorder',
     height: 1,
     marginHorizontal: 15,
   },
   input: {
     color: 'panelForegroundLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     paddingVertical: 0,
     borderBottomColor: 'transparent',
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 9,
   },
   saveButton: {
     backgroundColor: 'vibrantGreenButton',
     borderRadius: 5,
     flex: 1,
     marginHorizontal: 24,
     marginVertical: 12,
     padding: 12,
   },
   saveText: {
     color: 'white',
     fontSize: 18,
     textAlign: 'center',
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     paddingVertical: 3,
   },
 };
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<'EditPassword'>,
   +route: NavigationRoute<'EditPassword'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +username: ?string,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise<void>,
 };
 type State = {
   +currentPassword: string,
   +newPassword: string,
   +confirmPassword: string,
 };
 class EditPassword extends React.PureComponent<Props, State> {
   state: State = {
     currentPassword: '',
     newPassword: '',
     confirmPassword: '',
   };
   mounted = false;
   currentPasswordInput: ?React.ElementRef<typeof BaseTextInput>;
   newPasswordInput: ?React.ElementRef<typeof BaseTextInput>;
   confirmPasswordInput: ?React.ElementRef<typeof BaseTextInput>;
 
   componentDidMount() {
     this.mounted = true;
   }
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
   render(): React.Node {
     const buttonContent =
       this.props.loadingStatus === 'loading' ? (
         <ActivityIndicator size="small" color="white" />
       ) : (
         <Text style={this.props.styles.saveText}>Save</Text>
       );
     const { panelForegroundTertiaryLabel } = this.props.colors;
     return (
       <ScrollView
         contentContainerStyle={this.props.styles.scrollViewContentContainer}
         style={this.props.styles.scrollView}
       >
         <Text style={this.props.styles.header}>CURRENT PASSWORD</Text>
         <View style={this.props.styles.section}>
           <View style={this.props.styles.row}>
             <TextInput
               style={this.props.styles.input}
               value={this.state.currentPassword}
               onChangeText={this.onChangeCurrentPassword}
               placeholder="Current password"
               placeholderTextColor={panelForegroundTertiaryLabel}
               secureTextEntry={true}
               textContentType="password"
               autoComplete="password"
               autoFocus={true}
               returnKeyType="next"
               onSubmitEditing={this.focusNewPassword}
               ref={this.currentPasswordRef}
             />
           </View>
         </View>
         <Text style={this.props.styles.header}>NEW PASSWORD</Text>
         <View style={this.props.styles.section}>
           <View style={this.props.styles.row}>
             <TextInput
               style={this.props.styles.input}
               value={this.state.newPassword}
               onChangeText={this.onChangeNewPassword}
               placeholder="New password"
               placeholderTextColor={panelForegroundTertiaryLabel}
               secureTextEntry={true}
               textContentType="newPassword"
               autoComplete="password-new"
               returnKeyType="next"
               onSubmitEditing={this.focusConfirmPassword}
               ref={this.newPasswordRef}
             />
           </View>
           <View style={this.props.styles.hr} />
           <View style={this.props.styles.row}>
             <TextInput
               style={this.props.styles.input}
               value={this.state.confirmPassword}
               onChangeText={this.onChangeConfirmPassword}
               placeholder="Confirm password"
               placeholderTextColor={panelForegroundTertiaryLabel}
               secureTextEntry={true}
               textContentType="newPassword"
               returnKeyType="go"
               onSubmitEditing={this.submitPassword}
               ref={this.confirmPasswordRef}
             />
           </View>
         </View>
         <Button
           onPress={this.submitPassword}
           style={this.props.styles.saveButton}
         >
           {buttonContent}
         </Button>
       </ScrollView>
     );
   }
 
   onChangeCurrentPassword = (currentPassword: string) => {
     this.setState({ currentPassword });
   };
 
   currentPasswordRef = (
     currentPasswordInput: ?React.ElementRef<typeof BaseTextInput>,
   ) => {
     this.currentPasswordInput = currentPasswordInput;
   };
 
   focusCurrentPassword = () => {
     invariant(this.currentPasswordInput, 'currentPasswordInput should be set');
     this.currentPasswordInput.focus();
   };
 
   onChangeNewPassword = (newPassword: string) => {
     this.setState({ newPassword });
   };
 
   newPasswordRef = (
     newPasswordInput: ?React.ElementRef<typeof BaseTextInput>,
   ) => {
     this.newPasswordInput = newPasswordInput;
   };
 
   focusNewPassword = () => {
     invariant(this.newPasswordInput, 'newPasswordInput should be set');
     this.newPasswordInput.focus();
   };
 
   onChangeConfirmPassword = (confirmPassword: string) => {
     this.setState({ confirmPassword });
   };
 
   confirmPasswordRef = (
     confirmPasswordInput: ?React.ElementRef<typeof BaseTextInput>,
   ) => {
     this.confirmPasswordInput = confirmPasswordInput;
   };
 
   focusConfirmPassword = () => {
     invariant(this.confirmPasswordInput, 'confirmPasswordInput should be set');
     this.confirmPasswordInput.focus();
   };
 
   goBackOnce() {
     this.props.navigation.dispatch(state => ({
       ...CommonActions.goBack(),
       target: state.key,
     }));
   }
 
   submitPassword = () => {
     if (this.state.newPassword === '') {
       Alert.alert(
         'Empty password',
         'New password cannot be empty',
         [{ text: 'OK', onPress: this.onNewPasswordAlertAcknowledged }],
         { cancelable: false },
       );
     } else if (this.state.newPassword !== this.state.confirmPassword) {
       Alert.alert(
         'Passwords don’t match',
         'New password fields must contain the same password',
         [{ text: 'OK', onPress: this.onNewPasswordAlertAcknowledged }],
         { cancelable: false },
       );
     } else if (this.state.newPassword === this.state.currentPassword) {
       this.goBackOnce();
     } else {
       this.props.dispatchActionPromise(
         changeUserPasswordActionTypes,
         this.savePassword(),
       );
     }
   };
 
   async savePassword() {
     const { username } = this.props;
     if (!username) {
       return;
     }
     try {
       await this.props.changeUserPassword({
         updatedFields: {
           password: this.state.newPassword,
         },
         currentPassword: this.state.currentPassword,
       });
       await setNativeCredentials({
         username,
         password: this.state.newPassword,
       });
       this.goBackOnce();
     } catch (e) {
       if (e.message === 'invalid_credentials') {
         Alert.alert(
           'Incorrect password',
           'The current password you entered is incorrect',
           [{ text: 'OK', onPress: this.onCurrentPasswordAlertAcknowledged }],
           { cancelable: false },
         );
       } else {
         Alert.alert(
           'Unknown error',
           'Uhh... try again?',
           [{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
           { cancelable: false },
         );
       }
     }
   }
 
   onNewPasswordAlertAcknowledged = () => {
     this.setState(
       { newPassword: '', confirmPassword: '' },
       this.focusNewPassword,
     );
   };
 
   onCurrentPasswordAlertAcknowledged = () => {
     this.setState({ currentPassword: '' }, this.focusCurrentPassword);
   };
 
   onUnknownErrorAlertAcknowledged = () => {
     this.setState(
       { currentPassword: '', newPassword: '', confirmPassword: '' },
       this.focusCurrentPassword,
     );
   };
 }
 
 const loadingStatusSelector = createLoadingStatusSelector(
   changeUserPasswordActionTypes,
 );
 
 const ConnectedEditPassword: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedEditPassword(props: BaseProps) {
     const loadingStatus = useSelector(loadingStatusSelector);
     const username = useSelector(state => {
       if (state.currentUserInfo && !state.currentUserInfo.anonymous) {
         return state.currentUserInfo.username;
       }
       return undefined;
     });
     const colors = useColors();
     const styles = useStyles(unboundStyles);
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callChangeUserPassword = useServerCall(changeUserPassword);
 
     return (
       <EditPassword
         {...props}
         loadingStatus={loadingStatus}
         username={username}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         changeUserPassword={callChangeUserPassword}
       />
     );
   });
 
 export default ConnectedEditPassword;
diff --git a/native/profile/profile-screen.react.js b/native/profile/profile-screen.react.js
index 259970405..f94007cb3 100644
--- a/native/profile/profile-screen.react.js
+++ b/native/profile/profile-screen.react.js
@@ -1,464 +1,464 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text, Platform, ScrollView } from 'react-native';
 
 import { logOutActionTypes, useLogOut } from 'lib/actions/user-actions.js';
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { accountHasPassword } from 'lib/shared/account-utils.js';
 import type { LogOutResult } from 'lib/types/account-types.js';
 import { type PreRequestUserState } from 'lib/types/session-types.js';
 import { type CurrentUserInfo } from 'lib/types/user-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import { deleteNativeCredentialsFor } from '../account/native-credentials.js';
 import EditUserAvatar from '../avatars/edit-user-avatar.react.js';
 import Action from '../components/action-row.react.js';
 import Button from '../components/button.react.js';
 import EditSettingButton from '../components/edit-setting-button.react.js';
 import SingleLine from '../components/single-line.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import {
   EditPasswordRouteName,
   DeleteAccountRouteName,
   BuildInfoRouteName,
   DevToolsRouteName,
   AppearancePreferencesRouteName,
   FriendListRouteName,
   BlockListRouteName,
   PrivacyPreferencesRouteName,
   DefaultNotificationsPreferencesRouteName,
   LinkedDevicesRouteName,
   BackupMenuRouteName,
   KeyserverSelectionListRouteName,
   TunnelbrokerMenuRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 type ProfileRowProps = {
   +content: string,
   +onPress: () => void,
   +danger?: boolean,
 };
 
 function ProfileRow(props: ProfileRowProps): React.Node {
   const { content, onPress, danger } = props;
   return (
     <Action.Row onPress={onPress}>
       <Action.Text danger={danger} content={content} />
       <Action.Icon name="ios-arrow-forward" />
     </Action.Row>
   );
 }
 
 const unboundStyles = {
   avatarSection: {
     alignItems: 'center',
     paddingVertical: 16,
   },
   container: {
     flex: 1,
   },
   content: {
     flex: 1,
   },
   deleteAccountButton: {
     paddingHorizontal: 24,
     paddingVertical: 12,
   },
   editPasswordButton: {
     paddingTop: Platform.OS === 'android' ? 3 : 2,
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     paddingRight: 12,
   },
   loggedInLabel: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
   },
   logOutText: {
     color: 'link',
     fontSize: 16,
     paddingLeft: 6,
   },
   row: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   paddedRow: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 10,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     paddingVertical: 1,
   },
   unpaddedSection: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
   },
   username: {
     color: 'panelForegroundLabel',
     flex: 1,
   },
   value: {
     color: 'panelForegroundLabel',
     fontSize: 16,
     textAlign: 'right',
   },
 };
 
 type BaseProps = {
   +navigation: ProfileNavigationProp<'ProfileScreen'>,
   +route: NavigationRoute<'ProfileScreen'>,
 };
 type Props = {
   ...BaseProps,
   +currentUserInfo: ?CurrentUserInfo,
   +preRequestUserState: PreRequestUserState,
   +logOutLoading: boolean,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +dispatchActionPromise: DispatchActionPromise,
   +logOut: (preRequestUserState: PreRequestUserState) => Promise<LogOutResult>,
   +staffCanSee: boolean,
   +stringForUser: ?string,
   +isAccountWithPassword: boolean,
 };
 
 class ProfileScreen extends React.PureComponent<Props> {
   get loggedOutOrLoggingOut(): boolean {
     return (
       !this.props.currentUserInfo ||
       this.props.currentUserInfo.anonymous ||
       this.props.logOutLoading
     );
   }
 
   render(): React.Node {
     let developerTools,
       defaultNotifications,
       keyserverSelection,
       tunnelbrokerMenu;
     const { staffCanSee, isAccountWithPassword } = this.props;
     if (staffCanSee) {
       developerTools = (
         <ProfileRow content="Developer tools" onPress={this.onPressDevTools} />
       );
 
       defaultNotifications = (
         <ProfileRow
           content="Default Notifications"
           onPress={this.onPressDefaultNotifications}
         />
       );
 
       keyserverSelection = (
         <ProfileRow
           content="Keyservers"
           onPress={this.onPressKeyserverSelection}
         />
       );
 
       tunnelbrokerMenu = (
         <ProfileRow
           content="Tunnelbroker menu"
           onPress={this.onPressTunnelbrokerMenu}
         />
       );
     }
 
     let backupMenu;
     if (staffCanSee && isAccountWithPassword) {
       backupMenu = (
         <ProfileRow content="Backup menu" onPress={this.onPressBackupMenu} />
       );
     }
 
     let passwordEditionUI;
     if (accountHasPassword(this.props.currentUserInfo)) {
       passwordEditionUI = (
         <Action.Row>
           <Text style={this.props.styles.label}>Password</Text>
           <Text
             style={[this.props.styles.content, this.props.styles.value]}
             numberOfLines={1}
           >
             ••••••••••••••••
           </Text>
           <EditSettingButton
             onPress={this.onPressEditPassword}
             canChangeSettings={true}
             style={this.props.styles.editPasswordButton}
           />
         </Action.Row>
       );
     }
 
     let linkedDevices;
     if (__DEV__) {
       linkedDevices = (
         <ProfileRow content="Linked devices" onPress={this.onPressDevices} />
       );
     }
 
     return (
       <View style={this.props.styles.container}>
         <ScrollView
           contentContainerStyle={this.props.styles.scrollViewContentContainer}
           style={this.props.styles.scrollView}
         >
           <Text style={this.props.styles.header}>USER AVATAR</Text>
           <View
             style={[this.props.styles.section, this.props.styles.avatarSection]}
           >
             <EditUserAvatar userID={this.props.currentUserInfo?.id} />
           </View>
           <Text style={this.props.styles.header}>ACCOUNT</Text>
           <View style={this.props.styles.section}>
             <Action.Row>
               <Text style={this.props.styles.loggedInLabel}>Logged in as </Text>
               <SingleLine
                 style={[this.props.styles.label, this.props.styles.username]}
               >
                 {this.props.stringForUser}
               </SingleLine>
               <Button
                 onPress={this.onPressLogOut}
                 disabled={this.loggedOutOrLoggingOut}
               >
                 <Text style={this.props.styles.logOutText}>Log out</Text>
               </Button>
             </Action.Row>
             {passwordEditionUI}
           </View>
           <View style={this.props.styles.section}>
             <ProfileRow
               content="Friend list"
               onPress={this.onPressFriendList}
             />
             <ProfileRow content="Block list" onPress={this.onPressBlockList} />
           </View>
           <Text style={this.props.styles.header}>PREFERENCES</Text>
           <View style={this.props.styles.section}>
             <ProfileRow content="Appearance" onPress={this.onPressAppearance} />
             <ProfileRow content="Privacy" onPress={this.onPressPrivacy} />
             {defaultNotifications}
             {backupMenu}
             {tunnelbrokerMenu}
           </View>
           <View style={this.props.styles.section}>
             {linkedDevices}
             {keyserverSelection}
             <ProfileRow content="Build info" onPress={this.onPressBuildInfo} />
             {developerTools}
           </View>
           <View style={this.props.styles.unpaddedSection}>
             <ProfileRow
               content="Delete account..."
               danger
               onPress={this.onPressDeleteAccount}
             />
           </View>
         </ScrollView>
       </View>
     );
   }
 
   onPressLogOut = () => {
     if (this.loggedOutOrLoggingOut) {
       return;
     }
     if (!this.props.isAccountWithPassword) {
       Alert.alert(
         'Log out',
         'Are you sure you want to log out?',
         [
           { text: 'No', style: 'cancel' },
           {
             text: 'Yes',
             onPress: this.logOutWithoutDeletingNativeCredentialsWrapper,
             style: 'destructive',
           },
         ],
         { cancelable: true },
       );
       return;
     }
     const alertTitle =
       Platform.OS === 'ios' ? 'Keep Login Info in Keychain' : 'Keep Login Info';
     const alertDescription =
       'We will automatically fill out log-in forms with your credentials ' +
       'in the app.';
     Alert.alert(
       alertTitle,
       alertDescription,
       [
         { text: 'Cancel', style: 'cancel' },
         {
           text: 'Keep',
           onPress: this.logOutWithoutDeletingNativeCredentialsWrapper,
         },
         {
           text: 'Remove',
           onPress: this.logOutAndDeleteNativeCredentialsWrapper,
           style: 'destructive',
         },
       ],
       { cancelable: true },
     );
   };
 
   logOutWithoutDeletingNativeCredentialsWrapper = () => {
     if (this.loggedOutOrLoggingOut) {
       return;
     }
     this.logOut();
   };
 
   logOutAndDeleteNativeCredentialsWrapper = async () => {
     if (this.loggedOutOrLoggingOut) {
       return;
     }
     await this.deleteNativeCredentials();
     this.logOut();
   };
 
   logOut() {
     this.props.dispatchActionPromise(
       logOutActionTypes,
       this.props.logOut(this.props.preRequestUserState),
     );
   }
 
   async deleteNativeCredentials() {
     await deleteNativeCredentialsFor();
   }
 
   onPressEditPassword = () => {
     this.props.navigation.navigate({ name: EditPasswordRouteName });
   };
 
   onPressDeleteAccount = () => {
     this.props.navigation.navigate({ name: DeleteAccountRouteName });
   };
 
   onPressDevices = () => {
     this.props.navigation.navigate({ name: LinkedDevicesRouteName });
   };
 
   onPressBuildInfo = () => {
     this.props.navigation.navigate({ name: BuildInfoRouteName });
   };
 
   onPressDevTools = () => {
     this.props.navigation.navigate({ name: DevToolsRouteName });
   };
 
   onPressAppearance = () => {
     this.props.navigation.navigate({ name: AppearancePreferencesRouteName });
   };
 
   onPressPrivacy = () => {
     this.props.navigation.navigate({ name: PrivacyPreferencesRouteName });
   };
 
   onPressDefaultNotifications = () => {
     this.props.navigation.navigate({
       name: DefaultNotificationsPreferencesRouteName,
     });
   };
 
   onPressFriendList = () => {
     this.props.navigation.navigate({ name: FriendListRouteName });
   };
 
   onPressBlockList = () => {
     this.props.navigation.navigate({ name: BlockListRouteName });
   };
 
   onPressBackupMenu = () => {
     this.props.navigation.navigate({ name: BackupMenuRouteName });
   };
 
   onPressTunnelbrokerMenu = () => {
     this.props.navigation.navigate({ name: TunnelbrokerMenuRouteName });
   };
 
   onPressKeyserverSelection = () => {
     this.props.navigation.navigate({ name: KeyserverSelectionListRouteName });
   };
 }
 
 const logOutLoadingStatusSelector =
   createLoadingStatusSelector(logOutActionTypes);
 
 const ConnectedProfileScreen: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedProfileScreen(props: BaseProps) {
     const currentUserInfo = useSelector(state => state.currentUserInfo);
     const preRequestUserState = useSelector(preRequestUserStateSelector);
     const logOutLoading =
       useSelector(logOutLoadingStatusSelector) === 'loading';
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const callLogOut = useLogOut();
     const dispatchActionPromise = useDispatchActionPromise();
     const staffCanSee = useStaffCanSee();
     const stringForUser = useStringForUser(currentUserInfo);
     const isAccountWithPassword = useSelector(state =>
       accountHasPassword(state.currentUserInfo),
     );
 
     return (
       <ProfileScreen
         {...props}
         currentUserInfo={currentUserInfo}
         preRequestUserState={preRequestUserState}
         logOutLoading={logOutLoading}
         colors={colors}
         styles={styles}
         logOut={callLogOut}
         dispatchActionPromise={dispatchActionPromise}
         staffCanSee={staffCanSee}
         stringForUser={stringForUser}
         isAccountWithPassword={isAccountWithPassword}
       />
     );
   });
 
 export default ConnectedProfileScreen;
diff --git a/native/profile/relationship-list-item.react.js b/native/profile/relationship-list-item.react.js
index 9a2014b69..da3a962fd 100644
--- a/native/profile/relationship-list-item.react.js
+++ b/native/profile/relationship-list-item.react.js
@@ -1,356 +1,356 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
 
 import {
   updateRelationshipsActionTypes,
   updateRelationships,
 } from 'lib/actions/relationship-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { ReactRef } from 'lib/types/react-types.js';
 import {
   type RelationshipRequest,
   type RelationshipAction,
   type RelationshipErrors,
   userRelationshipStatus,
   relationshipActions,
 } from 'lib/types/relationship-types.js';
 import type {
   AccountUserInfo,
   GlobalAccountUserInfo,
 } from 'lib/types/user-types.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import type { RelationshipListNavigate } from './relationship-list.react.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import PencilIcon from '../components/pencil-icon.react.js';
 import SingleLine from '../components/single-line.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import {
   UserRelationshipTooltipModalRouteName,
   FriendListRouteName,
   BlockListRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 import { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
 import Alert from '../utils/alert.js';
 
 const unboundStyles = {
   container: {
     flex: 1,
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 10,
     backgroundColor: 'panelForeground',
     borderColor: 'panelForegroundBorder',
   },
   borderBottom: {
     borderBottomWidth: 1,
   },
   buttonContainer: {
     flexDirection: 'row',
   },
   editButtonWithMargin: {
     marginLeft: 15,
   },
   username: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
     lineHeight: 20,
     marginLeft: 8,
   },
   editButton: {
     paddingLeft: 10,
   },
   blueAction: {
     color: 'link',
     fontSize: 16,
     paddingLeft: 6,
   },
   redAction: {
     color: 'redText',
     fontSize: 16,
     paddingLeft: 6,
   },
 };
 
 type BaseProps = {
   +userInfo: AccountUserInfo,
   +lastListItem: boolean,
   +verticalBounds: ?VerticalBounds,
   +relationshipListRoute: NavigationRoute<'FriendList' | 'BlockList'>,
   +navigate: RelationshipListNavigate,
   +onSelect: (selectedUser: GlobalAccountUserInfo) => void,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +removeUserLoadingStatus: LoadingStatus,
   +colors: Colors,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +updateRelationships: (
     request: RelationshipRequest,
   ) => Promise<RelationshipErrors>,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   +navigateToUserProfileBottomSheet: (userID: string) => mixed,
 };
 class RelationshipListItem extends React.PureComponent<Props> {
   editButton: ReactRef<React.ElementRef<typeof View>> = React.createRef();
 
   render(): React.Node {
     const {
       lastListItem,
       removeUserLoadingStatus,
       userInfo,
       relationshipListRoute,
     } = this.props;
     const relationshipsToEdit = {
       [FriendListRouteName]: [userRelationshipStatus.FRIEND],
       [BlockListRouteName]: [
         userRelationshipStatus.BOTH_BLOCKED,
         userRelationshipStatus.BLOCKED_BY_VIEWER,
       ],
     }[relationshipListRoute.name];
 
     const canEditFriendRequest = {
       [FriendListRouteName]: true,
       [BlockListRouteName]: false,
     }[relationshipListRoute.name];
 
     const borderBottom = lastListItem ? null : this.props.styles.borderBottom;
 
     let editButton = null;
     if (removeUserLoadingStatus === 'loading') {
       editButton = (
         <ActivityIndicator
           size="small"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     } else if (relationshipsToEdit.includes(userInfo.relationshipStatus)) {
       editButton = (
         <TouchableOpacity
           onPress={this.onPressEdit}
           style={this.props.styles.editButton}
         >
           <View onLayout={this.onLayout} ref={this.editButton}>
             <PencilIcon />
           </View>
         </TouchableOpacity>
       );
     } else if (
       userInfo.relationshipStatus === userRelationshipStatus.REQUEST_RECEIVED &&
       canEditFriendRequest
     ) {
       editButton = (
         <View style={this.props.styles.buttonContainer}>
           <TouchableOpacity
             onPress={this.onPressFriendUser}
             style={this.props.styles.editButton}
           >
             <Text style={this.props.styles.blueAction}>Accept</Text>
           </TouchableOpacity>
           <TouchableOpacity
             onPress={this.onPressUnfriendUser}
             style={[
               this.props.styles.editButton,
               this.props.styles.editButtonWithMargin,
             ]}
           >
             <Text style={this.props.styles.redAction}>Reject</Text>
           </TouchableOpacity>
         </View>
       );
     } else if (
       userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT &&
       canEditFriendRequest
     ) {
       editButton = (
         <TouchableOpacity
           onPress={this.onPressUnfriendUser}
           style={this.props.styles.editButton}
         >
           <Text style={this.props.styles.redAction}>Cancel request</Text>
         </TouchableOpacity>
       );
     } else {
       editButton = (
         <TouchableOpacity
           onPress={this.onSelect}
           style={this.props.styles.editButton}
         >
           <Text style={this.props.styles.blueAction}>Add</Text>
         </TouchableOpacity>
       );
     }
 
     return (
       <TouchableOpacity
         onPress={this.onPressUser}
         style={[this.props.styles.container, borderBottom]}
       >
         <UserAvatar size="S" userID={this.props.userInfo.id} />
         <SingleLine style={this.props.styles.username}>
           {this.props.userInfo.username}
         </SingleLine>
         {editButton}
       </TouchableOpacity>
     );
   }
 
   onPressUser = () => {
     this.props.navigateToUserProfileBottomSheet(this.props.userInfo.id);
   };
 
   onSelect = () => {
     const { id, username } = this.props.userInfo;
     this.props.onSelect({ id, username });
   };
 
   visibleEntryIDs(): [string] {
     const { relationshipListRoute } = this.props;
     const id = {
       [FriendListRouteName]: 'unfriend',
       [BlockListRouteName]: 'unblock',
     }[relationshipListRoute.name];
     return [id];
   }
 
   onPressEdit = () => {
     if (this.props.keyboardState?.dismissKeyboardIfShowing()) {
       return;
     }
 
     const {
       editButton,
       props: { verticalBounds },
     } = this;
     const { overlayContext, userInfo } = this.props;
     invariant(
       overlayContext,
       'RelationshipListItem should have OverlayContext',
     );
     overlayContext.setScrollBlockingModalStatus('open');
 
     if (!editButton.current || !verticalBounds) {
       return;
     }
     const { relationshipStatus, ...restUserInfo } = userInfo;
     const relativeUserInfo = {
       ...restUserInfo,
       isViewer: false,
     };
     editButton.current.measure((x, y, width, height, pageX, pageY) => {
       const coordinates = { x: pageX, y: pageY, width, height };
       this.props.navigate<'UserRelationshipTooltipModal'>({
         name: UserRelationshipTooltipModalRouteName,
         params: {
           presentedFrom: this.props.relationshipListRoute.key,
           initialCoordinates: coordinates,
           verticalBounds,
           visibleEntryIDs: this.visibleEntryIDs(),
           relativeUserInfo,
           tooltipButtonIcon: 'pencil',
         },
       });
     });
   };
 
   // We need to set onLayout in order to allow .measure() to be on the ref
   onLayout = () => {};
 
   onPressFriendUser = () => {
     this.onPressUpdateFriendship(relationshipActions.FRIEND);
   };
 
   onPressUnfriendUser = () => {
     this.onPressUpdateFriendship(relationshipActions.UNFRIEND);
   };
 
   onPressUpdateFriendship(action: RelationshipAction) {
     const { id } = this.props.userInfo;
     const customKeyName = `${updateRelationshipsActionTypes.started}:${id}`;
     this.props.dispatchActionPromise(
       updateRelationshipsActionTypes,
       this.updateFriendship(action),
       { customKeyName },
     );
   }
 
   async updateFriendship(
     action: RelationshipAction,
   ): Promise<RelationshipErrors> {
     try {
       return await this.props.updateRelationships({
         action,
         userIDs: [this.props.userInfo.id],
       });
     } catch (e) {
       Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
         cancelable: true,
       });
       throw e;
     }
   }
 }
 
 const ConnectedRelationshipListItem: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedRelationshipListItem(
     props: BaseProps,
   ) {
     const removeUserLoadingStatus = useSelector(state =>
       createLoadingStatusSelector(
         updateRelationshipsActionTypes,
         `${updateRelationshipsActionTypes.started}:${props.userInfo.id}`,
       )(state),
     );
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
     const boundUpdateRelationships = useServerCall(updateRelationships);
     const overlayContext = React.useContext(OverlayContext);
     const keyboardState = React.useContext(KeyboardContext);
 
     const navigateToUserProfileBottomSheet =
       useNavigateToUserProfileBottomSheet();
 
     return (
       <RelationshipListItem
         {...props}
         removeUserLoadingStatus={removeUserLoadingStatus}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         updateRelationships={boundUpdateRelationships}
         overlayContext={overlayContext}
         keyboardState={keyboardState}
         navigateToUserProfileBottomSheet={navigateToUserProfileBottomSheet}
       />
     );
   });
 
 export default ConnectedRelationshipListItem;
diff --git a/native/themes/colors.js b/native/themes/colors.js
index 72ea3daee..65c69f8b1 100644
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -1,393 +1,393 @@
 // @flow
 
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { createSelector } from 'reselect';
 
 import type { GlobalTheme } from 'lib/types/theme-types.js';
 
 import { selectBackgroundIsDark } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { useSelector } from '../redux/redux-utils.js';
 import type { AppState } from '../redux/state-types.js';
 
 const designSystemColors = Object.freeze({
   shadesWhite100: '#ffffff',
   shadesWhite90: '#f5f5f5',
   shadesWhite80: '#ebebeb',
   shadesWhite70: '#e0e0e0',
   shadesWhite60: '#cccccc',
 
   shadesBlack95: '#0a0a0a',
   shadesBlack90: '#191919',
   shadesBlack85: '#1f1f1f',
   shadesBlack75: '#404040',
   shadesBlack60: '#666666',
   shadesBlack50: '#808080',
 
   violetDark100: '#7e57c2',
   violetDark80: '#6d49ab',
   violetDark60: '#563894',
   violetDark40: '#44297a',
   violetDark20: '#331f5c',
 
   violetLight100: '#ae94db',
   violetLight80: '#b9a4df',
   violetLight60: '#d3c6ec',
   violetLight40: '#e8e0f5',
   violetLight20: '#f3f0fa',
 
   successLight10: '#d5f6e3',
   successLight50: '#6cdf9c',
   successPrimary: '#00c853',
   successDark50: '#029841',
   successDark90: '#034920',
 
   errorLight10: '#feebe6',
   errorLight50: '#f9947b',
   errorPrimary: '#f53100',
   errorDark50: '#b62602',
   errorDark90: '#4f1203',
 
   spoilerColor: '#33332c',
 });
 
 const light = Object.freeze({
   blockQuoteBackground: designSystemColors.shadesWhite70,
   blockQuoteBorder: designSystemColors.shadesWhite60,
   codeBackground: designSystemColors.shadesWhite70,
   disabledButton: designSystemColors.shadesWhite70,
   disabledButtonText: designSystemColors.shadesBlack50,
   disconnectedBarBackground: designSystemColors.shadesWhite90,
   editButton: '#A4A4A2',
   floatingButtonBackground: '#999999',
   floatingButtonLabel: designSystemColors.shadesWhite80,
   headerChevron: designSystemColors.shadesBlack95,
   inlineEngagementBackground: designSystemColors.shadesWhite70,
   inlineEngagementLabel: designSystemColors.shadesBlack95,
   link: designSystemColors.violetDark100,
   listBackground: designSystemColors.shadesWhite100,
   listBackgroundLabel: designSystemColors.shadesBlack95,
   listBackgroundSecondaryLabel: '#444444',
   listBackgroundTernaryLabel: '#999999',
   listChatBubble: '#F1F0F5',
   listForegroundLabel: designSystemColors.shadesBlack95,
   listForegroundSecondaryLabel: '#333333',
   listForegroundTertiaryLabel: designSystemColors.shadesBlack60,
   listInputBackground: designSystemColors.shadesWhite90,
   listInputBar: '#E2E2E2',
   listInputButton: '#8E8D92',
   listIosHighlightUnderlay: '#DDDDDDDD',
   listSearchBackground: designSystemColors.shadesWhite90,
   listSearchIcon: '#8E8D92',
   listSeparatorLabel: designSystemColors.shadesBlack60,
   modalBackground: designSystemColors.shadesWhite80,
   modalBackgroundLabel: '#333333',
   modalBackgroundSecondaryLabel: '#AAAAAA',
   modalButton: '#BBBBBB',
   modalButtonLabel: designSystemColors.shadesBlack95,
   modalContrastBackground: designSystemColors.shadesBlack95,
   modalContrastForegroundLabel: designSystemColors.shadesWhite100,
   modalContrastOpacity: 0.7,
   modalForeground: designSystemColors.shadesWhite100,
   modalForegroundBorder: designSystemColors.shadesWhite60,
   modalForegroundLabel: designSystemColors.shadesBlack95,
   modalForegroundSecondaryLabel: '#888888',
   modalForegroundTertiaryLabel: '#AAAAAA',
   modalIosHighlightUnderlay: '#CCCCCCDD',
   modalSubtext: designSystemColors.shadesWhite60,
   modalSubtextLabel: designSystemColors.shadesBlack60,
   modalInputBackground: designSystemColors.shadesWhite60,
   modalInputForeground: designSystemColors.shadesWhite90,
   modalKnob: designSystemColors.shadesWhite90,
   modalAccentBackground: designSystemColors.shadesWhite90,
   navigationCard: designSystemColors.shadesWhite100,
   navigationChevron: designSystemColors.shadesWhite60,
   panelBackground: designSystemColors.shadesWhite90,
   panelBackgroundLabel: '#888888',
   panelButton: designSystemColors.shadesWhite70,
   panelForeground: designSystemColors.shadesWhite100,
   panelForegroundBorder: designSystemColors.shadesWhite60,
   panelForegroundLabel: designSystemColors.shadesBlack95,
   panelForegroundSecondaryLabel: '#333333',
   panelForegroundTertiaryLabel: '#888888',
   panelInputBackground: designSystemColors.shadesWhite60,
   panelInputSecondaryForeground: designSystemColors.shadesBlack50,
   panelIosHighlightUnderlay: '#EBEBEBDD',
   panelSecondaryForeground: designSystemColors.shadesWhite80,
   panelSecondaryForegroundBorder: designSystemColors.shadesWhite70,
   panelSeparator: designSystemColors.shadesWhite60,
   purpleLink: designSystemColors.violetDark100,
   purpleButton: designSystemColors.violetDark100,
   reactionSelectionPopoverItemBackground: designSystemColors.shadesBlack75,
   redText: designSystemColors.errorPrimary,
   spoiler: designSystemColors.spoilerColor,
   tabBarAccent: designSystemColors.violetDark100,
   tabBarBackground: designSystemColors.shadesWhite90,
   tabBarActiveTintColor: designSystemColors.violetDark100,
   vibrantGreenButton: designSystemColors.successPrimary,
   vibrantRedButton: designSystemColors.errorPrimary,
   whiteText: designSystemColors.shadesWhite100,
   tooltipBackground: designSystemColors.shadesWhite70,
   logInSpacer: '#FFFFFF33',
   siweButton: designSystemColors.shadesWhite100,
   siweButtonText: designSystemColors.shadesBlack85,
   drawerExpandButton: designSystemColors.shadesBlack50,
   drawerExpandButtonDisabled: designSystemColors.shadesWhite60,
   drawerItemLabelLevel0: designSystemColors.shadesBlack95,
   drawerItemLabelLevel1: designSystemColors.shadesBlack95,
   drawerItemLabelLevel2: designSystemColors.shadesBlack85,
   drawerOpenCommunityBackground: designSystemColors.shadesWhite90,
   drawerBackground: designSystemColors.shadesWhite100,
   subthreadsModalClose: designSystemColors.shadesBlack50,
   subthreadsModalBackground: designSystemColors.shadesWhite80,
   subthreadsModalSearch: '#00000008',
   messageLabel: designSystemColors.shadesBlack95,
   modalSeparator: designSystemColors.shadesWhite60,
   secondaryButtonBorder: designSystemColors.shadesWhite100,
   inviteLinkLinkColor: designSystemColors.shadesBlack95,
   inviteLinkButtonBackground: designSystemColors.shadesWhite60,
   greenIndicatorInner: designSystemColors.successPrimary,
   greenIndicatorOuter: designSystemColors.successDark50,
   redIndicatorInner: designSystemColors.errorPrimary,
   redIndicatorOuter: designSystemColors.errorDark50,
 });
 export type Colors = $Exact<typeof light>;
 
 const dark: Colors = Object.freeze({
   blockQuoteBackground: '#A9A9A9',
   blockQuoteBorder: designSystemColors.shadesBlack50,
   codeBackground: designSystemColors.shadesBlack95,
   disabledButton: designSystemColors.shadesBlack75,
   disabledButtonText: designSystemColors.shadesBlack50,
   disconnectedBarBackground: designSystemColors.shadesBlack85,
   editButton: designSystemColors.shadesBlack60,
   floatingButtonBackground: designSystemColors.shadesBlack60,
   floatingButtonLabel: designSystemColors.shadesWhite100,
   headerChevron: designSystemColors.shadesWhite100,
   inlineEngagementBackground: designSystemColors.shadesBlack60,
   inlineEngagementLabel: designSystemColors.shadesWhite100,
   link: designSystemColors.violetLight100,
   listBackground: designSystemColors.shadesBlack95,
   listBackgroundLabel: designSystemColors.shadesWhite60,
   listBackgroundSecondaryLabel: '#BBBBBB',
   listBackgroundTernaryLabel: designSystemColors.shadesBlack50,
   listChatBubble: '#26252A',
   listForegroundLabel: designSystemColors.shadesWhite100,
   listForegroundSecondaryLabel: designSystemColors.shadesWhite60,
   listForegroundTertiaryLabel: designSystemColors.shadesBlack50,
   listInputBackground: designSystemColors.shadesBlack85,
   listInputBar: designSystemColors.shadesBlack60,
   listInputButton: designSystemColors.shadesWhite60,
   listIosHighlightUnderlay: '#BBBBBB88',
   listSearchBackground: designSystemColors.shadesBlack85,
   listSearchIcon: designSystemColors.shadesWhite60,
   listSeparatorLabel: designSystemColors.shadesWhite80,
   modalBackground: designSystemColors.shadesBlack95,
   modalBackgroundLabel: designSystemColors.shadesWhite60,
   modalBackgroundSecondaryLabel: designSystemColors.shadesBlack60,
   modalButton: designSystemColors.shadesBlack60,
   modalButtonLabel: designSystemColors.shadesWhite100,
   modalContrastBackground: designSystemColors.shadesWhite100,
   modalContrastForegroundLabel: designSystemColors.shadesBlack95,
   modalContrastOpacity: 0.85,
   modalForeground: designSystemColors.shadesBlack85,
   modalForegroundBorder: designSystemColors.shadesBlack85,
   modalForegroundLabel: designSystemColors.shadesWhite100,
   modalForegroundSecondaryLabel: '#AAAAAA',
   modalForegroundTertiaryLabel: designSystemColors.shadesBlack60,
   modalIosHighlightUnderlay: '#AAAAAA88',
   modalSubtext: designSystemColors.shadesBlack75,
   modalSubtextLabel: '#AAAAAA',
   modalInputBackground: designSystemColors.shadesBlack75,
   modalInputForeground: designSystemColors.shadesBlack50,
   modalKnob: designSystemColors.shadesWhite90,
   modalAccentBackground: designSystemColors.shadesBlack90,
   navigationCard: '#2A2A2A',
   navigationChevron: designSystemColors.shadesBlack60,
   panelBackground: designSystemColors.shadesBlack95,
   panelBackgroundLabel: designSystemColors.shadesWhite60,
   panelButton: designSystemColors.shadesBlack60,
   panelForeground: designSystemColors.shadesBlack85,
   panelForegroundBorder: '#2C2C2E',
   panelForegroundLabel: designSystemColors.shadesWhite100,
   panelForegroundSecondaryLabel: designSystemColors.shadesWhite60,
   panelForegroundTertiaryLabel: '#AAAAAA',
   panelInputBackground: designSystemColors.shadesBlack75,
   panelInputSecondaryForeground: designSystemColors.shadesBlack50,
   panelIosHighlightUnderlay: '#313035',
   panelSecondaryForeground: designSystemColors.shadesBlack75,
   panelSecondaryForegroundBorder: designSystemColors.shadesBlack60,
   panelSeparator: designSystemColors.shadesBlack75,
   purpleLink: designSystemColors.violetLight100,
   purpleButton: designSystemColors.violetDark100,
   reactionSelectionPopoverItemBackground: designSystemColors.shadesBlack75,
   redText: designSystemColors.errorPrimary,
   spoiler: designSystemColors.spoilerColor,
   tabBarAccent: designSystemColors.violetLight100,
   tabBarBackground: designSystemColors.shadesBlack95,
   tabBarActiveTintColor: designSystemColors.violetLight100,
   vibrantGreenButton: designSystemColors.successPrimary,
   vibrantRedButton: designSystemColors.errorPrimary,
   whiteText: designSystemColors.shadesWhite100,
   tooltipBackground: designSystemColors.shadesBlack85,
   logInSpacer: '#FFFFFF33',
   siweButton: designSystemColors.shadesWhite100,
   siweButtonText: designSystemColors.shadesBlack85,
   drawerExpandButton: designSystemColors.shadesBlack50,
   drawerExpandButtonDisabled: designSystemColors.shadesBlack75,
   drawerItemLabelLevel0: designSystemColors.shadesWhite60,
   drawerItemLabelLevel1: designSystemColors.shadesWhite60,
   drawerItemLabelLevel2: designSystemColors.shadesWhite90,
   drawerOpenCommunityBackground: designSystemColors.shadesBlack90,
   drawerBackground: designSystemColors.shadesBlack85,
   subthreadsModalClose: designSystemColors.shadesBlack50,
   subthreadsModalBackground: designSystemColors.shadesBlack85,
   subthreadsModalSearch: '#FFFFFF04',
   typeaheadTooltipBackground: '#1F1F1f',
   typeaheadTooltipBorder: designSystemColors.shadesBlack75,
   typeaheadTooltipText: 'white',
   messageLabel: designSystemColors.shadesWhite60,
   modalSeparator: designSystemColors.shadesBlack75,
   secondaryButtonBorder: designSystemColors.shadesWhite100,
   inviteLinkLinkColor: designSystemColors.shadesWhite80,
   inviteLinkButtonBackground: designSystemColors.shadesBlack75,
   greenIndicatorInner: designSystemColors.successPrimary,
   greenIndicatorOuter: designSystemColors.successDark90,
   redIndicatorInner: designSystemColors.errorPrimary,
   redIndicatorOuter: designSystemColors.errorDark90,
 });
 const colors = { light, dark };
 
 const colorsSelector: (state: AppState) => Colors = createSelector(
   (state: AppState) => state.globalThemeInfo.activeTheme,
   (theme: ?GlobalTheme) => {
     const explicitTheme = theme ? theme : 'light';
     return colors[explicitTheme];
   },
 );
 
 const magicStrings = new Set();
 for (const theme in colors) {
   for (const magicString in colors[theme]) {
     magicStrings.add(magicString);
   }
 }
 
 type Styles = { [name: string]: { [field: string]: mixed } };
 
 type ReplaceField = (input: any) => any;
-export type StyleSheetOf<S: Styles> = $ObjMap<S, ReplaceField>;
+export type StyleSheetOf<S: Styles> = $ReadOnly<$ObjMap<S, ReplaceField>>;
 
 function stylesFromColors<IS: Styles>(
   obj: IS,
   themeColors: Colors,
 ): StyleSheetOf<IS> {
   const result: Styles = {};
   for (const key in obj) {
     const style = obj[key];
     const filledInStyle = { ...style };
     for (const styleKey in style) {
       const styleValue = style[styleKey];
       if (typeof styleValue !== 'string') {
         continue;
       }
       if (magicStrings.has(styleValue)) {
         const mapped = themeColors[styleValue];
         if (mapped) {
           filledInStyle[styleKey] = mapped;
         }
       }
     }
     result[key] = filledInStyle;
   }
   return StyleSheet.create(result);
 }
 
 function styleSelector<IS: Styles>(
   obj: IS,
 ): (state: AppState) => StyleSheetOf<IS> {
   return createSelector(colorsSelector, (themeColors: Colors) =>
     stylesFromColors(obj, themeColors),
   );
 }
 
 function useStyles<IS: Styles>(obj: IS): StyleSheetOf<IS> {
   const ourColors = useColors();
   return React.useMemo(
     () => stylesFromColors(obj, ourColors),
     [obj, ourColors],
   );
 }
 
 function useOverlayStyles<IS: Styles>(obj: IS): StyleSheetOf<IS> {
   const navContext = React.useContext(NavContext);
   const navigationState = navContext && navContext.state;
 
   const theme = useSelector(
     (state: AppState) => state.globalThemeInfo.activeTheme,
   );
 
   const backgroundIsDark = React.useMemo(
     () => selectBackgroundIsDark(navigationState, theme),
     [navigationState, theme],
   );
   const syntheticTheme = backgroundIsDark ? 'dark' : 'light';
 
   return React.useMemo(
     () => stylesFromColors(obj, colors[syntheticTheme]),
     [obj, syntheticTheme],
   );
 }
 
 function useColors(): Colors {
   return useSelector(colorsSelector);
 }
 
 function getStylesForTheme<IS: Styles>(
   obj: IS,
   theme: GlobalTheme,
 ): StyleSheetOf<IS> {
   return stylesFromColors(obj, colors[theme]);
 }
 
 export type IndicatorStyle = 'white' | 'black';
 function useIndicatorStyle(): IndicatorStyle {
   const theme = useSelector(
     (state: AppState) => state.globalThemeInfo.activeTheme,
   );
   return theme && theme === 'dark' ? 'white' : 'black';
 }
 const indicatorStyleSelector: (state: AppState) => IndicatorStyle =
   createSelector(
     (state: AppState) => state.globalThemeInfo.activeTheme,
     (theme: ?GlobalTheme) => {
       return theme && theme === 'dark' ? 'white' : 'black';
     },
   );
 
 export type KeyboardAppearance = 'default' | 'light' | 'dark';
 const keyboardAppearanceSelector: (state: AppState) => KeyboardAppearance =
   createSelector(
     (state: AppState) => state.globalThemeInfo.activeTheme,
     (theme: ?GlobalTheme) => {
       return theme && theme === 'dark' ? 'dark' : 'light';
     },
   );
 
 function useKeyboardAppearance(): KeyboardAppearance {
   return useSelector(keyboardAppearanceSelector);
 }
 
 export {
   colors,
   colorsSelector,
   styleSelector,
   useStyles,
   useOverlayStyles,
   useColors,
   getStylesForTheme,
   useIndicatorStyle,
   indicatorStyleSelector,
   useKeyboardAppearance,
 };
diff --git a/native/tooltip/tooltip.react.js b/native/tooltip/tooltip.react.js
index 1d14b39bc..6dc7ae008 100644
--- a/native/tooltip/tooltip.react.js
+++ b/native/tooltip/tooltip.react.js
@@ -1,607 +1,607 @@
 // @flow
 
 import type { RouteProp } from '@react-navigation/core';
 import * as Haptics from 'expo-haptics';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   TouchableWithoutFeedback,
   Platform,
   Keyboard,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import {
   TooltipContextProvider,
   TooltipContext,
   type TooltipContextType,
 } from './tooltip-context.react.js';
 import BaseTooltipItem, {
   type TooltipItemBaseProps,
 } from './tooltip-item.react.js';
 import { ChatContext, type ChatContextType } from '../chat/chat-context.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import type { TooltipModalParamList } from '../navigation/route-names.js';
 import { type DimensionsInfo } from '../redux/dimensions-updater.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import {
   type VerticalBounds,
   type LayoutCoordinates,
 } from '../types/layout-types.js';
 import type { LayoutEvent } from '../types/react-native.js';
 import {
   AnimatedView,
   type ViewStyle,
   type AnimatedViewStyle,
   type WritableAnimatedStyleObj,
   type ReanimatedTransform,
 } from '../types/styles.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Value, Node, Extrapolate, add, multiply, interpolateNode } = Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 const unboundStyles = {
   backdrop: {
     backgroundColor: 'black',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   container: {
     flex: 1,
   },
   contentContainer: {
     flex: 1,
     overflow: 'hidden',
   },
   icon: {
     color: 'modalForegroundLabel',
   },
   itemContainer: {
     alignItems: 'center',
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
     padding: 10,
   },
   itemContainerFixed: {
     flexDirection: 'column',
   },
   items: {
     backgroundColor: 'tooltipBackground',
     borderRadius: 5,
     overflow: 'hidden',
   },
   itemsFixed: {
     flex: 1,
     flexDirection: 'row',
   },
   triangleDown: {
     borderBottomColor: 'transparent',
     borderBottomWidth: 0,
     borderLeftColor: 'transparent',
     borderLeftWidth: 10,
     borderRightColor: 'transparent',
     borderRightWidth: 10,
     borderStyle: 'solid',
     borderTopColor: 'tooltipBackground',
     borderTopWidth: 10,
     height: 10,
     top: Platform.OS === 'android' ? -1 : 0,
     width: 10,
   },
   triangleUp: {
     borderBottomColor: 'tooltipBackground',
     borderBottomWidth: 10,
     borderLeftColor: 'transparent',
     borderLeftWidth: 10,
     borderRightColor: 'transparent',
     borderRightWidth: 10,
     borderStyle: 'solid',
     borderTopColor: 'transparent',
     borderTopWidth: 0,
     bottom: Platform.OS === 'android' ? -1 : 0,
     height: 10,
     width: 10,
   },
 };
 
 export type TooltipParams<CustomProps> = {
   ...CustomProps,
   +presentedFrom: string,
   +initialCoordinates: LayoutCoordinates,
   +verticalBounds: VerticalBounds,
   +tooltipLocation?: 'above' | 'below' | 'fixed',
   +margin?: number,
   +visibleEntryIDs?: $ReadOnlyArray<string>,
   +chatInputBarHeight?: number,
   +hideTooltip?: boolean,
 };
 export type TooltipRoute<RouteName: $Keys<TooltipModalParamList>> = RouteProp<
   TooltipModalParamList,
   RouteName,
 >;
 
 export type BaseTooltipProps<RouteName> = {
   +navigation: AppNavigationProp<RouteName>,
   +route: TooltipRoute<RouteName>,
 };
 type ButtonProps<Base> = {
   ...Base,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 type TooltipProps<Base> = {
   ...Base,
   // Redux state
   +dimensions: DimensionsInfo,
   +overlayContext: ?OverlayContextType,
   +chatContext: ?ChatContextType,
-  +styles: typeof unboundStyles,
+  +styles: $ReadOnly<typeof unboundStyles>,
   +tooltipContext: TooltipContextType,
   +closeTooltip: () => mixed,
   +boundTooltipItem: React.ComponentType<TooltipItemBaseProps>,
 };
 
 export type TooltipMenuProps<RouteName> = {
   ...BaseTooltipProps<RouteName>,
   +tooltipItem: React.ComponentType<TooltipItemBaseProps>,
 };
 
 function createTooltip<
   RouteName: $Keys<TooltipModalParamList>,
   BaseTooltipPropsType: BaseTooltipProps<RouteName> = BaseTooltipProps<RouteName>,
 >(
   ButtonComponent: React.ComponentType<ButtonProps<BaseTooltipPropsType>>,
   MenuComponent: React.ComponentType<TooltipMenuProps<RouteName>>,
 ): React.ComponentType<BaseTooltipPropsType> {
   class Tooltip extends React.PureComponent<
     TooltipProps<BaseTooltipPropsType>,
   > {
     backdropOpacity: Node;
     tooltipContainerOpacity: Node;
     tooltipVerticalAbove: Node;
     tooltipVerticalBelow: Node;
     tooltipHorizontalOffset: Value = new Value(0);
     tooltipHorizontal: Node;
     tooltipScale: Node;
     fixedTooltipVertical: Node;
 
     constructor(props: TooltipProps<BaseTooltipPropsType>) {
       super(props);
 
       const { overlayContext } = props;
       invariant(overlayContext, 'Tooltip should have OverlayContext');
       const { position } = overlayContext;
 
       this.backdropOpacity = interpolateNode(position, {
         inputRange: [0, 1],
         outputRange: [0, 0.7],
         extrapolate: Extrapolate.CLAMP,
       });
       this.tooltipContainerOpacity = interpolateNode(position, {
         inputRange: [0, 0.1],
         outputRange: [0, 1],
         extrapolate: Extrapolate.CLAMP,
       });
 
       const { margin } = this;
       this.tooltipVerticalAbove = interpolateNode(position, {
         inputRange: [0, 1],
         outputRange: [margin + this.tooltipHeight / 2, 0],
         extrapolate: Extrapolate.CLAMP,
       });
       this.tooltipVerticalBelow = interpolateNode(position, {
         inputRange: [0, 1],
         outputRange: [-margin - this.tooltipHeight / 2, 0],
         extrapolate: Extrapolate.CLAMP,
       });
 
       const invertedPosition = add(1, multiply(-1, position));
 
       this.tooltipHorizontal = multiply(
         invertedPosition,
         this.tooltipHorizontalOffset,
       );
 
       this.tooltipScale = interpolateNode(position, {
         inputRange: [0, 0.2, 0.8, 1],
         outputRange: [0, 0, 1, 1],
         extrapolate: Extrapolate.CLAMP,
       });
 
       this.fixedTooltipVertical = multiply(
         invertedPosition,
         props.dimensions.height,
       );
     }
 
     componentDidMount() {
       Haptics.impactAsync();
     }
 
     get tooltipHeight(): number {
       if (this.props.route.params.tooltipLocation === 'fixed') {
         return fixedTooltipHeight;
       } else {
         return tooltipHeight(this.props.tooltipContext.getNumVisibleEntries());
       }
     }
 
     get tooltipLocation(): 'above' | 'below' | 'fixed' {
       const { params } = this.props.route;
       const { tooltipLocation } = params;
       if (tooltipLocation) {
         return tooltipLocation;
       }
 
       const { initialCoordinates, verticalBounds } = params;
       const { y, height } = initialCoordinates;
       const contentTop = y;
       const contentBottom = y + height;
       const boundsTop = verticalBounds.y;
       const boundsBottom = verticalBounds.y + verticalBounds.height;
 
       const { margin, tooltipHeight: curTooltipHeight } = this;
       const fullHeight = curTooltipHeight + margin;
       if (
         contentBottom + fullHeight > boundsBottom &&
         contentTop - fullHeight > boundsTop
       ) {
         return 'above';
       }
 
       return 'below';
     }
 
     get opacityStyle(): AnimatedViewStyle {
       return {
         ...this.props.styles.backdrop,
         opacity: this.backdropOpacity,
       };
     }
 
     get contentContainerStyle(): ViewStyle {
       const { verticalBounds } = this.props.route.params;
       const fullScreenHeight = this.props.dimensions.height;
       const top = verticalBounds.y;
       const bottom =
         fullScreenHeight - verticalBounds.y - verticalBounds.height;
       return {
         ...this.props.styles.contentContainer,
         marginTop: top,
         marginBottom: bottom,
       };
     }
 
     get buttonStyle(): ViewStyle {
       const { params } = this.props.route;
       const { initialCoordinates, verticalBounds } = params;
       const { x, y, width, height } = initialCoordinates;
       return {
         width: Math.ceil(width),
         height: Math.ceil(height),
         marginTop: y - verticalBounds.y,
         marginLeft: x,
       };
     }
 
     get margin(): number {
       const customMargin = this.props.route.params.margin;
       return customMargin !== null && customMargin !== undefined
         ? customMargin
         : 20;
     }
 
     get tooltipContainerStyle(): AnimatedViewStyle {
       const { dimensions, route } = this.props;
       const { initialCoordinates, verticalBounds, chatInputBarHeight } =
         route.params;
       const { x, y, width, height } = initialCoordinates;
       const { margin, tooltipLocation } = this;
 
       const style: WritableAnimatedStyleObj = {};
       style.position = 'absolute';
       style.alignItems = 'center';
       style.opacity = this.tooltipContainerOpacity;
 
       const transform: Array<ReanimatedTransform> = [];
 
       if (tooltipLocation !== 'fixed') {
         transform.push({ translateX: this.tooltipHorizontal });
       }
 
       const extraLeftSpace = x;
       const extraRightSpace = dimensions.width - width - x;
       if (extraLeftSpace < extraRightSpace) {
         style.left = 0;
         style.minWidth = width + 2 * extraLeftSpace;
       } else {
         style.right = 0;
         style.minWidth = width + 2 * extraRightSpace;
       }
 
       const inputBarHeight = chatInputBarHeight ?? 0;
 
       if (tooltipLocation === 'fixed') {
         const padding = 8;
 
         style.minWidth = dimensions.width - 16;
         style.left = 8;
         style.right = 8;
         style.bottom =
           dimensions.height -
           verticalBounds.height -
           verticalBounds.y -
           inputBarHeight +
           padding;
         transform.push({ translateY: this.fixedTooltipVertical });
       } else if (tooltipLocation === 'above') {
         style.bottom =
           dimensions.height - Math.max(y, verticalBounds.y) + margin;
         transform.push({ translateY: this.tooltipVerticalAbove });
       } else {
         style.top =
           Math.min(y + height, verticalBounds.y + verticalBounds.height) +
           margin;
         transform.push({ translateY: this.tooltipVerticalBelow });
       }
 
       if (tooltipLocation !== 'fixed') {
         transform.push({ scale: this.tooltipScale });
       }
 
       style.transform = transform;
 
       return style;
     }
 
     render(): React.Node {
       const {
         dimensions,
         overlayContext,
         chatContext,
         styles,
         tooltipContext,
         closeTooltip,
         boundTooltipItem,
         ...navAndRouteForFlow
       } = this.props;
 
       const tooltipContainerStyle: Array<ViewStyle> = [styles.itemContainer];
 
       if (this.tooltipLocation === 'fixed') {
         tooltipContainerStyle.push(styles.itemContainerFixed);
       }
 
       const items: Array<React.Node> = [
         <MenuComponent
           {...navAndRouteForFlow}
           tooltipItem={this.getTooltipItem()}
           key="menu"
         />,
       ];
 
       if (this.props.tooltipContext.shouldShowMore()) {
         items.push(
           <BaseTooltipItem
             id="more"
             text="More"
             onPress={this.onPressMore}
             renderIcon={this.renderMoreIcon}
             containerStyle={tooltipContainerStyle}
             key="more"
           />,
         );
       }
 
       let triangleStyle;
       const { route } = this.props;
       const { initialCoordinates } = route.params;
       const { x, width } = initialCoordinates;
       const extraLeftSpace = x;
       const extraRightSpace = dimensions.width - width - x;
       if (extraLeftSpace < extraRightSpace) {
         triangleStyle = {
           alignSelf: 'flex-start',
           left: extraLeftSpace + (width - 20) / 2,
         };
       } else {
         triangleStyle = {
           alignSelf: 'flex-end',
           right: extraRightSpace + (width - 20) / 2,
         };
       }
 
       let triangleDown = null;
       let triangleUp = null;
       const { tooltipLocation } = this;
       if (tooltipLocation === 'above') {
         triangleDown = <View style={[styles.triangleDown, triangleStyle]} />;
       } else if (tooltipLocation === 'below') {
         triangleUp = <View style={[styles.triangleUp, triangleStyle]} />;
       }
 
       invariant(overlayContext, 'Tooltip should have OverlayContext');
       const { position } = overlayContext;
       const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID;
 
       const buttonProps: ButtonProps<BaseTooltipPropsType> = {
         ...navAndRouteForFlow,
         progress: position,
         isOpeningSidebar,
       };
 
       const itemsStyles = [styles.items, styles.itemsFixed];
 
       let tooltip = null;
 
       if (this.tooltipLocation !== 'fixed') {
         tooltip = (
           <AnimatedView
             style={this.tooltipContainerStyle}
             onLayout={this.onTooltipContainerLayout}
           >
             {triangleUp}
             <View style={styles.items}>{items}</View>
             {triangleDown}
           </AnimatedView>
         );
       } else if (
         this.tooltipLocation === 'fixed' &&
         !this.props.route.params.hideTooltip
       ) {
         tooltip = (
           <AnimatedView style={this.tooltipContainerStyle}>
             <View style={itemsStyles}>{items}</View>
           </AnimatedView>
         );
       }
 
       return (
         <TouchableWithoutFeedback onPress={this.props.closeTooltip}>
           <View style={styles.container}>
             <AnimatedView style={this.opacityStyle} />
             <View style={this.contentContainerStyle}>
               <View style={this.buttonStyle}>
                 <ButtonComponent {...buttonProps} />
               </View>
             </View>
             {tooltip}
           </View>
         </TouchableWithoutFeedback>
       );
     }
 
     getTooltipItem(): React.ComponentType<TooltipItemBaseProps> {
       const BoundTooltipItem = this.props.boundTooltipItem;
       return BoundTooltipItem;
     }
 
     onPressMore = () => {
       Keyboard.dismiss();
       this.props.tooltipContext.showActionSheet();
     };
 
     renderMoreIcon = (): React.Node => {
       const { styles } = this.props;
       return (
         <SWMansionIcon name="menu-vertical" style={styles.icon} size={16} />
       );
     };
 
     onTooltipContainerLayout = (event: LayoutEvent) => {
       const { route, dimensions } = this.props;
       const { x, width } = route.params.initialCoordinates;
 
       const extraLeftSpace = x;
       const extraRightSpace = dimensions.width - width - x;
 
       const actualWidth = event.nativeEvent.layout.width;
       if (extraLeftSpace < extraRightSpace) {
         const minWidth = width + 2 * extraLeftSpace;
         this.tooltipHorizontalOffset.setValue((minWidth - actualWidth) / 2);
       } else {
         const minWidth = width + 2 * extraRightSpace;
         this.tooltipHorizontalOffset.setValue((actualWidth - minWidth) / 2);
       }
     };
   }
   function ConnectedTooltip(
     props: $ReadOnly<{
       ...BaseTooltipPropsType,
       +hideTooltip: () => mixed,
     }>,
   ) {
     const dimensions = useSelector(state => state.dimensions);
     const overlayContext = React.useContext(OverlayContext);
     const chatContext = React.useContext(ChatContext);
 
     const { params } = props.route;
     const { tooltipLocation } = params;
     const isFixed = tooltipLocation === 'fixed';
 
     const { hideTooltip, ...rest } = props;
 
     const { goBackOnce } = props.navigation;
     const closeTooltip = React.useCallback(() => {
       goBackOnce();
       if (isFixed) {
         hideTooltip();
       }
     }, [isFixed, hideTooltip, goBackOnce]);
 
     const styles = useStyles(unboundStyles);
     const boundTooltipItem = React.useCallback(
       (innerProps: TooltipItemBaseProps) => {
         const containerStyle = isFixed
           ? [styles.itemContainer, styles.itemContainerFixed]
           : styles.itemContainer;
         return (
           <BaseTooltipItem
             {...innerProps}
             containerStyle={containerStyle}
             closeTooltip={closeTooltip}
           />
         );
       },
       [isFixed, styles, closeTooltip],
     );
 
     const tooltipContext = React.useContext(TooltipContext);
     invariant(tooltipContext, 'TooltipContext should be set in Tooltip');
     return (
       <Tooltip
         {...rest}
         dimensions={dimensions}
         overlayContext={overlayContext}
         chatContext={chatContext}
         styles={styles}
         tooltipContext={tooltipContext}
         closeTooltip={closeTooltip}
         boundTooltipItem={boundTooltipItem}
       />
     );
   }
   function MemoizedTooltip(props: BaseTooltipPropsType) {
     const { visibleEntryIDs } = props.route.params;
     const { goBackOnce } = props.navigation;
 
     const { setParams } = props.navigation;
     const hideTooltip = React.useCallback(() => {
       const paramsUpdate: any = { hideTooltip: true };
       setParams(paramsUpdate);
     }, [setParams]);
 
     return (
       <TooltipContextProvider
         maxOptionsToDisplay={4}
         visibleEntryIDs={visibleEntryIDs}
         cancel={goBackOnce}
         hideTooltip={hideTooltip}
       >
         <ConnectedTooltip {...props} hideTooltip={hideTooltip} />
       </TooltipContextProvider>
     );
   }
   return React.memo<BaseTooltipPropsType>(MemoizedTooltip);
 }
 
 function tooltipHeight(numEntries: number): number {
   // 10 (triangle) + 37 * numEntries (entries) + numEntries - 1 (padding)
   return 9 + 38 * numEntries;
 }
 
 const fixedTooltipHeight: number = 53;
 
 export { createTooltip, fixedTooltipHeight };