diff --git a/keyserver/jest-setup.js b/keyserver/jest-setup.js
index fbd15edbf..3750c89fc 100644
--- a/keyserver/jest-setup.js
+++ b/keyserver/jest-setup.js
@@ -1,8 +1,7 @@
 // @flow
 
 import crypto from 'crypto';
 
 // crypto.webcrypto was introduced in Node 15.10.0.
 // It is not defined in Flow so we need a cast
-// eslint-disable-next-line no-undef -- "global is not defined"
 global.crypto = (crypto: any).webcrypto;
diff --git a/lib/webpack/shared.cjs b/lib/webpack/shared.cjs
index f31e32f8f..e268afe8e 100644
--- a/lib/webpack/shared.cjs
+++ b/lib/webpack/shared.cjs
@@ -1,301 +1,300 @@
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 
 async function getConfig(configName) {
   const { getCommConfig } = await import(
-    // eslint-disable-next-line monorepo/no-relative-import
     '../../keyserver/dist/lib/utils/comm-config.js'
   );
   return await getCommConfig(configName);
 }
 
 const sharedPlugins = [
   new webpack.optimize.LimitChunkCountPlugin({
     maxChunks: 1,
   }),
 ];
 
 const cssLoader = {
   loader: 'css-loader',
   options: {
     modules: {
       mode: 'local',
       localIdentName: '[path][name]__[local]--[contenthash:base64:5]',
     },
   },
 };
 const cssExtractLoader = {
   loader: MiniCssExtractPlugin.loader,
 };
 const styleLoader = {
   loader: 'style-loader',
 };
 
 function getBabelRule(babelConfig) {
   return {
     test: /\.js$/,
     exclude: /node_modules\/(?!lib)/,
     loader: 'babel-loader',
     options: babelConfig,
   };
 }
 function getBrowserBabelRule(babelConfig) {
   const babelRule = getBabelRule(babelConfig);
   return {
     ...babelRule,
     options: {
       ...babelRule.options,
       presets: [
         ...babelRule.options.presets,
         [
           '@babel/preset-env',
           {
             targets: 'defaults',
             useBuiltIns: 'usage',
             corejs: '3.6',
           },
         ],
       ],
     },
   };
 }
 
 const imageRule = {
   test: /\.(png|svg)$/,
   type: 'asset/inline',
 };
 
 const typographyRule = {
   test: /\.(woff2|woff)$/,
   type: 'asset/inline',
 };
 
 function createBaseBrowserConfig(baseConfig) {
   return {
     ...baseConfig,
     name: 'browser',
     optimization: {
       minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
     },
     plugins: [
       ...(baseConfig.plugins ?? []),
       ...sharedPlugins,
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
       }),
       new CleanWebpackPlugin({
         cleanOnceBeforeBuildPatterns: [],
       }),
     ],
     node: {
       global: true,
     },
   };
 }
 
 async function getConfigs() {
   const [alchemySecret, walletConnectSecret] = await Promise.all([
     getConfig({ folder: 'secrets', name: 'alchemy' }),
     getConfig({ folder: 'secrets', name: 'walletconnect' }),
   ]);
   const alchemyKey = alchemySecret?.key;
   const walletConnectKey = walletConnectSecret?.key;
   return { alchemyKey, walletConnectKey };
 }
 
 async function createProdBrowserConfig(baseConfig, babelConfig, envVars) {
   const browserConfig = createBaseBrowserConfig(baseConfig);
   const babelRule = getBrowserBabelRule(babelConfig);
   const { alchemyKey, walletConnectKey } = await getConfigs();
   return {
     ...browserConfig,
     mode: 'production',
     plugins: [
       ...browserConfig.plugins,
       new webpack.DefinePlugin({
         'process.env': {
           NODE_ENV: JSON.stringify('production'),
           BROWSER: true,
           COMM_ALCHEMY_KEY: JSON.stringify(alchemyKey),
           COMM_WALLETCONNECT_KEY: JSON.stringify(walletConnectKey),
           ...envVars,
         },
       }),
       new MiniCssExtractPlugin({
         filename: 'prod.[contenthash:12].build.css',
       }),
     ],
     module: {
       rules: [
         {
           ...babelRule,
           options: {
             ...babelRule.options,
             plugins: [
               ...babelRule.options.plugins,
               '@babel/plugin-transform-react-constant-elements',
               ['transform-remove-console', { exclude: ['error', 'warn'] }],
             ],
           },
         },
         {
           test: /\.css$/,
           exclude: /node_modules\/.*\.css$/,
           use: [
             cssExtractLoader,
             {
               ...cssLoader,
               options: {
                 ...cssLoader.options,
                 url: false,
               },
             },
           ],
         },
         {
           test: /node_modules\/.*\.css$/,
           sideEffects: true,
           use: [
             cssExtractLoader,
             {
               ...cssLoader,
               options: {
                 ...cssLoader.options,
                 url: false,
                 modules: false,
               },
             },
           ],
         },
       ],
     },
   };
 }
 
 async function createDevBrowserConfig(baseConfig, babelConfig, envVars) {
   const browserConfig = createBaseBrowserConfig(baseConfig);
   const babelRule = getBrowserBabelRule(babelConfig);
   const { alchemyKey, walletConnectKey } = await getConfigs();
   return {
     ...browserConfig,
     mode: 'development',
     plugins: [
       ...browserConfig.plugins,
       new webpack.DefinePlugin({
         'process.env': {
           NODE_ENV: JSON.stringify('development'),
           BROWSER: true,
           COMM_ALCHEMY_KEY: JSON.stringify(alchemyKey),
           COMM_WALLETCONNECT_KEY: JSON.stringify(walletConnectKey),
           ...envVars,
         },
       }),
       new ReactRefreshWebpackPlugin(),
     ],
     module: {
       rules: [
         {
           ...babelRule,
           options: {
             ...babelRule.options,
             plugins: [
               require.resolve('react-refresh/babel'),
               ...babelRule.options.plugins,
             ],
           },
         },
         imageRule,
         typographyRule,
         {
           test: /\.css$/,
           exclude: /node_modules\/.*\.css$/,
           use: [styleLoader, cssLoader],
         },
         {
           test: /node_modules\/.*\.css$/,
           sideEffects: true,
           use: [
             styleLoader,
             {
               ...cssLoader,
               options: {
                 ...cssLoader.options,
                 modules: false,
               },
             },
           ],
         },
       ],
     },
     devtool: 'eval-cheap-module-source-map',
   };
 }
 
 async function createNodeServerRenderingConfig(baseConfig, babelConfig) {
   const { alchemyKey, walletConnectKey } = await getConfigs();
   return {
     ...baseConfig,
     name: 'server',
     target: 'node',
     module: {
       rules: [
         getBabelRule(babelConfig),
         {
           test: /\.css$/,
           use: {
             ...cssLoader,
             options: {
               ...cssLoader.options,
               modules: {
                 ...cssLoader.options.modules,
                 exportOnlyLocals: true,
               },
             },
           },
         },
       ],
     },
     plugins: [
       ...sharedPlugins,
       new webpack.DefinePlugin({
         'process.env': {
           COMM_ALCHEMY_KEY: JSON.stringify(alchemyKey),
           COMM_WALLETCONNECT_KEY: JSON.stringify(walletConnectKey),
         },
       }),
     ],
   };
 }
 
 function createWebWorkersConfig(env, baseConfig, babelConfig) {
   return {
     ...baseConfig,
     name: 'webworkers',
     target: 'webworker',
     mode: env.prod ? 'production' : 'development',
     module: {
       rules: [getBrowserBabelRule(babelConfig)],
     },
     plugins: [
       ...sharedPlugins,
       ...baseConfig.plugins,
       new webpack.DefinePlugin({
         'process.env': {
           NODE_ENV: JSON.stringify(env.prod ? 'production' : 'development'),
           BROWSER: true,
         },
       }),
     ],
   };
 }
 
 module.exports = {
   createProdBrowserConfig,
   createDevBrowserConfig,
   createNodeServerRenderingConfig,
   createWebWorkersConfig,
 };
diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
index 4cdbf1e8c..862c4f188 100644
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -1,847 +1,845 @@
 // @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 { enableNewRegistrationMode } from './registration/registration-types.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: $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: Partial<LogInState>) => (fullState: State) => ({
         logInState: {
           ...fullState.logInState,
           state: { ...fullState.logInState.state, ...change },
         },
       }),
     );
     const setRegisterState = setStateForContainer<State, RegisterState>(
       this.guardedSetState,
       (change: Partial<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) {
       void 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) {
       void 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: number = 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 (enableNewRegistrationMode) {
         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/account/register-panel.react.js b/native/account/register-panel.react.js
index eef3d1339..03225ed39 100644
--- a/native/account/register-panel.react.js
+++ b/native/account/register-panel.react.js
@@ -1,513 +1,511 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   Text,
   View,
   StyleSheet,
   Platform,
   Keyboard,
   Linking,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
 import {
   registerActionTypes,
   register,
   getOlmSessionInitializationDataActionTypes,
 } from 'lib/actions/user-actions.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import { validUsernameRegex } from 'lib/shared/account-utils.js';
 import { useInitialNotificationsEncryptedMessage } from 'lib/shared/crypto-utils.js';
 import type {
   RegisterInfo,
   LogInExtraInfo,
   RegisterResult,
   LogInStartingPayload,
 } from 'lib/types/account-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import {
   useServerCall,
   useDispatchActionPromise,
   type DispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import { TextInput } from './modal-components.react.js';
 import { setNativeCredentials } from './native-credentials.js';
 import { PanelButton, Panel } from './panel-components.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors.js';
 import type { KeyPressEvent } from '../types/react-native.js';
 import { AppOutOfDateAlertDetails } from '../utils/alert-messages.js';
 import Alert from '../utils/alert.js';
 import { nativeNotificationsSessionCreator } from '../utils/crypto-utils.js';
 import { type StateContainer } from '../utils/state-container.js';
 
 type WritableRegisterState = {
   usernameInputText: string,
   passwordInputText: string,
   confirmPasswordInputText: string,
 };
 export type RegisterState = $ReadOnly<WritableRegisterState>;
 type BaseProps = {
   +setActiveAlert: (activeAlert: boolean) => void,
   +opacityValue: Animated.Node,
   +registerState: StateContainer<RegisterState>,
 };
 type Props = {
   ...BaseProps,
   +loadingStatus: LoadingStatus,
   +logInExtraInfo: () => Promise<LogInExtraInfo>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +register: (registerInfo: RegisterInfo) => Promise<RegisterResult>,
   +getInitialNotificationsEncryptedMessage: () => Promise<string>,
 };
 type State = {
   +confirmPasswordFocused: boolean,
 };
 class RegisterPanel extends React.PureComponent<Props, State> {
   state: State = {
     confirmPasswordFocused: false,
   };
   usernameInput: ?TextInput;
   passwordInput: ?TextInput;
   confirmPasswordInput: ?TextInput;
   passwordBeingAutoFilled = false;
 
   render(): React.Node {
     let confirmPasswordTextInputExtraProps;
     if (
       Platform.OS !== 'ios' ||
       this.state.confirmPasswordFocused ||
       this.props.registerState.state.confirmPasswordInputText.length > 0
     ) {
       confirmPasswordTextInputExtraProps = {
         secureTextEntry: true,
         textContentType: 'password',
       };
     }
 
     let onPasswordKeyPress;
     if (Platform.OS === 'ios') {
       onPasswordKeyPress = this.onPasswordKeyPress;
     }
 
-    /* eslint-disable react-native/no-raw-text */
     const privatePolicyNotice = (
       <View style={styles.notice}>
         <Text style={styles.noticeText}>
           By signing up, you agree to our{' '}
           <Text style={styles.hyperlinkText} onPress={this.onTermsOfUsePressed}>
             Terms
           </Text>
           {' & '}
           <Text
             style={styles.hyperlinkText}
             onPress={this.onPrivacyPolicyPressed}
           >
             Privacy Policy
           </Text>
           .
         </Text>
       </View>
     );
-    /* eslint-enable react-native/no-raw-text */
 
     return (
       <Panel opacityValue={this.props.opacityValue} style={styles.container}>
         <View style={styles.row}>
           <SWMansionIcon
             name="user-1"
             size={22}
             color="#555"
             style={styles.icon}
           />
           <TextInput
             style={styles.input}
             value={this.props.registerState.state.usernameInputText}
             onChangeText={this.onChangeUsernameInputText}
             placeholder="Username"
             autoFocus={true}
             autoCorrect={false}
             autoCapitalize="none"
             keyboardType="ascii-capable"
             textContentType="username"
             autoComplete="username-new"
             returnKeyType="next"
             blurOnSubmit={false}
             onSubmitEditing={this.focusPasswordInput}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.usernameInputRef}
           />
         </View>
         <View style={styles.row}>
           <SWMansionIcon
             name="lock-on"
             size={22}
             color="#555"
             style={styles.icon}
           />
           <TextInput
             style={styles.input}
             value={this.props.registerState.state.passwordInputText}
             onChangeText={this.onChangePasswordInputText}
             onKeyPress={onPasswordKeyPress}
             placeholder="Password"
             secureTextEntry={true}
             textContentType="password"
             autoComplete="password-new"
             returnKeyType="next"
             blurOnSubmit={false}
             onSubmitEditing={this.focusConfirmPasswordInput}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.passwordInputRef}
           />
         </View>
         <View style={styles.row}>
           <TextInput
             style={styles.input}
             value={this.props.registerState.state.confirmPasswordInputText}
             onChangeText={this.onChangeConfirmPasswordInputText}
             placeholder="Confirm password"
             autoComplete="password-new"
             returnKeyType="go"
             blurOnSubmit={false}
             onSubmitEditing={this.onSubmit}
             onFocus={this.onConfirmPasswordFocus}
             editable={this.props.loadingStatus !== 'loading'}
             ref={this.confirmPasswordInputRef}
             {...confirmPasswordTextInputExtraProps}
           />
         </View>
         <View style={styles.footer}>
           {privatePolicyNotice}
           <PanelButton
             text="SIGN UP"
             loadingStatus={this.props.loadingStatus}
             onSubmit={this.onSubmit}
           />
         </View>
       </Panel>
     );
   }
 
   usernameInputRef = (usernameInput: ?TextInput) => {
     this.usernameInput = usernameInput;
   };
 
   passwordInputRef = (passwordInput: ?TextInput) => {
     this.passwordInput = passwordInput;
   };
 
   confirmPasswordInputRef = (confirmPasswordInput: ?TextInput) => {
     this.confirmPasswordInput = confirmPasswordInput;
   };
 
   focusUsernameInput = () => {
     invariant(this.usernameInput, 'ref should be set');
     this.usernameInput.focus();
   };
 
   focusPasswordInput = () => {
     invariant(this.passwordInput, 'ref should be set');
     this.passwordInput.focus();
   };
 
   focusConfirmPasswordInput = () => {
     invariant(this.confirmPasswordInput, 'ref should be set');
     this.confirmPasswordInput.focus();
   };
 
   onTermsOfUsePressed = () => {
     void Linking.openURL('https://comm.app/terms');
   };
 
   onPrivacyPolicyPressed = () => {
     void Linking.openURL('https://comm.app/privacy');
   };
 
   onChangeUsernameInputText = (text: string) => {
     this.props.registerState.setState({ usernameInputText: text });
   };
 
   onChangePasswordInputText = (text: string) => {
     const stateUpdate: Partial<WritableRegisterState> = {};
     stateUpdate.passwordInputText = text;
     if (this.passwordBeingAutoFilled) {
       this.passwordBeingAutoFilled = false;
       stateUpdate.confirmPasswordInputText = text;
     }
     this.props.registerState.setState(stateUpdate);
   };
 
   onPasswordKeyPress = (event: KeyPressEvent) => {
     const { key } = event.nativeEvent;
     if (
       key.length > 1 &&
       key !== 'Backspace' &&
       key !== 'Enter' &&
       this.props.registerState.state.confirmPasswordInputText.length === 0
     ) {
       this.passwordBeingAutoFilled = true;
     }
   };
 
   onChangeConfirmPasswordInputText = (text: string) => {
     this.props.registerState.setState({ confirmPasswordInputText: text });
   };
 
   onConfirmPasswordFocus = () => {
     this.setState({ confirmPasswordFocused: true });
   };
 
   onSubmit = async () => {
     this.props.setActiveAlert(true);
     if (this.props.registerState.state.passwordInputText === '') {
       Alert.alert(
         'Empty password',
         'Password cannot be empty',
         [{ text: 'OK', onPress: this.onPasswordAlertAcknowledged }],
         { cancelable: false },
       );
     } else if (
       this.props.registerState.state.passwordInputText !==
       this.props.registerState.state.confirmPasswordInputText
     ) {
       Alert.alert(
         'Passwords don’t match',
         'Password fields must contain the same password',
         [{ text: 'OK', onPress: this.onPasswordAlertAcknowledged }],
         { cancelable: false },
       );
     } else if (
       this.props.registerState.state.usernameInputText.search(
         validUsernameRegex,
       ) === -1
     ) {
       Alert.alert(
         'Invalid username',
         'Usernames must be at least six characters long, start with either a ' +
           'letter or a number, and may contain only letters, numbers, or the ' +
           'characters “-” and “_”',
         [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
         { cancelable: false },
       );
     } else {
       Keyboard.dismiss();
       const extraInfo = await this.props.logInExtraInfo();
       const initialNotificationsEncryptedMessage =
         await this.props.getInitialNotificationsEncryptedMessage();
       void this.props.dispatchActionPromise(
         registerActionTypes,
         this.registerAction({
           ...extraInfo,
           initialNotificationsEncryptedMessage,
         }),
         undefined,
         ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
       );
     }
   };
 
   onPasswordAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
     this.props.registerState.setState(
       {
         passwordInputText: '',
         confirmPasswordInputText: '',
       },
       () => {
         invariant(this.passwordInput, 'ref should exist');
         this.passwordInput.focus();
       },
     );
   };
 
   onUsernameAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
     this.props.registerState.setState(
       {
         usernameInputText: '',
       },
       () => {
         invariant(this.usernameInput, 'ref should exist');
         this.usernameInput.focus();
       },
     );
   };
 
   async registerAction(extraInfo: LogInExtraInfo): Promise<RegisterResult> {
     try {
       const result = await this.props.register({
         ...extraInfo,
         username: this.props.registerState.state.usernameInputText,
         password: this.props.registerState.state.passwordInputText,
       });
       this.props.setActiveAlert(false);
       this.props.dispatch({
         type: setDataLoadedActionType,
         payload: {
           dataLoaded: true,
         },
       });
       await setNativeCredentials({
         username: result.currentUserInfo.username,
         password: this.props.registerState.state.passwordInputText,
       });
       return result;
     } catch (e) {
       if (e.message === 'username_reserved') {
         Alert.alert(
           'Username reserved',
           'This username is currently reserved. Please contact support@' +
             'comm.app if you would like to claim this account.',
           [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
           { cancelable: false },
         );
       } else if (e.message === 'username_taken') {
         Alert.alert(
           'Username taken',
           'An account with that username already exists',
           [{ text: 'OK', onPress: this.onUsernameAlertAcknowledged }],
           { cancelable: false },
         );
       } else if (e.message === 'client_version_unsupported') {
         Alert.alert(
           AppOutOfDateAlertDetails.title,
           AppOutOfDateAlertDetails.message,
           [{ text: 'OK', onPress: this.onAppOutOfDateAlertAcknowledged }],
           { cancelable: false },
         );
       } else {
         Alert.alert(
           'Unknown error',
           'Uhh... try again?',
           [{ text: 'OK', onPress: this.onUnknownErrorAlertAcknowledged }],
           { cancelable: false },
         );
       }
       throw e;
     }
   }
 
   onUnknownErrorAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
     this.props.registerState.setState(
       {
         usernameInputText: '',
         passwordInputText: '',
         confirmPasswordInputText: '',
       },
       () => {
         invariant(this.usernameInput, 'ref should exist');
         this.usernameInput.focus();
       },
     );
   };
 
   onAppOutOfDateAlertAcknowledged = () => {
     this.props.setActiveAlert(false);
   };
 }
 
 const styles = StyleSheet.create({
   container: {
     zIndex: 2,
   },
   footer: {
     alignItems: 'stretch',
     flexDirection: 'row',
     flexShrink: 1,
     justifyContent: 'space-between',
     paddingLeft: 24,
   },
   hyperlinkText: {
     color: '#036AFF',
     fontWeight: 'bold',
   },
   icon: {
     bottom: 10,
     left: 4,
     position: 'absolute',
   },
   input: {
     paddingLeft: 35,
   },
   notice: {
     alignSelf: 'center',
     display: 'flex',
     flexShrink: 1,
     maxWidth: 190,
     paddingBottom: 18,
     paddingRight: 8,
     paddingTop: 12,
   },
   noticeText: {
     color: '#444',
     fontSize: 13,
     lineHeight: 20,
     textAlign: 'center',
   },
   row: {
     marginHorizontal: 24,
   },
 });
 
 const registerLoadingStatusSelector =
   createLoadingStatusSelector(registerActionTypes);
 const olmSessionInitializationDataLoadingStatusSelector =
   createLoadingStatusSelector(getOlmSessionInitializationDataActionTypes);
 
 const ConnectedRegisterPanel: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedRegisterPanel(props: BaseProps) {
     const registerLoadingStatus = useSelector(registerLoadingStatusSelector);
     const olmSessionInitializationDataLoadingStatus = useSelector(
       olmSessionInitializationDataLoadingStatusSelector,
     );
     const loadingStatus = combineLoadingStatuses(
       registerLoadingStatus,
       olmSessionInitializationDataLoadingStatus,
     );
 
     const navContext = React.useContext(NavContext);
     const logInExtraInfo = useSelector(state =>
       nativeLogInExtraInfoSelector({
         redux: state,
         navContext,
       }),
     );
 
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const callRegister = useServerCall(register);
     const getInitialNotificationsEncryptedMessage =
       useInitialNotificationsEncryptedMessage(
         nativeNotificationsSessionCreator,
       );
 
     return (
       <RegisterPanel
         {...props}
         loadingStatus={loadingStatus}
         logInExtraInfo={logInExtraInfo}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         register={callRegister}
         getInitialNotificationsEncryptedMessage={
           getInitialNotificationsEncryptedMessage
         }
       />
     );
   });
 
 export default ConnectedRegisterPanel;
diff --git a/native/account/registration/registration-terms.react.js b/native/account/registration/registration-terms.react.js
index 0828d7641..45e1d0270 100644
--- a/native/account/registration/registration-terms.react.js
+++ b/native/account/registration/registration-terms.react.js
@@ -1,131 +1,129 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View, Image, Linking } from 'react-native';
 
 import RegistrationButtonContainer from './registration-button-container.react.js';
 import RegistrationButton from './registration-button.react.js';
 import RegistrationContainer from './registration-container.react.js';
 import RegistrationContentContainer from './registration-content-container.react.js';
 import { RegistrationContext } from './registration-context.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import type {
   CoolOrNerdMode,
   AccountSelection,
   AvatarData,
 } from './registration-types.js';
 import commSwooshSource from '../../img/comm-swoosh.png';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useStyles } from '../../themes/colors.js';
 
 export type RegistrationTermsParams = {
   +userSelections: {
     +coolOrNerdMode: CoolOrNerdMode,
     +keyserverURL: string,
     +accountSelection: AccountSelection,
     +avatarData: ?AvatarData,
   },
 };
 
 const onTermsOfUsePressed = () => {
   void Linking.openURL('https://comm.app/terms');
 };
 
 const onPrivacyPolicyPressed = () => {
   void Linking.openURL('https://comm.app/privacy');
 };
 
 type Props = {
   +navigation: RegistrationNavigationProp<'RegistrationTerms'>,
   +route: NavigationRoute<'RegistrationTerms'>,
 };
 function RegistrationTerms(props: Props): React.Node {
   const registrationContext = React.useContext(RegistrationContext);
   invariant(registrationContext, 'registrationContext should be set');
   const { register } = registrationContext;
 
   const [registrationInProgress, setRegistrationInProgress] =
     React.useState(false);
 
   const { userSelections } = props.route.params;
   const onProceed = React.useCallback(async () => {
     setRegistrationInProgress(true);
     try {
       await register(userSelections);
     } finally {
       setRegistrationInProgress(false);
     }
   }, [register, userSelections]);
 
   const styles = useStyles(unboundStyles);
 
-  /* eslint-disable react-native/no-raw-text */
   const termsNotice = (
     <Text style={styles.body}>
       By registering, you are agreeing to our{' '}
       <Text style={styles.hyperlinkText} onPress={onTermsOfUsePressed}>
         Terms of Use
       </Text>
       {' and '}
       <Text style={styles.hyperlinkText} onPress={onPrivacyPolicyPressed}>
         Privacy Policy
       </Text>
       .
     </Text>
   );
-  /* eslint-enable react-native/no-raw-text */
 
   return (
     <RegistrationContainer>
       <RegistrationContentContainer style={styles.scrollViewContentContainer}>
         <Text style={styles.header}>Finish registration</Text>
         {termsNotice}
         <View style={styles.commSwooshContainer}>
           <Image source={commSwooshSource} style={styles.commSwoosh} />
         </View>
       </RegistrationContentContainer>
       <RegistrationButtonContainer>
         <RegistrationButton
           onPress={onProceed}
           label="Register"
           variant={registrationInProgress ? 'loading' : 'enabled'}
         />
       </RegistrationButtonContainer>
     </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
   scrollViewContentContainer: {
     flexGrow: 1,
   },
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
     paddingBottom: 16,
   },
   body: {
     fontFamily: 'Arial',
     fontSize: 15,
     lineHeight: 20,
     color: 'panelForegroundSecondaryLabel',
     paddingBottom: 16,
   },
   commSwooshContainer: {
     flexGrow: 1,
     flexShrink: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
   commSwoosh: {
     resizeMode: 'center',
     width: '100%',
     height: '100%',
   },
   hyperlinkText: {
     color: 'purpleLink',
   },
 };
 
 export default RegistrationTerms;
diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
index 79d0c7bcf..e026b4256 100644
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -1,1478 +1,1476 @@
 // @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 { colorIsDark } from 'lib/shared/color-utils.js';
 import { useEditMessage } from 'lib/shared/edit-messages-utils.js';
 import {
   useMentionTypeaheadUserSuggestions,
   useMentionTypeaheadChatSuggestions,
   getTypeaheadRegexMatches,
   type Selection,
   useUserMentionsCandidates,
   type MentionTypeaheadSuggestionItem,
   type TypeaheadMatchedStrings,
 } 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 { SetState } from 'lib/types/hook-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 { Dispatch } from 'lib/types/redux-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type {
   ClientThreadJoinRequest,
   ThreadJoinPayload,
   ChatMentionCandidates,
   RelativeMemberInfo,
   ThreadInfo,
 } 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,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +draft: string,
   +joinThreadLoadingStatus: LoadingStatus,
   +threadCreationInProgress: boolean,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: string,
   +userInfos: UserInfos,
   +colors: Colors,
   +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,
   +userMentionsCandidates: $ReadOnlyArray<RelativeMemberInfo>,
   +chatMentionSearchIndex: SentencePrefixSearchIndex,
   +chatMentionCandidates: ChatMentionCandidates,
   +parentThreadInfo: ?ThreadInfo,
   +editedMessagePreview: ?MessagePreviewResult,
   +editedMessageInfo: ?MessageInfo,
   +editMessage: (
     messageID: string,
     text: string,
   ) => Promise<SendEditMessageResponse>,
   +navigation: ?ChatNavigationProp<'MessageList'>,
   +overlayContext: ?OverlayContextType,
   +messageEditingContext: ?MessageEditingContextType,
   +selectionState: SyncedSelectionData,
   +setSelectionState: SetState<SyncedSelectionData>,
   +suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem>,
   +typeaheadMatchedStrings: ?TypeaheadMatchedStrings,
 };
 type State = {
   +text: string,
   +textEdited: boolean,
   +buttonsExpanded: boolean,
   +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,
       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>
       );
     }
 
     let typeaheadTooltip = null;
 
     if (
       this.props.suggestions.length > 0 &&
       this.props.typeaheadMatchedStrings &&
       !isEditMode
     ) {
       typeaheadTooltip = (
         <TypeaheadTooltip
           text={this.state.text}
           matchedStrings={this.props.typeaheadMatchedStrings}
           suggestions={this.props.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.props.selectionState.selection}
             onUpdateSyncedSelectionData={this.props.setSelectionState}
             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);
   };
 
   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,
     });
     this.props.setSelectionState({ 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) {
       await 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',
     );
 
     await 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 = () => {
     void 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 { getChatMentionSearchIndex } = useChatMentionContext();
   const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
 
   const { parentThreadID } = props.threadInfo;
   const parentThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
 
   const userMentionsCandidates = useUserMentionsCandidates(
     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();
 
   const [selectionState, setSelectionState] =
     React.useState<SyncedSelectionData>({
       text: draft,
       selection: { start: 0, end: 0 },
     });
 
   const typeaheadRegexMatches = React.useMemo(
     () =>
       getTypeaheadRegexMatches(
         selectionState.text,
         selectionState.selection,
         nativeMentionTypeaheadRegex,
       ),
     [selectionState.text, selectionState.selection],
   );
 
   const typeaheadMatchedStrings: ?TypeaheadMatchedStrings =
     React.useMemo(() => {
       if (typeaheadRegexMatches === null) {
         return null;
       }
       return {
         textBeforeAtSymbol: typeaheadRegexMatches[1] ?? '',
         query: typeaheadRegexMatches[4] ?? '',
       };
     }, [typeaheadRegexMatches]);
 
   const suggestedUsers = useMentionTypeaheadUserSuggestions(
     userMentionsCandidates,
     typeaheadMatchedStrings,
   );
 
   const suggestedChats = useMentionTypeaheadChatSuggestions(
     chatMentionSearchIndex,
     chatMentionCandidates,
     typeaheadMatchedStrings,
   );
 
   const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
     React.useMemo(
       () => [...suggestedUsers, ...suggestedChats],
       [suggestedUsers, suggestedChats],
     );
 
   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}
       userMentionsCandidates={userMentionsCandidates}
       chatMentionSearchIndex={chatMentionSearchIndex}
       chatMentionCandidates={chatMentionCandidates}
       parentThreadInfo={parentThreadInfo}
       editedMessagePreview={editedMessagePreview}
       editedMessageInfo={editedMessageInfo}
       editMessage={editMessage}
       navigation={props.navigation}
       overlayContext={overlayContext}
       messageEditingContext={messageEditingContext}
       selectionState={selectionState}
       setSelectionState={setSelectionState}
       suggestions={suggestions}
       typeaheadMatchedStrings={typeaheadMatchedStrings}
     />
   );
 }
 
 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/chat-thread-list-search.react.js b/native/chat/chat-thread-list-search.react.js
index 122011b29..9f7194c14 100644
--- a/native/chat/chat-thread-list-search.react.js
+++ b/native/chat/chat-thread-list-search.react.js
@@ -1,179 +1,175 @@
 // @flow
 
 import * as React from 'react';
 import { TextInput as BaseTextInput } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import type { ReactRefSetter } from 'lib/types/react-types.js';
 
 import type { SearchStatus } from './chat-thread-list.react.js';
 import Button from '../components/button.react.js';
 import Search from '../components/search.react.js';
 import { useStyles } from '../themes/colors.js';
 import { AnimatedView, type AnimatedStyleObj } from '../types/styles.js';
 import { animateTowards } from '../utils/animation-utils.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const { Node, Value, interpolateNode, useValue } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 type Props = {
   +searchText: string,
   +onChangeText: (updatedSearchText: string) => mixed,
   +onBlur: () => mixed,
   +additionalProps?: Partial<React.ElementConfig<typeof Search>>,
   +onSearchCancel: () => mixed,
   +searchStatus: SearchStatus,
   +innerSearchAutoFocus?: boolean,
   +innerSearchActive?: boolean,
 };
 function ForwardedChatThreadListSearch(
   props: Props,
   ref: ReactRefSetter<React.ElementRef<typeof BaseTextInput>>,
 ): React.Node {
   const {
     searchText,
     onChangeText,
     onBlur,
     onSearchCancel,
     searchStatus,
     innerSearchActive,
     innerSearchAutoFocus,
   } = props;
   const styles = useStyles(unboundStyles);
 
   const searchCancelButtonOpen: Value = useValue(0);
   const searchCancelButtonProgress: Node = React.useMemo(
     () => animateTowards(searchCancelButtonOpen, 100),
     [searchCancelButtonOpen],
   );
   const searchCancelButtonOffset: Node = React.useMemo(
     () =>
       interpolateNode(searchCancelButtonProgress, {
         inputRange: [0, 1],
         outputRange: [0, 56],
       }),
     [searchCancelButtonProgress],
   );
 
   const isActiveOrActivating =
     searchStatus === 'active' || searchStatus === 'activating';
   React.useEffect(() => {
     if (isActiveOrActivating) {
       searchCancelButtonOpen.setValue(1);
     } else {
       searchCancelButtonOpen.setValue(0);
     }
   }, [isActiveOrActivating, searchCancelButtonOpen]);
 
   const animatedSearchBoxStyle: AnimatedStyleObj = React.useMemo(
     () => ({
       marginRight: searchCancelButtonOffset,
     }),
     [searchCancelButtonOffset],
   );
 
   const searchBoxStyle = React.useMemo(
     () => [styles.searchBox, animatedSearchBoxStyle],
     [animatedSearchBoxStyle, styles.searchBox],
   );
 
   const buttonStyle = React.useMemo(
     () => [
       styles.cancelSearchButtonText,
       { opacity: searchCancelButtonProgress },
     ],
     [searchCancelButtonProgress, styles.cancelSearchButtonText],
   );
 
   const innerSearchNode = React.useMemo(
     () => (
       <Search
         searchText={searchText}
         onChangeText={onChangeText}
         containerStyle={styles.search}
         onBlur={onBlur}
         placeholder="Search chats"
         ref={ref}
         autoFocus={innerSearchAutoFocus}
         active={innerSearchActive}
       />
     ),
     [
       innerSearchActive,
       innerSearchAutoFocus,
       onBlur,
       onChangeText,
       ref,
       searchText,
       styles.search,
     ],
   );
 
   const searchContainer = React.useMemo(
     () => <AnimatedView style={searchBoxStyle}>{innerSearchNode}</AnimatedView>,
     [innerSearchNode, searchBoxStyle],
   );
 
   const cancelButton = React.useMemo(
     () => (
       <Button
         onPress={onSearchCancel}
         disabled={searchStatus !== 'active'}
         style={styles.cancelSearchButton}
       >
-        {/* eslint-disable react-native/no-raw-text */}
         <Animated.Text style={buttonStyle}>Cancel</Animated.Text>
-        {/* eslint-enable react-native/no-raw-text */}
       </Button>
     ),
     [buttonStyle, onSearchCancel, searchStatus, styles.cancelSearchButton],
   );
 
   const chatThreadListSearch = React.useMemo(
     () => (
       <>
         {cancelButton}
         {searchContainer}
       </>
     ),
     [cancelButton, searchContainer],
   );
 
   return chatThreadListSearch;
 }
 
 const unboundStyles = {
   searchBox: {
     flex: 1,
   },
   search: {
     marginBottom: 8,
     marginHorizontal: 18,
     marginTop: 16,
   },
   cancelSearchButton: {
     position: 'absolute',
     right: 0,
     top: 0,
     bottom: 0,
     display: 'flex',
     justifyContent: 'center',
   },
   cancelSearchButtonText: {
     color: 'link',
     fontSize: 16,
     paddingHorizontal: 16,
     paddingTop: 8,
   },
 };
 
 const ChatThreadListSearch: React.AbstractComponent<
   Props,
   React.ElementRef<typeof BaseTextInput>,
 > = React.forwardRef<Props, React.ElementRef<typeof BaseTextInput>>(
   ForwardedChatThreadListSearch,
 );
 ChatThreadListSearch.displayName = 'ChatThreadListSearch';
 
 export default ChatThreadListSearch;
diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js
index d1ada6775..3e601a615 100644
--- a/native/chat/chat.react.js
+++ b/native/chat/chat.react.js
@@ -1,482 +1,473 @@
 // @flow
 
 import type {
   MaterialTopTabNavigationProp,
   StackNavigationState,
   StackOptions,
   StackNavigationEventMap,
   StackNavigatorProps,
   ExtraStackNavigatorProps,
   StackHeaderProps,
   StackNavigationProp,
   StackNavigationHelpers,
   ParamListBase,
   StackRouterOptions,
   MaterialTopTabNavigationHelpers,
   HeaderTitleInputProps,
   StackHeaderLeftButtonProps,
 } from '@react-navigation/core';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import {
   createNavigatorFactory,
   useNavigationBuilder,
 } from '@react-navigation/native';
 import { StackView } from '@react-navigation/stack';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform, View, useWindowDimensions } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import ThreadDraftUpdater from 'lib/components/thread-draft-updater.react.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 
 import BackgroundChatThreadList from './background-chat-thread-list.react.js';
 import ChatHeader from './chat-header.react.js';
 import ChatRouter, {
   type ChatRouterNavigationHelpers,
   type ChatRouterNavigationAction,
 } from './chat-router.js';
 import ComposeSubchannel from './compose-subchannel.react.js';
 import ComposeThreadButton from './compose-thread-button.react.js';
 import FullScreenThreadMediaGallery from './fullscreen-thread-media-gallery.react.js';
 import HomeChatThreadList from './home-chat-thread-list.react.js';
 import { MessageEditingContext } from './message-editing-context.react.js';
 import MessageListContainer from './message-list-container.react.js';
 import MessageListHeaderTitle from './message-list-header-title.react.js';
 import MessageResultsScreen from './message-results-screen.react.js';
 import MessageStorePruner from './message-store-pruner.react.js';
 import DeleteThread from './settings/delete-thread.react.js';
 import EmojiThreadAvatarCreation from './settings/emoji-thread-avatar-creation.react.js';
 import ThreadSettings from './settings/thread-settings.react.js';
 import ThreadScreenPruner from './thread-screen-pruner.react.js';
 import ThreadSettingsButton from './thread-settings-button.react.js';
 import ThreadSettingsHeaderTitle from './thread-settings-header-title.react.js';
 import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import CommunityDrawerButton from '../navigation/community-drawer-button.react.js';
 import HeaderBackButton from '../navigation/header-back-button.react.js';
 import { defaultStackScreenOptions } from '../navigation/options.js';
 import {
   ComposeSubchannelRouteName,
   DeleteThreadRouteName,
   ThreadSettingsRouteName,
   EmojiThreadAvatarCreationRouteName,
   FullScreenThreadMediaGalleryRouteName,
   MessageResultsScreenRouteName,
   MessageListRouteName,
   ChatThreadListRouteName,
   HomeChatThreadListRouteName,
   BackgroundChatThreadListRouteName,
   type ScreenParamList,
   type ChatParamList,
   type ChatTopTabsParamList,
   MessageSearchRouteName,
   ChangeRolesScreenRouteName,
   type NavigationRoute,
 } from '../navigation/route-names.js';
 import type { TabNavigationProp } from '../navigation/tab-navigator.react.js';
 import ChangeRolesHeaderLeftButton from '../roles/change-roles-header-left-button.react.js';
 import ChangeRolesScreen from '../roles/change-roles-screen.react.js';
 import MessageSearch from '../search/message-search.react.js';
 import SearchHeader from '../search/search-header.react.js';
 import SearchMessagesButton from '../search/search-messages-button.react.js';
 import { useColors, useStyles } from '../themes/colors.js';
 
 const unboundStyles = {
   keyboardAvoidingView: {
     flex: 1,
   },
   view: {
     flex: 1,
     backgroundColor: 'listBackground',
   },
   threadListHeaderStyle: {
     elevation: 0,
     shadowOffset: { width: 0, height: 0 },
     borderBottomWidth: 0,
     backgroundColor: 'tabBarBackground',
   },
 };
 
 export type ChatTopTabsNavigationProp<
   RouteName: $Keys<ChatTopTabsParamList> = $Keys<ChatTopTabsParamList>,
 > = MaterialTopTabNavigationProp<ScreenParamList, RouteName>;
 
 export type ChatTopTabsNavigationHelpers =
   MaterialTopTabNavigationHelpers<ScreenParamList>;
 
 const homeChatThreadListOptions = {
   title: 'Focused',
-  // eslint-disable-next-line react/display-name
   tabBarIcon: ({ color }: { +color: string, ... }) => (
     <SWMansionIcon name="home-1" size={22} style={{ color }} />
   ),
 };
 const backgroundChatThreadListOptions = {
   title: 'Background',
-  // eslint-disable-next-line react/display-name
   tabBarIcon: ({ color }: { +color: string, ... }) => (
     <SWMansionIcon name="bell-disabled" size={22} style={{ color }} />
   ),
 };
 
 const ChatThreadsTopTab = createMaterialTopTabNavigator<
   ScreenParamList,
   ChatTopTabsParamList,
   ChatTopTabsNavigationHelpers,
 >();
 function ChatThreadsComponent(): React.Node {
   const colors = useColors();
   const { tabBarBackground, tabBarAccent } = colors;
   const screenOptions = React.useMemo(
     () => ({
       tabBarShowIcon: true,
       tabBarStyle: {
         backgroundColor: tabBarBackground,
       },
       tabBarItemStyle: {
         flexDirection: 'row',
       },
       tabBarIndicatorStyle: {
         borderColor: tabBarAccent,
         borderBottomWidth: 2,
       },
     }),
     [tabBarAccent, tabBarBackground],
   );
   return (
     <ChatThreadsTopTab.Navigator screenOptions={screenOptions}>
       <ChatThreadsTopTab.Screen
         name={HomeChatThreadListRouteName}
         component={HomeChatThreadList}
         options={homeChatThreadListOptions}
       />
       <ChatThreadsTopTab.Screen
         name={BackgroundChatThreadListRouteName}
         component={BackgroundChatThreadList}
         options={backgroundChatThreadListOptions}
       />
     </ChatThreadsTopTab.Navigator>
   );
 }
 
 export type ChatNavigationHelpers<ParamList: ParamListBase = ParamListBase> = {
   ...$Exact<StackNavigationHelpers<ParamList>>,
   ...ChatRouterNavigationHelpers,
 };
 
 type ChatNavigatorProps = StackNavigatorProps<ChatNavigationHelpers<>>;
 function ChatNavigator({
   initialRouteName,
   children,
   screenOptions,
   defaultScreenOptions,
   screenListeners,
   id,
   ...rest
 }: ChatNavigatorProps) {
   const { state, descriptors, navigation } = useNavigationBuilder<
     StackNavigationState,
     ChatRouterNavigationAction,
     StackOptions,
     StackRouterOptions,
     ChatNavigationHelpers<>,
     StackNavigationEventMap,
     ExtraStackNavigatorProps,
   >(ChatRouter, {
     id,
     initialRouteName,
     children,
     screenOptions,
     defaultScreenOptions,
     screenListeners,
   });
 
   // Clear ComposeSubchannel screens after each message is sent. If a user goes
   // to ComposeSubchannel to create a new thread, but finds an existing one and
   // uses it instead, we can assume the intent behind opening ComposeSubchannel
   // is resolved
   const inputState = React.useContext(InputStateContext);
   invariant(inputState, 'InputState should be set in ChatNavigator');
   const clearComposeScreensAfterMessageSend = React.useCallback(() => {
     navigation.clearScreens([ComposeSubchannelRouteName]);
   }, [navigation]);
   React.useEffect(() => {
     inputState.registerSendCallback(clearComposeScreensAfterMessageSend);
     return () => {
       inputState.unregisterSendCallback(clearComposeScreensAfterMessageSend);
     };
   }, [inputState, clearComposeScreensAfterMessageSend]);
 
   return (
     <StackView
       {...rest}
       state={state}
       descriptors={descriptors}
       navigation={navigation}
       detachInactiveScreens={Platform.OS !== 'ios'}
     />
   );
 }
 const createChatNavigator = createNavigatorFactory<
   StackNavigationState,
   StackOptions,
   StackNavigationEventMap,
   ChatNavigationHelpers<>,
   ExtraStackNavigatorProps,
 >(ChatNavigator);
 
 const header = (props: StackHeaderProps) => {
   // Flow has trouble reconciling identical types between different libdefs,
   // and flow-typed has no way for one libdef to depend on another
   const castProps: StackHeaderProps = (props: any);
   return <ChatHeader {...castProps} />;
 };
 
 const headerRightStyle = { flexDirection: 'row' };
 
 const messageListOptions = ({
   navigation,
   route,
 }: {
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 }) => {
   const isSearchEmpty =
     !!route.params.searching && route.params.threadInfo.members.length === 1;
 
   const areSettingsEnabled =
     !threadIsPending(route.params.threadInfo.id) && !isSearchEmpty;
 
   return {
-    // This is a render prop, not a component
-    // eslint-disable-next-line react/display-name
     headerTitle: (props: HeaderTitleInputProps) => (
       <MessageListHeaderTitle
         threadInfo={route.params.threadInfo}
         navigate={navigation.navigate}
         areSettingsEnabled={areSettingsEnabled}
         isSearchEmpty={isSearchEmpty}
         {...props}
       />
     ),
     headerRight: areSettingsEnabled
-      ? // This is a render prop, not a component
-        // eslint-disable-next-line react/display-name
-        () => (
+      ? () => (
           <View style={headerRightStyle}>
             <SearchMessagesButton
               threadInfo={route.params.threadInfo}
               navigate={navigation.navigate}
             />
             <ThreadSettingsButton
               threadInfo={route.params.threadInfo}
               navigate={navigation.navigate}
             />
           </View>
         )
       : undefined,
     headerBackTitleVisible: false,
     headerTitleAlign: isSearchEmpty ? 'center' : 'left',
     headerLeftContainerStyle: { width: Platform.OS === 'ios' ? 32 : 40 },
     headerTitleStyle: areSettingsEnabled ? { marginRight: 20 } : undefined,
   };
 };
 const composeThreadOptions = {
   headerTitle: 'Compose chat',
   headerBackTitleVisible: false,
 };
 const threadSettingsOptions = ({
   route,
 }: {
   +route: NavigationRoute<'ThreadSettings'>,
   ...
 }) => ({
-  // eslint-disable-next-line react/display-name
   headerTitle: (props: HeaderTitleInputProps) => (
     <ThreadSettingsHeaderTitle
       threadInfo={route.params.threadInfo}
       {...props}
     />
   ),
   headerBackTitleVisible: false,
 });
 const emojiAvatarCreationOptions = {
   headerTitle: 'Emoji avatar selection',
   headerBackTitleVisible: false,
 };
 const fullScreenThreadMediaGalleryOptions = {
   headerTitle: 'All Media',
   headerBackTitleVisible: false,
 };
 const deleteThreadOptions = {
   headerTitle: 'Delete chat',
   headerBackTitleVisible: false,
 };
 const messageSearchOptions = {
-  // eslint-disable-next-line react/display-name
   headerTitle: () => <SearchHeader />,
   headerBackTitleVisible: false,
   headerTitleContainerStyle: {
     width: '100%',
   },
 };
 const messageResultsScreenOptions = {
   headerTitle: 'Pinned Messages',
   headerBackTitleVisible: false,
 };
 const changeRolesScreenOptions = ({
   route,
 }: {
   +route: NavigationRoute<'ChangeRolesScreen'>,
   ...
 }) => ({
-  // eslint-disable-next-line react/display-name
   headerLeft: (headerLeftProps: StackHeaderLeftButtonProps) => (
     <ChangeRolesHeaderLeftButton {...headerLeftProps} route={route} />
   ),
   headerTitle: 'Change Role',
   presentation: 'modal',
 });
 
 export type ChatNavigationProp<
   RouteName: $Keys<ChatParamList> = $Keys<ChatParamList>,
 > = {
   ...StackNavigationProp<ScreenParamList, RouteName>,
   ...ChatRouterNavigationHelpers,
 };
 
 const Chat = createChatNavigator<
   ScreenParamList,
   ChatParamList,
   ChatNavigationHelpers<ScreenParamList>,
 >();
 
 type Props = {
   +navigation: TabNavigationProp<'Chat'>,
   ...
 };
 export default function ChatComponent(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const colors = useColors();
   const loggedIn = useSelector(isLoggedIn);
   let draftUpdater = null;
   if (loggedIn) {
     draftUpdater = <ThreadDraftUpdater />;
   }
 
   const headerLeftButton = React.useCallback(
     (headerProps: StackHeaderLeftButtonProps) => {
       if (headerProps.canGoBack) {
         return <HeaderBackButton {...headerProps} />;
       }
       return <CommunityDrawerButton navigation={props.navigation} />;
     },
     [props.navigation],
   );
 
   const messageEditingContext = React.useContext(MessageEditingContext);
   const editState = messageEditingContext?.editState;
   const editMode = !!editState?.editedMessage;
 
   const { width: screenWidth } = useWindowDimensions();
   const screenOptions = React.useMemo(
     () => ({
       ...defaultStackScreenOptions,
       header,
       headerLeft: headerLeftButton,
       headerStyle: {
         backgroundColor: colors.tabBarBackground,
         borderBottomWidth: 1,
       },
       gestureEnabled: true,
       gestureResponseDistance: editMode ? 0 : screenWidth,
     }),
     [colors.tabBarBackground, headerLeftButton, screenWidth, editMode],
   );
 
   const chatThreadListOptions = React.useCallback(
     ({
       navigation,
     }: {
       +navigation: ChatNavigationProp<'ChatThreadList'>,
       ...
     }) => ({
       headerTitle: 'Inbox',
       headerRight:
         Platform.OS === 'ios'
           ? () => <ComposeThreadButton navigate={navigation.navigate} />
           : undefined,
       headerBackTitleVisible: false,
       headerStyle: styles.threadListHeaderStyle,
     }),
     [styles.threadListHeaderStyle],
   );
 
   return (
     <View style={styles.view}>
       <KeyboardAvoidingView
         behavior="padding"
         style={styles.keyboardAvoidingView}
       >
         <Chat.Navigator screenOptions={screenOptions}>
           <Chat.Screen
             name={ChatThreadListRouteName}
             component={ChatThreadsComponent}
             options={chatThreadListOptions}
           />
           <Chat.Screen
             name={MessageListRouteName}
             component={MessageListContainer}
             options={messageListOptions}
           />
           <Chat.Screen
             name={ComposeSubchannelRouteName}
             component={ComposeSubchannel}
             options={composeThreadOptions}
           />
           <Chat.Screen
             name={ThreadSettingsRouteName}
             component={ThreadSettings}
             options={threadSettingsOptions}
           />
           <Chat.Screen
             name={EmojiThreadAvatarCreationRouteName}
             component={EmojiThreadAvatarCreation}
             options={emojiAvatarCreationOptions}
           />
           <Chat.Screen
             name={FullScreenThreadMediaGalleryRouteName}
             component={FullScreenThreadMediaGallery}
             options={fullScreenThreadMediaGalleryOptions}
           />
           <Chat.Screen
             name={DeleteThreadRouteName}
             component={DeleteThread}
             options={deleteThreadOptions}
           />
           <Chat.Screen
             name={MessageResultsScreenRouteName}
             component={MessageResultsScreen}
             options={messageResultsScreenOptions}
           />
           <Chat.Screen
             name={MessageSearchRouteName}
             component={MessageSearch}
             options={messageSearchOptions}
           />
           <Chat.Screen
             name={ChangeRolesScreenRouteName}
             component={ChangeRolesScreen}
             options={changeRolesScreenOptions}
           />
         </Chat.Navigator>
         <MessageStorePruner />
         <ThreadScreenPruner />
         {draftUpdater}
       </KeyboardAvoidingView>
     </View>
   );
 }
diff --git a/native/chat/compose-subchannel.react.js b/native/chat/compose-subchannel.react.js
index cb844244f..139c7e2f4 100644
--- a/native/chat/compose-subchannel.react.js
+++ b/native/chat/compose-subchannel.react.js
@@ -1,369 +1,368 @@
 // @flow
 
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter.js';
 import _flow from 'lodash/fp/flow.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import * as React from 'react';
 import { View, Text } from 'react-native';
 
 import {
   newThreadActionTypes,
   useNewThread,
 } from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userInfoSelectorForPotentialMembers } from 'lib/selectors/user-selectors.js';
 import { usePotentialMemberItems } from 'lib/shared/search-utils.js';
 import { threadInFilterList, userIsMember } from 'lib/shared/thread-utils.js';
 import { type ThreadType, threadTypes } from 'lib/types/thread-types-enum.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { type AccountUserInfo } from 'lib/types/user-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import type { ChatNavigationProp } from './chat.react.js';
 import { useNavigateToThread } from './message-list-types.js';
 import ParentThreadHeader from './parent-thread-header.react.js';
 import LinkButton from '../components/link-button.react.js';
 import {
   createTagInput,
   type BaseTagInput,
 } from '../components/tag-input.react.js';
 import ThreadList from '../components/thread-list.react.js';
 import UserList from '../components/user-list.react.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
 
 const TagInput = createTagInput<AccountUserInfo>();
 
 const tagInputProps = {
   placeholder: 'username',
   autoFocus: true,
   returnKeyType: 'go',
 };
 
 const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;
 
 export type ComposeSubchannelParams = {
   +threadType: ThreadType,
   +parentThreadInfo: ThreadInfo,
 };
 
 type Props = {
   +navigation: ChatNavigationProp<'ComposeSubchannel'>,
   +route: NavigationRoute<'ComposeSubchannel'>,
 };
 function ComposeSubchannel(props: Props): React.Node {
   const [usernameInputText, setUsernameInputText] = React.useState<string>('');
   const [userInfoInputArray, setUserInfoInputArray] = React.useState<
     $ReadOnlyArray<AccountUserInfo>,
   >([]);
   const [createButtonEnabled, setCreateButtonEnabled] =
     React.useState<boolean>(true);
 
   const tagInputRef = React.useRef<?BaseTagInput<AccountUserInfo>>();
   const onUnknownErrorAlertAcknowledged = React.useCallback(() => {
     setUsernameInputText('');
     tagInputRef.current?.focus();
   }, []);
 
   const waitingOnThreadIDRef = React.useRef<?string>();
 
   const { threadType, parentThreadInfo } = props.route.params;
   const userInfoInputIDs = userInfoInputArray.map(userInfo => userInfo.id);
   const callNewThread = useNewThread();
   const calendarQuery = useCalendarQuery();
   const newChatThreadAction = React.useCallback(async () => {
     try {
       const assumedThreadType =
         threadType ?? threadTypes.COMMUNITY_SECRET_SUBTHREAD;
       const query = calendarQuery();
       invariant(
         assumedThreadType === 3 ||
           assumedThreadType === 4 ||
           assumedThreadType === 6 ||
           assumedThreadType === 7,
         "Sidebars and communities can't be created from the thread composer",
       );
       const result = await callNewThread({
         type: assumedThreadType,
         parentThreadID: parentThreadInfo.id,
         initialMemberIDs: userInfoInputIDs,
         color: parentThreadInfo.color,
         calendarQuery: query,
       });
       waitingOnThreadIDRef.current = result.newThreadID;
       return result;
     } catch (e) {
       setCreateButtonEnabled(true);
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: onUnknownErrorAlertAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }, [
     threadType,
     userInfoInputIDs,
     calendarQuery,
     parentThreadInfo,
     callNewThread,
     onUnknownErrorAlertAcknowledged,
   ]);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const dispatchNewChatThreadAction = React.useCallback(() => {
     setCreateButtonEnabled(false);
     void dispatchActionPromise(newThreadActionTypes, newChatThreadAction());
   }, [dispatchActionPromise, newChatThreadAction]);
 
   const userInfoInputArrayEmpty = userInfoInputArray.length === 0;
   const onPressCreateThread = React.useCallback(() => {
     if (!createButtonEnabled) {
       return;
     }
     if (userInfoInputArrayEmpty) {
       Alert.alert(
         'Chatting to yourself?',
         'Are you sure you want to create a channel containing only yourself?',
         [
           { text: 'Cancel', style: 'cancel' },
           { text: 'Confirm', onPress: dispatchNewChatThreadAction },
         ],
         { cancelable: true },
       );
     } else {
       dispatchNewChatThreadAction();
     }
   }, [
     createButtonEnabled,
     userInfoInputArrayEmpty,
     dispatchNewChatThreadAction,
   ]);
 
   const { navigation } = props;
   const { setOptions } = navigation;
   React.useEffect(() => {
     setOptions({
-      // eslint-disable-next-line react/display-name
       headerRight: () => (
         <LinkButton
           text="Create"
           onPress={onPressCreateThread}
           disabled={!createButtonEnabled}
         />
       ),
     });
   }, [setOptions, onPressCreateThread, createButtonEnabled]);
 
   const { setParams } = navigation;
   const parentThreadInfoID = parentThreadInfo.id;
   const reduxParentThreadInfo = useSelector(
     state => threadInfoSelector(state)[parentThreadInfoID],
   );
   React.useEffect(() => {
     if (reduxParentThreadInfo) {
       setParams({ parentThreadInfo: reduxParentThreadInfo });
     }
   }, [reduxParentThreadInfo, setParams]);
 
   const threadInfos = useSelector(threadInfoSelector);
   const newlyCreatedThreadInfo = waitingOnThreadIDRef.current
     ? threadInfos[waitingOnThreadIDRef.current]
     : null;
   const { pushNewThread } = navigation;
   React.useEffect(() => {
     if (!newlyCreatedThreadInfo) {
       return;
     }
 
     const waitingOnThreadID = waitingOnThreadIDRef.current;
     if (waitingOnThreadID === null || waitingOnThreadID === undefined) {
       return;
     }
     waitingOnThreadIDRef.current = undefined;
 
     pushNewThread(newlyCreatedThreadInfo);
   }, [newlyCreatedThreadInfo, pushNewThread]);
 
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
   const { community } = parentThreadInfo;
   const communityThreadInfo = useSelector(state =>
     community ? threadInfoSelector(state)[community] : null,
   );
   const userSearchResults = usePotentialMemberItems({
     text: usernameInputText,
     userInfos: otherUserInfos,
     excludeUserIDs: userInfoInputIDs,
     inputParentThreadInfo: parentThreadInfo,
     inputCommunityThreadInfo: communityThreadInfo,
     threadType,
   });
 
   const existingThreads: $ReadOnlyArray<ThreadInfo> = React.useMemo(() => {
     if (userInfoInputIDs.length === 0) {
       return [];
     }
     return _flow(
       _filter(
         (threadInfo: ThreadInfo) =>
           threadInFilterList(threadInfo) &&
           threadInfo.parentThreadID === parentThreadInfo.id &&
           userInfoInputIDs.every(userID => userIsMember(threadInfo, userID)),
       ),
       _sortBy(
         ([
           'members.length',
           (threadInfo: ThreadInfo) => (threadInfo.name ? 1 : 0),
         ]: $ReadOnlyArray<string | ((threadInfo: ThreadInfo) => mixed)>),
       ),
     )(threadInfos);
   }, [userInfoInputIDs, threadInfos, parentThreadInfo]);
 
   const navigateToThread = useNavigateToThread();
   const onSelectExistingThread = React.useCallback(
     (threadID: string) => {
       const threadInfo = threadInfos[threadID];
       navigateToThread({ threadInfo });
     },
     [threadInfos, navigateToThread],
   );
 
   const onUserSelect = React.useCallback(
     ({ id }: AccountUserInfo) => {
       if (userInfoInputIDs.some(existingUserID => id === existingUserID)) {
         return;
       }
       setUserInfoInputArray(oldUserInfoInputArray => [
         ...oldUserInfoInputArray,
         otherUserInfos[id],
       ]);
       setUsernameInputText('');
     },
     [userInfoInputIDs, otherUserInfos],
   );
 
   const styles = useStyles(unboundStyles);
 
   let existingThreadsSection = null;
   if (existingThreads.length > 0) {
     existingThreadsSection = (
       <View style={styles.existingThreads}>
         <View style={styles.existingThreadsRow}>
           <Text style={styles.existingThreadsLabel}>Existing channels</Text>
         </View>
         <View style={styles.existingThreadList}>
           <ThreadList
             threadInfos={existingThreads}
             onSelect={onSelectExistingThread}
             itemTextStyle={styles.listItem}
           />
         </View>
       </View>
     );
   }
 
   const inputProps = React.useMemo(
     () => ({
       ...tagInputProps,
       onSubmitEditing: onPressCreateThread,
     }),
     [onPressCreateThread],
   );
   const userSearchResultWithENSNames = useENSNames(userSearchResults);
   const userInfoInputArrayWithENSNames = useENSNames(userInfoInputArray);
   return (
     <View style={styles.container}>
       <ParentThreadHeader
         parentThreadInfo={parentThreadInfo}
         childThreadType={threadType}
       />
       <View style={styles.userSelectionRow}>
         <Text style={styles.tagInputLabel}>To: </Text>
         <View style={styles.tagInputContainer}>
           <TagInput
             value={userInfoInputArrayWithENSNames}
             onChange={setUserInfoInputArray}
             text={usernameInputText}
             onChangeText={setUsernameInputText}
             labelExtractor={tagDataLabelExtractor}
             inputProps={inputProps}
             ref={tagInputRef}
           />
         </View>
       </View>
       <View style={styles.userList}>
         <UserList
           userInfos={userSearchResultWithENSNames}
           onSelect={onUserSelect}
           itemTextStyle={styles.listItem}
         />
       </View>
       {existingThreadsSection}
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     flex: 1,
   },
   existingThreadList: {
     backgroundColor: 'modalBackground',
     flex: 1,
     paddingRight: 12,
   },
   existingThreads: {
     flex: 1,
   },
   existingThreadsLabel: {
     color: 'modalForegroundSecondaryLabel',
     fontSize: 16,
     paddingLeft: 12,
     textAlign: 'center',
   },
   existingThreadsRow: {
     backgroundColor: 'modalForeground',
     borderBottomWidth: 1,
     borderColor: 'modalForegroundBorder',
     borderTopWidth: 1,
     paddingVertical: 6,
   },
   listItem: {
     color: 'modalForegroundLabel',
   },
   tagInputContainer: {
     flex: 1,
     marginLeft: 8,
     paddingRight: 12,
   },
   tagInputLabel: {
     color: 'modalForegroundSecondaryLabel',
     fontSize: 16,
     paddingLeft: 12,
   },
   userList: {
     backgroundColor: 'modalBackground',
     flex: 1,
     paddingLeft: 35,
     paddingRight: 12,
   },
   userSelectionRow: {
     alignItems: 'center',
     backgroundColor: 'modalForeground',
     borderBottomWidth: 1,
     borderColor: 'modalForegroundBorder',
     flexDirection: 'row',
     paddingVertical: 6,
   },
 };
 
 const MemoizedComposeSubchannel: React.ComponentType<Props> =
   React.memo<Props>(ComposeSubchannel);
 
 export default MemoizedComposeSubchannel;
diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js
index ceedaf00c..1ba890212 100644
--- a/native/chat/inner-robotext-message.react.js
+++ b/native/chat/inner-robotext-message.react.js
@@ -1,179 +1,175 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, TouchableWithoutFeedback, View } from 'react-native';
 
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import {
   entityTextToReact,
   entityTextToRawString,
   useENSNamesForEntityText,
   type EntityText,
 } from 'lib/utils/entity-text.js';
 
 import { DummyInlineEngagementNode } from './inline-engagement.react.js';
 import { useNavigateToThread } from './message-list-types.js';
 import Markdown from '../markdown/markdown.react.js';
 import { inlineMarkdownRules } from '../markdown/rules.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useOverlayStyles } from '../themes/colors.js';
 import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types.js';
 import { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
 
 function dummyNodeForRobotextMessageHeightMeasurement(
   robotext: EntityText,
   threadID: string,
   sidebarInfo: ?ThreadInfo,
   reactions: ReactionInfo,
 ): React.Element<typeof View> {
   return (
     <View>
       <View style={unboundStyles.robotextContainer}>
         <Text style={unboundStyles.dummyRobotext}>
           {entityTextToRawString(robotext, { threadID })}
         </Text>
       </View>
       <DummyInlineEngagementNode
         sidebarInfo={sidebarInfo}
         reactions={reactions}
       />
     </View>
   );
 }
 
 type InnerRobotextMessageProps = {
   +item: ChatRobotextMessageInfoItemWithHeight,
   +onPress: () => void,
   +onLongPress?: () => void,
 };
 function InnerRobotextMessage(props: InnerRobotextMessageProps): React.Node {
   const { item, onLongPress, onPress } = props;
   const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
   const styles = useOverlayStyles(unboundStyles);
 
   const { messageInfo, robotext } = item;
   const { threadID } = messageInfo;
   const robotextWithENSNames = useENSNamesForEntityText(robotext);
   invariant(
     robotextWithENSNames,
     'useENSNamesForEntityText only returns falsey when passed falsey',
   );
   const textParts = React.useMemo(() => {
     const darkColor = activeTheme === 'dark';
     return entityTextToReact(robotextWithENSNames, threadID, {
-      // eslint-disable-next-line react/display-name
       renderText: ({ text }) => (
         <Markdown
           style={styles.robotext}
           rules={inlineMarkdownRules(darkColor)}
         >
           {text}
         </Markdown>
       ),
-      // eslint-disable-next-line react/display-name
       renderThread: ({ id, name }) => <ThreadEntity id={id} name={name} />,
-      // eslint-disable-next-line react/display-name
       renderUser: ({ userID, usernameText }) => (
         <UserEntity userID={userID} usernameText={usernameText} />
       ),
-      // eslint-disable-next-line react/display-name
       renderColor: ({ hex }) => <ColorEntity color={hex} />,
     });
   }, [robotextWithENSNames, activeTheme, threadID, styles.robotext]);
 
   return (
     <TouchableWithoutFeedback onPress={onPress} onLongPress={onLongPress}>
       <View style={styles.robotextContainer}>
         <Text style={styles.robotext}>{textParts}</Text>
       </View>
     </TouchableWithoutFeedback>
   );
 }
 
 type ThreadEntityProps = {
   +id: string,
   +name: string,
 };
 function ThreadEntity(props: ThreadEntityProps) {
   const threadID = props.id;
   const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
 
   const styles = useOverlayStyles(unboundStyles);
 
   const navigateToThread = useNavigateToThread();
   const onPressThread = React.useCallback(() => {
     invariant(threadInfo, 'onPressThread should have threadInfo');
     navigateToThread({ threadInfo });
   }, [threadInfo, navigateToThread]);
 
   if (!threadInfo) {
     return <Text>{props.name}</Text>;
   }
   return (
     <Text style={styles.link} onPress={onPressThread}>
       {props.name}
     </Text>
   );
 }
 
 type UserEntityProps = {
   +userID: string,
   +usernameText: string,
 };
 function UserEntity(props: UserEntityProps) {
   const { userID, usernameText } = props;
 
   const styles = useOverlayStyles(unboundStyles);
 
   const navigateToUserProfileBottomSheet =
     useNavigateToUserProfileBottomSheet();
 
   const onPressUser = React.useCallback(
     () => navigateToUserProfileBottomSheet(userID),
     [navigateToUserProfileBottomSheet, userID],
   );
 
   return (
     <Text style={styles.link} onPress={onPressUser}>
       {usernameText}
     </Text>
   );
 }
 
 function ColorEntity(props: { +color: string }) {
   const colorStyle = { color: props.color };
   return <Text style={colorStyle}>{props.color}</Text>;
 }
 
 const unboundStyles = {
   link: {
     color: 'link',
   },
   robotextContainer: {
     paddingTop: 6,
     paddingBottom: 11,
     paddingHorizontal: 24,
   },
   robotext: {
     color: 'listForegroundSecondaryLabel',
     fontFamily: 'Arial',
     fontSize: 15,
     textAlign: 'center',
   },
   dummyRobotext: {
     fontFamily: 'Arial',
     fontSize: 15,
     textAlign: 'center',
   },
 };
 
 const MemoizedInnerRobotextMessage: React.ComponentType<InnerRobotextMessageProps> =
   React.memo<InnerRobotextMessageProps>(InnerRobotextMessage);
 
 export {
   dummyNodeForRobotextMessageHeightMeasurement,
   MemoizedInnerRobotextMessage as InnerRobotextMessage,
 };
diff --git a/native/chat/inner-text-message.react.js b/native/chat/inner-text-message.react.js
index 702184626..8f87c755a 100644
--- a/native/chat/inner-text-message.react.js
+++ b/native/chat/inner-text-message.react.js
@@ -1,224 +1,222 @@
 // @flow
 
 import * as React from 'react';
 import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import { useComposedMessageMaxWidth } from './composed-message-width.js';
 import { DummyInlineEngagementNode } from './inline-engagement.react.js';
 import { useTextMessageMarkdownRules } from './message-list-types.js';
 import {
   allCorners,
   filterCorners,
   getRoundedContainerStyle,
 } from './rounded-corners.js';
 import {
   TextMessageMarkdownContext,
   useTextMessageMarkdown,
 } from './text-message-markdown-context.js';
 import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js';
 import Markdown from '../markdown/markdown.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useColors, colors } from '../themes/colors.js';
 import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const { Node } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 function dummyNodeForTextMessageHeightMeasurement(
   text: string,
   editedLabel?: ?string,
   sidebarInfo: ?ThreadInfo,
   reactions: ReactionInfo,
 ): React.Element<typeof View> {
   return (
     <View>
       <DummyTextNode>{text}</DummyTextNode>
       <DummyInlineEngagementNode
         editedLabel={editedLabel}
         sidebarInfo={sidebarInfo}
         reactions={reactions}
       />
     </View>
   );
 }
 
 type DummyTextNodeProps = {
   ...React.ElementConfig<typeof View>,
   +children: string,
 };
 function DummyTextNode(props: DummyTextNodeProps): React.Node {
   const { children, style, ...rest } = props;
   const maxWidth = useComposedMessageMaxWidth();
   const viewStyle = [props.style, styles.dummyMessage, { maxWidth }];
   const rules = useTextMessageMarkdownRules(false);
   return (
     <View {...rest} style={viewStyle}>
       <Markdown style={styles.text} rules={rules}>
         {children}
       </Markdown>
     </View>
   );
 }
 
 type Props = {
   +item: ChatTextMessageInfoItemWithHeight,
   +onPress: () => void,
   +messageRef?: (message: ?React.ElementRef<typeof View>) => void,
   +threadColorOverride?: ?Node,
   +isThreadColorDarkOverride?: ?boolean,
 };
 function InnerTextMessage(props: Props): React.Node {
   const { item } = props;
   const { text, creator } = item.messageInfo;
   const { isViewer } = creator;
 
   const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
   const boundColors = useColors();
 
   const darkColor = !isViewer
     ? activeTheme === 'dark'
     : props.isThreadColorDarkOverride ?? colorIsDark(item.threadInfo.color);
 
   const messageStyle = React.useMemo(
     () => ({
       backgroundColor: !isViewer
         ? boundColors.listChatBubble
         : props.threadColorOverride ?? `#${item.threadInfo.color}`,
     }),
     [
       boundColors.listChatBubble,
       isViewer,
       item.threadInfo.color,
       props.threadColorOverride,
     ],
   );
 
   const cornerStyle = React.useMemo(
     () => getRoundedContainerStyle(filterCorners(allCorners, item)),
     [item],
   );
 
   const rules = useTextMessageMarkdownRules(darkColor);
   const textMessageMarkdown = useTextMessageMarkdown(item.messageInfo);
 
   const markdownStyles = React.useMemo(() => {
     const textStyle = {
       color: darkColor
         ? colors.dark.listForegroundLabel
         : colors.light.listForegroundLabel,
     };
 
     return [styles.text, textStyle];
   }, [darkColor]);
 
   // If we need to render a Text with an onPress prop inside, we're going to
   // have an issue: the GestureTouchableOpacity below will trigger too when the
   // the onPress is pressed. We have to use a GestureTouchableOpacity in order
   // for the message touch gesture to play nice with the message swipe gesture,
   // so we need to find a way to disable the GestureTouchableOpacity.
   //
   // Our solution is to keep using the GestureTouchableOpacity for the padding
   // around the text, and to have the Texts inside ALL implement an onPress prop
   // that will default to the message touch gesture. Luckily, Text with onPress
   // plays nice with the message swipe gesture.
   const secondMessageStyle = React.useMemo(
     () => [StyleSheet.absoluteFill, styles.message],
     [],
   );
   const secondMessage = React.useMemo(() => {
     if (!textMessageMarkdown.markdownHasPressable) {
       return undefined;
     }
     return (
       <View style={secondMessageStyle} pointerEvents="box-none">
         <Markdown style={markdownStyles} rules={rules}>
           {text}
         </Markdown>
       </View>
     );
   }, [
     markdownStyles,
     rules,
     secondMessageStyle,
     text,
     textMessageMarkdown.markdownHasPressable,
   ]);
 
   const gestureTouchableOpacityStyle = React.useMemo(
     () => [styles.message, cornerStyle],
     [cornerStyle],
   );
   const message = React.useMemo(
     () => (
       <TextMessageMarkdownContext.Provider value={textMessageMarkdown}>
         <TouchableWithoutFeedback>
           <View>
             <GestureTouchableOpacity
               onPress={props.onPress}
               onLongPress={props.onPress}
               activeOpacity={0.6}
               style={gestureTouchableOpacityStyle}
               animatedStyle={messageStyle}
             >
               <Markdown style={markdownStyles} rules={rules}>
                 {text}
               </Markdown>
             </GestureTouchableOpacity>
             {secondMessage}
           </View>
         </TouchableWithoutFeedback>
       </TextMessageMarkdownContext.Provider>
     ),
     [
       gestureTouchableOpacityStyle,
       markdownStyles,
       messageStyle,
       props.onPress,
       rules,
       secondMessage,
       text,
       textMessageMarkdown,
     ],
   );
 
   // We need to set onLayout in order to allow .measure() to be on the ref
   const onLayout = React.useCallback(() => {}, []);
   const { messageRef } = props;
 
   const innerTextMessage = React.useMemo(() => {
     if (!messageRef) {
       return message;
     }
     return (
       <View onLayout={onLayout} ref={messageRef}>
         {message}
       </View>
     );
   }, [message, messageRef, onLayout]);
 
   return innerTextMessage;
 }
 
 const styles = StyleSheet.create({
   dummyMessage: {
     paddingHorizontal: 12,
     paddingVertical: 6,
   },
   message: {
     overflow: 'hidden',
     paddingHorizontal: 12,
     paddingVertical: 6,
   },
   text: {
     fontFamily: 'Arial',
     fontSize: 18,
   },
 });
 
 export { InnerTextMessage, dummyNodeForTextMessageHeightMeasurement };
diff --git a/native/chat/multimedia-message-multimedia.react.js b/native/chat/multimedia-message-multimedia.react.js
index 4006727dc..ca9736f3c 100644
--- a/native/chat/multimedia-message-multimedia.react.js
+++ b/native/chat/multimedia-message-multimedia.react.js
@@ -1,240 +1,238 @@
 // @flow
 
 import type { LeafRoute } from '@react-navigation/core';
 import { useRoute } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import { type MediaInfo } from 'lib/types/media-types.js';
 
 import InlineMultimedia from './inline-multimedia.react.js';
 import { getMediaKey } from './multimedia-message-utils.js';
 import { type PendingMultimediaUpload } from '../input/input-state.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import { ImageModalRouteName } from '../navigation/route-names.js';
 import { type Colors, useColors } from '../themes/colors.js';
 import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js';
 import type {
   VerticalBounds,
   LayoutCoordinates,
 } from '../types/layout-types.js';
 import {
   type ViewStyle,
   type AnimatedStyleObj,
   AnimatedView,
 } from '../types/styles.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const { Node, sub, interpolateNode, Extrapolate } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 type BaseProps = {
   +mediaInfo: MediaInfo,
   +item: ChatMultimediaMessageInfoItem,
   +verticalBounds: ?VerticalBounds,
   +style: ViewStyle,
   +postInProgress: boolean,
   +pendingUpload: ?PendingMultimediaUpload,
   +onPressMultimedia?: (
     mediaInfo: MediaInfo,
     initialCoordinates: LayoutCoordinates,
   ) => void,
   +clickable: boolean,
   +setClickable: boolean => void,
 };
 type Props = {
   ...BaseProps,
   +route: LeafRoute<>,
   // Redux state
   +colors: Colors,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
 };
 type State = {
   +opacity: number | Node,
 };
 class MultimediaMessageMultimedia extends React.PureComponent<Props, State> {
   view: ?React.ElementRef<typeof View>;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       opacity: this.getOpacity(),
     };
   }
 
   static getOverlayContext(props: Props): OverlayContextType {
     const { overlayContext } = props;
     invariant(
       overlayContext,
       'MultimediaMessageMultimedia should have OverlayContext',
     );
     return overlayContext;
   }
 
   static getModalOverlayPosition(props: Props): ?Animated.Value {
     const overlayContext = MultimediaMessageMultimedia.getOverlayContext(props);
     const { visibleOverlays } = overlayContext;
     for (const overlay of visibleOverlays) {
       if (
         overlay.routeName === ImageModalRouteName &&
         overlay.presentedFrom === props.route.key &&
         overlay.routeKey === getMediaKey(props.item, props.mediaInfo)
       ) {
         return overlay.position;
       }
     }
     return undefined;
   }
 
   getOpacity(): number | Animated.Node {
     const overlayPosition = MultimediaMessageMultimedia.getModalOverlayPosition(
       this.props,
     );
     if (!overlayPosition) {
       return 1;
     }
     return sub(
       1,
       interpolateNode(overlayPosition, {
         inputRange: [0.1, 0.11],
         outputRange: [0, 1],
         extrapolate: Extrapolate.CLAMP,
       }),
     );
   }
 
   componentDidUpdate(prevProps: Props) {
     const overlayPosition = MultimediaMessageMultimedia.getModalOverlayPosition(
       this.props,
     );
     const prevOverlayPosition =
       MultimediaMessageMultimedia.getModalOverlayPosition(prevProps);
     if (overlayPosition !== prevOverlayPosition) {
       this.setState({ opacity: this.getOpacity() });
     }
 
     const scrollIsDisabled =
       MultimediaMessageMultimedia.getOverlayContext(this.props)
         .scrollBlockingModalStatus !== 'closed';
     const scrollWasDisabled =
       MultimediaMessageMultimedia.getOverlayContext(prevProps)
         .scrollBlockingModalStatus !== 'closed';
     if (!scrollIsDisabled && scrollWasDisabled) {
       this.props.setClickable(true);
     }
   }
 
   render(): React.Node {
     const { opacity } = this.state;
     const animatedWrapperStyle: AnimatedStyleObj = { opacity };
     const wrapperStyles = [
       styles.container,
       animatedWrapperStyle,
       this.props.style,
     ];
 
     const { mediaInfo, pendingUpload, postInProgress } = this.props;
     return (
       <AnimatedView style={wrapperStyles}>
         <View style={styles.expand} onLayout={this.onLayout} ref={this.viewRef}>
           <InlineMultimedia
             mediaInfo={mediaInfo}
             onPress={this.onPress}
             postInProgress={postInProgress}
             pendingUpload={pendingUpload}
             spinnerColor={this.props.item.threadInfo.color}
           />
         </View>
       </AnimatedView>
     );
   }
 
   onLayout = () => {};
 
   viewRef = (view: ?React.ElementRef<typeof View>) => {
     this.view = view;
   };
 
   onPress = () => {
     if (!this.props.clickable) {
       return;
     }
 
     if (this.dismissKeyboardIfShowing()) {
       return;
     }
 
     const {
       view,
       props: { verticalBounds },
     } = this;
     if (!view || !verticalBounds) {
       return;
     }
 
     const measureCallback = this.props.onPressMultimedia;
     if (!measureCallback) {
       return;
     }
 
     this.props.setClickable(false);
 
     const overlayContext = MultimediaMessageMultimedia.getOverlayContext(
       this.props,
     );
     overlayContext.setScrollBlockingModalStatus('open');
 
     view.measure((x, y, width, height, pageX, pageY) => {
       const coordinates = { x: pageX, y: pageY, width, height };
       measureCallback(this.props.mediaInfo, coordinates);
     });
   };
 
   dismissKeyboardIfShowing = (): boolean => {
     const { keyboardState } = this.props;
     return !!(keyboardState && keyboardState.dismissKeyboardIfShowing());
   };
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     overflow: 'hidden',
   },
   expand: {
     flex: 1,
   },
 });
 
 const ConnectedMultimediaMessageMultimedia: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedMultimediaMessageMultimedia(
     props: BaseProps,
   ) {
     const colors = useColors();
     const keyboardState = React.useContext(KeyboardContext);
     const overlayContext = React.useContext(OverlayContext);
     const route = useRoute();
     return (
       <MultimediaMessageMultimedia
         {...props}
         colors={colors}
         route={route}
         keyboardState={keyboardState}
         overlayContext={overlayContext}
       />
     );
   });
 
 export default ConnectedMultimediaMessageMultimedia;
diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js
index e0c830109..afc70192c 100644
--- a/native/chat/multimedia-message-tooltip-button.react.js
+++ b/native/chat/multimedia-message-tooltip-button.react.js
@@ -1,187 +1,185 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { useNextLocalID } from 'lib/shared/message-utils.js';
 import {
   useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerMultimediaMessage } from './inner-multimedia-message.react.js';
 import { MessageHeader } from './message-header.react.js';
 import MessageTooltipButtonAvatar from './message-tooltip-button-avatar.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { EmojiSelection } from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const { Node, Extrapolate, interpolateNode } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 function noop() {}
 
 type Props = {
   +navigation: AppNavigationProp<'MultimediaMessageTooltipModal'>,
   +route: TooltipRoute<'MultimediaMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function MultimediaMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = props;
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [sidebarInputBarHeight, setSidebarInputBarHeight] =
     React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = route.params;
 
   const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const innerMultimediaMessage = React.useMemo(
     () => (
       <InnerMultimediaMessage
         item={item}
         verticalBounds={verticalBounds}
         clickable={false}
         setClickable={noop}
         onPress={navigation.goBackOnce}
         onLongPress={navigation.goBackOnce}
       />
     ),
     [item, navigation.goBackOnce, verticalBounds],
   );
 
   const { messageInfo, threadInfo, reactions } = item;
   const localID = useNextLocalID();
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   const sendReaction = useSendReaction(
     messageInfo.id,
     localID,
     threadInfo.id,
     reactions,
   );
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     (emoji: EmojiSelection) => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
   const alreadySelectedEmojis =
     useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <>
       <Animated.View style={messageContainerStyle}>
         <SidebarInputBarHeightMeasurer
           sourceMessage={item}
           onInputBarMeasured={onInputBarMeasured}
         />
         <Animated.View style={headerStyle}>
           <MessageHeader item={item} focused={true} display="modal" />
         </Animated.View>
         <MessageTooltipButtonAvatar item={item} />
         {reactionSelectionPopover}
         {innerMultimediaMessage}
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
         selectMultipleEmojis
       />
     </>
   );
 }
 
 export default MultimediaMessageTooltipButton;
diff --git a/native/chat/reaction-selection-popover.react.js b/native/chat/reaction-selection-popover.react.js
index 3e0e3c365..8c3e5c410 100644
--- a/native/chat/reaction-selection-popover.react.js
+++ b/native/chat/reaction-selection-popover.react.js
@@ -1,224 +1,222 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, TouchableOpacity, Text } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import {
   useReactionSelectionPopoverPosition,
   getCalculatedMargin,
   reactionSelectionPopoverDimensions,
 } from './reaction-message-utils.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import type { TooltipModalParamList } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 import {
   AnimatedView,
   type WritableAnimatedStyleObj,
   type ReanimatedTransform,
 } from '../types/styles.js';
 
 type Props<RouteName: $Keys<TooltipModalParamList>> = {
   +navigation: AppNavigationProp<RouteName>,
   +route: TooltipRoute<RouteName>,
   +openEmojiPicker: () => mixed,
   +sendReaction: (reaction: string) => mixed,
 };
 
-/* eslint-disable import/no-named-as-default-member */
 const { Extrapolate, interpolateNode, add, multiply } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 function ReactionSelectionPopover<RouteName: $Keys<TooltipModalParamList>>(
   props: Props<RouteName>,
 ): React.Node {
   const { navigation, route, openEmojiPicker, sendReaction } = props;
 
   const { verticalBounds, initialCoordinates, margin } = route.params;
   const { containerStyle: popoverContainerStyle, popoverLocation } =
     useReactionSelectionPopoverPosition({
       initialCoordinates,
       verticalBounds,
       margin,
     });
 
   const overlayContext = React.useContext(OverlayContext);
   invariant(
     overlayContext,
     'ReactionSelectionPopover should have OverlayContext',
   );
   const { position } = overlayContext;
 
   const dimensions = useSelector(state => state.dimensions);
 
   const popoverHorizontalOffset = React.useMemo(() => {
     const { x, width } = initialCoordinates;
 
     const extraLeftSpace = x;
     const extraRightSpace = dimensions.width - width - x;
 
     const popoverWidth = reactionSelectionPopoverDimensions.width;
     if (extraLeftSpace < extraRightSpace) {
       const minWidth = width + 2 * extraLeftSpace;
       return (minWidth - popoverWidth) / 2;
     } else {
       const minWidth = width + 2 * extraRightSpace;
       return (popoverWidth - minWidth) / 2;
     }
   }, [initialCoordinates, dimensions]);
 
   const calculatedMargin = getCalculatedMargin(margin);
   const animationStyle = React.useMemo(() => {
     const style: WritableAnimatedStyleObj = {};
     style.opacity = interpolateNode(position, {
       inputRange: [0, 0.1],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     const transform: Array<ReanimatedTransform> = [
       {
         scale: interpolateNode(position, {
           inputRange: [0.2, 0.8],
           outputRange: [0, 1],
           extrapolate: Extrapolate.CLAMP,
         }),
       },
       {
         translateX: multiply(
           add(1, multiply(-1, position)),
           popoverHorizontalOffset,
         ),
       },
     ];
     if (popoverLocation === 'above') {
       transform.push({
         translateY: interpolateNode(position, {
           inputRange: [0, 1],
           outputRange: [
             calculatedMargin + reactionSelectionPopoverDimensions.height / 2,
             0,
           ],
           extrapolate: Extrapolate.CLAMP,
         }),
       });
     } else {
       transform.push({
         translateY: interpolateNode(position, {
           inputRange: [0, 1],
           outputRange: [
             -calculatedMargin - reactionSelectionPopoverDimensions.height / 2,
             0,
           ],
           extrapolate: Extrapolate.CLAMP,
         }),
       });
     }
     style.transform = transform;
     return style;
   }, [position, calculatedMargin, popoverLocation, popoverHorizontalOffset]);
 
   const styles = useStyles(unboundStyles);
 
   const containerStyle = React.useMemo(
     () => ({
       ...styles.reactionSelectionPopoverContainer,
       ...popoverContainerStyle,
       ...animationStyle,
     }),
     [
       popoverContainerStyle,
       styles.reactionSelectionPopoverContainer,
       animationStyle,
     ],
   );
 
   const tooltipRouteKey = route.key;
   const { hideTooltip, dismissTooltip } = useTooltipActions(
     navigation,
     tooltipRouteKey,
   );
 
   const onPressDefaultEmoji = React.useCallback(
     (emoji: string) => {
       sendReaction(emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
   const onPressEmojiKeyboardButton = React.useCallback(() => {
     openEmojiPicker();
     hideTooltip();
   }, [openEmojiPicker, hideTooltip]);
 
   const defaultEmojis = React.useMemo(() => {
     const defaultEmojisData = ['❤️', '😆', '😮', '😠', '👍'];
 
     return defaultEmojisData.map(emoji => (
       <TouchableOpacity key={emoji} onPress={() => onPressDefaultEmoji(emoji)}>
         <View style={styles.reactionSelectionItemContainer}>
           <Text style={styles.reactionSelectionItemEmoji}>{emoji}</Text>
         </View>
       </TouchableOpacity>
     ));
   }, [
     onPressDefaultEmoji,
     styles.reactionSelectionItemContainer,
     styles.reactionSelectionItemEmoji,
   ]);
 
   return (
     <AnimatedView style={containerStyle}>
       {defaultEmojis}
       <TouchableOpacity onPress={onPressEmojiKeyboardButton}>
         <View style={styles.emojiKeyboardButtonContainer}>
           <SWMansionIcon name="plus" style={styles.icon} size={18} />
         </View>
       </TouchableOpacity>
     </AnimatedView>
   );
 }
 
 const unboundStyles = {
   reactionSelectionPopoverContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: 'tooltipBackground',
     padding: 8,
     borderRadius: 8,
     flex: 1,
   },
   reactionSelectionItemContainer: {
     backgroundColor: 'reactionSelectionPopoverItemBackground',
     justifyContent: 'center',
     alignItems: 'center',
     padding: 8,
     borderRadius: 20,
     width: 40,
     height: 40,
     marginRight: 12,
   },
   reactionSelectionItemEmoji: {
     fontSize: 18,
   },
   emojiKeyboardButtonContainer: {
     backgroundColor: 'reactionSelectionPopoverItemBackground',
     justifyContent: 'center',
     alignItems: 'center',
     padding: 8,
     borderRadius: 20,
     width: 40,
     height: 40,
   },
   icon: {
     color: 'modalForegroundLabel',
   },
 };
 
 export default ReactionSelectionPopover;
diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js
index f9044e521..5f5069d36 100644
--- a/native/chat/robotext-message-tooltip-button.react.js
+++ b/native/chat/robotext-message-tooltip-button.react.js
@@ -1,169 +1,167 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { useNextLocalID } from 'lib/shared/message-utils.js';
 import {
   useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerRobotextMessage } from './inner-robotext-message.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { Timestamp } from './timestamp.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { EmojiSelection } from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const { Node, interpolateNode, Extrapolate } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 type Props = {
   +navigation: AppNavigationProp<'RobotextMessageTooltipModal'>,
   +route: TooltipRoute<'RobotextMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function RobotextMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = props;
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [sidebarInputBarHeight, setSidebarInputBarHeight] =
     React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = route.params;
 
   const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning="center"
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const { messageInfo, threadInfo, reactions } = item;
   const localID = useNextLocalID();
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   const sendReaction = useSendReaction(
     messageInfo.id,
     localID,
     threadInfo.id,
     reactions,
   );
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     (emoji: EmojiSelection) => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
   const alreadySelectedEmojis =
     useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <>
       <Animated.View style={messageContainerStyle}>
         <SidebarInputBarHeightMeasurer
           sourceMessage={item}
           onInputBarMeasured={onInputBarMeasured}
         />
         <Animated.View style={headerStyle}>
           <Timestamp time={item.messageInfo.time} display="modal" />
         </Animated.View>
         {reactionSelectionPopover}
         <InnerRobotextMessage item={item} onPress={navigation.goBackOnce} />
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
         selectMultipleEmojis
       />
     </>
   );
 }
 
 export default RobotextMessageTooltipButton;
diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js
index 3ce8ba02a..4cbc9186d 100644
--- a/native/chat/text-message-tooltip-button.react.js
+++ b/native/chat/text-message-tooltip-button.react.js
@@ -1,193 +1,191 @@
 // @flow
 
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { useNextLocalID } from 'lib/shared/message-utils.js';
 import {
   useViewerAlreadySelectedMessageReactions,
   useCanCreateReactionFromMessage,
 } from 'lib/shared/reaction-utils.js';
 
 import { TooltipInlineEngagement } from './inline-engagement.react.js';
 import { InnerTextMessage } from './inner-text-message.react.js';
 import { MessageHeader } from './message-header.react.js';
 import { MessageListContextProvider } from './message-list-types.js';
 import { MessagePressResponderContext } from './message-press-responder-context.js';
 import MessageTooltipButtonAvatar from './message-tooltip-button-avatar.react.js';
 import { useSendReaction } from './reaction-message-utils.js';
 import ReactionSelectionPopover from './reaction-selection-popover.react.js';
 import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js';
 import { useAnimatedMessageTooltipButton } from './utils.js';
 import EmojiKeyboard from '../components/emoji-keyboard.react.js';
 import type { EmojiSelection } from '../components/emoji-keyboard.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
 import type { TooltipRoute } from '../tooltip/tooltip.react.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const { Node, interpolateNode, Extrapolate } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 type Props = {
   +navigation: AppNavigationProp<'TextMessageTooltipModal'>,
   +route: TooltipRoute<'TextMessageTooltipModal'>,
   +progress: Node,
   +isOpeningSidebar: boolean,
 };
 function TextMessageTooltipButton(props: Props): React.Node {
   const { navigation, route, progress, isOpeningSidebar } = props;
 
   const windowWidth = useSelector(state => state.dimensions.width);
 
   const [sidebarInputBarHeight, setSidebarInputBarHeight] =
     React.useState<?number>(null);
   const onInputBarMeasured = React.useCallback((height: number) => {
     setSidebarInputBarHeight(height);
   }, []);
 
   const { item, verticalBounds, initialCoordinates } = route.params;
 
   const {
     style: messageContainerStyle,
     threadColorOverride,
     isThreadColorDarkOverride,
   } = useAnimatedMessageTooltipButton({
     sourceMessage: item,
     initialCoordinates,
     messageListVerticalBounds: verticalBounds,
     progress,
     targetInputBarHeight: sidebarInputBarHeight,
   });
 
   const headerStyle = React.useMemo(() => {
     const bottom = initialCoordinates.height;
     const opacity = interpolateNode(progress, {
       inputRange: [0, 0.05],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     return {
       opacity,
       position: 'absolute',
       left: -initialCoordinates.x,
       width: windowWidth,
       bottom,
     };
   }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]);
 
   const messagePressResponderContext = React.useMemo(
     () => ({
       onPressMessage: navigation.goBackOnce,
     }),
     [navigation.goBackOnce],
   );
 
   const inlineEngagement = React.useMemo(() => {
     if (!item.threadCreatedFromMessage) {
       return null;
     }
     return (
       <TooltipInlineEngagement
         item={item}
         positioning={item.messageInfo.creator.isViewer ? 'right' : 'left'}
         isOpeningSidebar={isOpeningSidebar}
         progress={progress}
         windowWidth={windowWidth}
         initialCoordinates={initialCoordinates}
       />
     );
   }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
 
   const { messageInfo, threadInfo, reactions } = item;
   const localID = useNextLocalID();
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   const sendReaction = useSendReaction(
     messageInfo.id,
     localID,
     threadInfo.id,
     reactions,
   );
 
   const [emojiPickerOpen, setEmojiPickerOpen] = React.useState<boolean>(false);
   const openEmojiPicker = React.useCallback(() => {
     setEmojiPickerOpen(true);
   }, []);
 
   const reactionSelectionPopover = React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     return (
       <ReactionSelectionPopover
         navigation={navigation}
         route={route}
         openEmojiPicker={openEmojiPicker}
         sendReaction={sendReaction}
       />
     );
   }, [
     navigation,
     route,
     openEmojiPicker,
     canCreateReactionFromMessage,
     sendReaction,
   ]);
 
   const tooltipRouteKey = route.key;
   const { dismissTooltip } = useTooltipActions(navigation, tooltipRouteKey);
 
   const onEmojiSelected = React.useCallback(
     (emoji: EmojiSelection) => {
       sendReaction(emoji.emoji);
       dismissTooltip();
     },
     [sendReaction, dismissTooltip],
   );
 
   const alreadySelectedEmojis =
     useViewerAlreadySelectedMessageReactions(reactions);
 
   return (
     <MessageListContextProvider threadInfo={threadInfo}>
       <SidebarInputBarHeightMeasurer
         sourceMessage={item}
         onInputBarMeasured={onInputBarMeasured}
       />
       <Animated.View style={messageContainerStyle}>
         <Animated.View style={headerStyle}>
           <MessageHeader item={item} focused={true} display="modal" />
         </Animated.View>
         <MessageTooltipButtonAvatar item={item} />
         {reactionSelectionPopover}
         <MessagePressResponderContext.Provider
           value={messagePressResponderContext}
         >
           <InnerTextMessage
             item={item}
             onPress={navigation.goBackOnce}
             threadColorOverride={threadColorOverride}
             isThreadColorDarkOverride={isThreadColorDarkOverride}
           />
         </MessagePressResponderContext.Provider>
         {inlineEngagement}
       </Animated.View>
       <EmojiKeyboard
         onEmojiSelected={onEmojiSelected}
         emojiKeyboardOpen={emojiPickerOpen}
         onEmojiKeyboardClose={dismissTooltip}
         alreadySelectedEmojis={alreadySelectedEmojis}
         selectMultipleEmojis
       />
     </MessageListContextProvider>
   );
 }
 
 export default TextMessageTooltipButton;
diff --git a/native/chat/utils.js b/native/chat/utils.js
index b30a74b53..088a32f37 100644
--- a/native/chat/utils.js
+++ b/native/chat/utils.js
@@ -1,445 +1,443 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 
 import { useLoggedInUserInfo } from 'lib/hooks/account-hooks.js';
 import { useThreadChatMentionCandidates } from 'lib/hooks/chat-mention-hooks.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import { messageKey } from 'lib/shared/message-utils.js';
 import { viewerIsMember } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import { clusterEndHeight } from './chat-constants.js';
 import { ChatContext, useHeightMeasurer } from './chat-context.js';
 import { failedSendHeight } from './failed-send.react.js';
 import {
   useNativeMessageListData,
   type NativeChatMessageItem,
 } from './message-data.react.js';
 import { authorNameHeight } from './message-header.react.js';
 import { multimediaMessageItemHeight } from './multimedia-message-utils.js';
 import { getUnresolvedSidebarThreadInfo } from './sidebar-navigation.js';
 import textMessageSendFailed from './text-message-send-failed.js';
 import { timestampHeight } from './timestamp.react.js';
 import { KeyboardContext } from '../keyboard/keyboard-state.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import {
   MultimediaMessageTooltipModalRouteName,
   RobotextMessageTooltipModalRouteName,
   TextMessageTooltipModalRouteName,
 } from '../navigation/route-names.js';
 import type {
   ChatMessageInfoItemWithHeight,
   ChatMessageItemWithHeight,
   ChatTextMessageInfoItemWithHeight,
 } from '../types/chat-types.js';
 import type {
   LayoutCoordinates,
   VerticalBounds,
 } from '../types/layout-types.js';
 import type { AnimatedViewStyle } from '../types/styles.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const {
   Node,
   Extrapolate,
   interpolateNode,
   interpolateColors,
   block,
   call,
   eq,
   cond,
   sub,
 } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 function textMessageItemHeight(
   item: ChatTextMessageInfoItemWithHeight,
 ): number {
   const { messageInfo, contentHeight, startsCluster, endsCluster } = item;
   const { isViewer } = messageInfo.creator;
   let height = 5 + contentHeight; // 5 from marginBottom in ComposedMessage
   if (!isViewer && startsCluster) {
     height += authorNameHeight;
   }
   if (endsCluster) {
     height += clusterEndHeight;
   }
   if (textMessageSendFailed(item)) {
     height += failedSendHeight;
   }
 
   return height;
 }
 
 function messageItemHeight(item: ChatMessageInfoItemWithHeight): number {
   let height = 0;
   if (item.messageShapeType === 'text') {
     height += textMessageItemHeight(item);
   } else if (item.messageShapeType === 'multimedia') {
     height += multimediaMessageItemHeight(item);
   } else {
     height += item.contentHeight;
   }
   if (item.startsConversation) {
     height += timestampHeight;
   }
   return height;
 }
 
 function chatMessageItemHeight(item: ChatMessageItemWithHeight): number {
   if (item.itemType === 'loader') {
     return 56;
   }
   return messageItemHeight(item);
 }
 
 function useMessageTargetParameters(
   sourceMessage: ChatMessageInfoItemWithHeight,
   initialCoordinates: LayoutCoordinates,
   messageListVerticalBounds: VerticalBounds,
   currentInputBarHeight: number,
   targetInputBarHeight: number,
   sidebarThreadInfo: ?ThreadInfo,
 ): {
   +position: number,
   +color: string,
 } {
   const messageListData = useNativeMessageListData({
     searching: false,
     userInfoInputArray: [],
     threadInfo: sidebarThreadInfo,
   });
 
   const [messagesWithHeight, setMessagesWithHeight] =
     React.useState<?$ReadOnlyArray<ChatMessageItemWithHeight>>(null);
   const measureMessages = useHeightMeasurer();
 
   React.useEffect(() => {
     if (messageListData) {
       measureMessages(
         messageListData,
         sidebarThreadInfo,
         setMessagesWithHeight,
       );
     }
   }, [measureMessages, messageListData, sidebarThreadInfo]);
 
   const sourceMessageID = sourceMessage.messageInfo?.id;
   const targetDistanceFromBottom = React.useMemo(() => {
     if (!messagesWithHeight) {
       return 0;
     }
 
     let offset = 0;
     for (const message of messagesWithHeight) {
       offset += chatMessageItemHeight(message);
       if (message.messageInfo && message.messageInfo.id === sourceMessageID) {
         return offset;
       }
     }
 
     return (
       messageListVerticalBounds.height + chatMessageItemHeight(sourceMessage)
     );
   }, [
     messageListVerticalBounds.height,
     messagesWithHeight,
     sourceMessage,
     sourceMessageID,
   ]);
 
   if (!sidebarThreadInfo) {
     return {
       position: 0,
       color: sourceMessage.threadInfo.color,
     };
   }
 
   const authorNameComponentHeight = sourceMessage.messageInfo.creator.isViewer
     ? 0
     : authorNameHeight;
   const currentDistanceFromBottom =
     messageListVerticalBounds.height +
     messageListVerticalBounds.y -
     initialCoordinates.y +
     timestampHeight +
     authorNameComponentHeight +
     currentInputBarHeight;
   return {
     position:
       targetDistanceFromBottom +
       targetInputBarHeight -
       currentDistanceFromBottom,
     color: sidebarThreadInfo.color,
   };
 }
 
 type AnimatedMessageArgs = {
   +sourceMessage: ChatMessageInfoItemWithHeight,
   +initialCoordinates: LayoutCoordinates,
   +messageListVerticalBounds: VerticalBounds,
   +progress: Node,
   +targetInputBarHeight: ?number,
 };
 
 function useAnimatedMessageTooltipButton({
   sourceMessage,
   initialCoordinates,
   messageListVerticalBounds,
   progress,
   targetInputBarHeight,
 }: AnimatedMessageArgs): {
   +style: AnimatedViewStyle,
   +threadColorOverride: ?Node,
   +isThreadColorDarkOverride: ?boolean,
 } {
   const chatContext = React.useContext(ChatContext);
   invariant(chatContext, 'chatContext should be set');
   const {
     currentTransitionSidebarSourceID,
     setCurrentTransitionSidebarSourceID,
     chatInputBarHeights,
     sidebarAnimationType,
     setSidebarAnimationType,
   } = chatContext;
 
   const loggedInUserInfo = useLoggedInUserInfo();
   const chatMentionCandidates = useThreadChatMentionCandidates(
     sourceMessage.threadInfo,
   );
   const sidebarThreadInfo = React.useMemo(
     () =>
       getUnresolvedSidebarThreadInfo({
         sourceMessage,
         loggedInUserInfo,
         chatMentionCandidates,
       }),
     [sourceMessage, loggedInUserInfo, chatMentionCandidates],
   );
 
   const currentInputBarHeight =
     chatInputBarHeights.get(sourceMessage.threadInfo.id) ?? 0;
   const keyboardState = React.useContext(KeyboardContext);
 
   const newSidebarAnimationType =
     !currentInputBarHeight ||
     !targetInputBarHeight ||
     keyboardState?.keyboardShowing ||
     !viewerIsMember(sidebarThreadInfo)
       ? 'fade_source_message'
       : 'move_source_message';
   React.useEffect(() => {
     setSidebarAnimationType(newSidebarAnimationType);
   }, [setSidebarAnimationType, newSidebarAnimationType]);
 
   const { position: targetPosition, color: targetColor } =
     useMessageTargetParameters(
       sourceMessage,
       initialCoordinates,
       messageListVerticalBounds,
       currentInputBarHeight,
       targetInputBarHeight ?? currentInputBarHeight,
       sidebarThreadInfo,
     );
 
   React.useEffect(() => {
     return () => setCurrentTransitionSidebarSourceID(null);
   }, [setCurrentTransitionSidebarSourceID]);
 
   const bottom = React.useMemo(
     () =>
       interpolateNode(progress, {
         inputRange: [0.3, 1],
         outputRange: [targetPosition, 0],
         extrapolate: Extrapolate.CLAMP,
       }),
     [progress, targetPosition],
   );
 
   const [isThreadColorDarkOverride, setThreadColorDarkOverride] =
     React.useState<?boolean>(null);
   const setThreadColorBrightness = React.useCallback(() => {
     const isSourceThreadDark = colorIsDark(sourceMessage.threadInfo.color);
     const isTargetThreadDark = colorIsDark(targetColor);
     if (isSourceThreadDark !== isTargetThreadDark) {
       setThreadColorDarkOverride(isTargetThreadDark);
     }
   }, [sourceMessage.threadInfo.color, targetColor]);
 
   const threadColorOverride = React.useMemo(() => {
     if (
       sourceMessage.messageShapeType !== 'text' ||
       !currentTransitionSidebarSourceID
     ) {
       return null;
     }
     return block([
       cond(eq(progress, 1), call([], setThreadColorBrightness)),
       interpolateColors(progress, {
         inputRange: [0, 1],
         outputColorRange: [
           `#${targetColor}`,
           `#${sourceMessage.threadInfo.color}`,
         ],
       }),
     ]);
   }, [
     currentTransitionSidebarSourceID,
     progress,
     setThreadColorBrightness,
     sourceMessage.messageShapeType,
     sourceMessage.threadInfo.color,
     targetColor,
   ]);
 
   const messageContainerStyle = React.useMemo(() => {
     return {
       bottom: currentTransitionSidebarSourceID ? bottom : 0,
       opacity:
         currentTransitionSidebarSourceID &&
         sidebarAnimationType === 'fade_source_message'
           ? 0
           : 1,
     };
   }, [bottom, currentTransitionSidebarSourceID, sidebarAnimationType]);
 
   return {
     style: messageContainerStyle,
     threadColorOverride,
     isThreadColorDarkOverride,
   };
 }
 
 function getMessageTooltipKey(item: ChatMessageInfoItemWithHeight): string {
   return `tooltip|${messageKey(item.messageInfo)}`;
 }
 
 function isMessageTooltipKey(key: string): boolean {
   return key.startsWith('tooltip|');
 }
 
 function useOverlayPosition(item: ChatMessageInfoItemWithHeight) {
   const overlayContext = React.useContext(OverlayContext);
   invariant(overlayContext, 'should be set');
 
   for (const overlay of overlayContext.visibleOverlays) {
     if (
       (overlay.routeName === MultimediaMessageTooltipModalRouteName ||
         overlay.routeName === TextMessageTooltipModalRouteName ||
         overlay.routeName === RobotextMessageTooltipModalRouteName) &&
       overlay.routeKey === getMessageTooltipKey(item)
     ) {
       return overlay.position;
     }
   }
   return undefined;
 }
 
 function useContentAndHeaderOpacity(
   item: ChatMessageInfoItemWithHeight,
 ): number | Node {
   const overlayPosition = useOverlayPosition(item);
   const chatContext = React.useContext(ChatContext);
   return React.useMemo(
     () =>
       overlayPosition &&
       chatContext?.sidebarAnimationType === 'move_source_message'
         ? sub(
             1,
             interpolateNode(overlayPosition, {
               inputRange: [0.05, 0.06],
               outputRange: [0, 1],
               extrapolate: Extrapolate.CLAMP,
             }),
           )
         : 1,
     [chatContext?.sidebarAnimationType, overlayPosition],
   );
 }
 
 function useDeliveryIconOpacity(
   item: ChatMessageInfoItemWithHeight,
 ): number | Node {
   const overlayPosition = useOverlayPosition(item);
   const chatContext = React.useContext(ChatContext);
   return React.useMemo(() => {
     if (
       !overlayPosition ||
       !chatContext?.currentTransitionSidebarSourceID ||
       chatContext?.sidebarAnimationType === 'fade_source_message'
     ) {
       return 1;
     }
     return interpolateNode(overlayPosition, {
       inputRange: [0.05, 0.06, 1],
       outputRange: [1, 0, 0],
       extrapolate: Extrapolate.CLAMP,
     });
   }, [
     chatContext?.currentTransitionSidebarSourceID,
     chatContext?.sidebarAnimationType,
     overlayPosition,
   ]);
 }
 
 function chatMessageItemKey(
   item: ChatMessageItemWithHeight | NativeChatMessageItem,
 ): string {
   if (item.itemType === 'loader') {
     return 'loader';
   }
   return messageKey(item.messageInfo);
 }
 
 function modifyItemForResultScreen(
   item: ChatMessageInfoItemWithHeight,
 ): ChatMessageInfoItemWithHeight {
   if (item.messageShapeType === 'robotext') {
     return item;
   }
 
   if (item.messageShapeType === 'multimedia') {
     return {
       ...item,
       startsConversation: false,
       startsCluster: true,
       endsCluster: true,
       messageInfo: {
         ...item.messageInfo,
         creator: {
           ...item.messageInfo.creator,
           isViewer: false,
         },
       },
     };
   }
 
   return {
     ...item,
     startsConversation: false,
     startsCluster: true,
     endsCluster: true,
     messageInfo: {
       ...item.messageInfo,
       creator: {
         ...item.messageInfo.creator,
         isViewer: false,
       },
     },
   };
 }
 
 export {
   chatMessageItemKey,
   chatMessageItemHeight,
   useAnimatedMessageTooltipButton,
   messageItemHeight,
   getMessageTooltipKey,
   isMessageTooltipKey,
   useContentAndHeaderOpacity,
   useDeliveryIconOpacity,
   modifyItemForResultScreen,
 };
diff --git a/native/community-creation/community-configuration.react.js b/native/community-creation/community-configuration.react.js
index dcd53e4ad..baa3a45fb 100644
--- a/native/community-creation/community-configuration.react.js
+++ b/native/community-creation/community-configuration.react.js
@@ -1,214 +1,213 @@
 // @flow
 
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import {
   useNewThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { NewThreadResult } from 'lib/types/thread-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
 import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js';
 import RegistrationButtonContainer from '../account/registration/registration-button-container.react.js';
 import RegistrationButton from '../account/registration/registration-button.react.js';
 import RegistrationContainer from '../account/registration/registration-container.react.js';
 import RegistrationContentContainer from '../account/registration/registration-content-container.react.js';
 import {
   ThreadSettingsCategoryFooter,
   ThreadSettingsCategoryHeader,
 } from '../chat/settings/thread-settings-category.react.js';
 import EnumSettingsOption from '../components/enum-settings-option.react.js';
 import TextInput from '../components/text-input.react.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import {
   CommunityCreationMembersRouteName,
   type NavigationRoute,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useColors, useStyles } from '../themes/colors.js';
 
 type Props = {
   +navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>,
   +route: NavigationRoute<'CommunityConfiguration'>,
 };
 
 const createNewCommunityLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
-// eslint-disable-next-line no-unused-vars
 function CommunityConfiguration(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const { navigate } = props.navigation;
 
   const dispatchActionPromise = useDispatchActionPromise();
 
   const callNewThread = useNewThread();
   const calendarQueryFunc = useCalendarQuery();
 
   const createNewCommunityLoadingStatus: LoadingStatus = useSelector(
     createNewCommunityLoadingStatusSelector,
   );
 
   const [pendingCommunityName, setPendingCommunityName] = React.useState('');
   const [announcementSetting, setAnnouncementSetting] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState<?string>();
 
   const onChangePendingCommunityName = React.useCallback((newValue: string) => {
     setErrorMessage();
     setPendingCommunityName(newValue);
   }, []);
 
   const callCreateNewCommunity = React.useCallback(async () => {
     const calendarQuery = calendarQueryFunc();
     try {
       const newThreadResult: NewThreadResult = await callNewThread({
         name: pendingCommunityName,
         type: announcementSetting
           ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT
           : threadTypes.COMMUNITY_ROOT,
         calendarQuery,
       });
       return newThreadResult;
     } catch (e) {
       setErrorMessage('Community creation failed. Please try again.');
       throw e;
     }
   }, [
     announcementSetting,
     calendarQueryFunc,
     callNewThread,
     pendingCommunityName,
   ]);
 
   const createNewCommunity = React.useCallback(async () => {
     setErrorMessage();
     const newThreadResultPromise = callCreateNewCommunity();
     void dispatchActionPromise(newThreadActionTypes, newThreadResultPromise);
     const newThreadResult = await newThreadResultPromise;
 
     navigate<'CommunityCreationMembers'>({
       name: CommunityCreationMembersRouteName,
       params: {
         announcement: announcementSetting,
         threadID: newThreadResult.newThreadID,
       },
     });
   }, [
     announcementSetting,
     callCreateNewCommunity,
     dispatchActionPromise,
     navigate,
   ]);
 
   const onCheckBoxPress = React.useCallback(() => {
     setErrorMessage();
     setAnnouncementSetting(!announcementSetting);
   }, [announcementSetting]);
 
   const enumSettingsOptionDescription =
     'Make it so only admins can post to ' +
     'the root channel of the community.';
 
   return (
     <RegistrationContainer>
       <RegistrationContentContainer style={styles.containerPaddingOverride}>
         <CommunityCreationKeyserverLabel />
         <ThreadSettingsCategoryHeader type="full" title="COMMUNITY INFO" />
         <View style={styles.communityNameRow}>
           <Text style={styles.communityNameLabel}>Name</Text>
           <TextInput
             style={styles.communityNamePendingValue}
             placeholder="Community Name"
             placeholderTextColor={colors.panelSecondaryForegroundBorder}
             value={pendingCommunityName}
             onChangeText={onChangePendingCommunityName}
             editable={true}
           />
         </View>
         <ThreadSettingsCategoryFooter type="full" />
 
         <View style={styles.communityNameNoticeContainer}>
           <Text style={styles.communityNameNoticeText}>
             You may edit your community&rsquo;s image and name later.
           </Text>
         </View>
 
         <ThreadSettingsCategoryHeader type="full" title="OPTIONAL SETTINGS" />
         <EnumSettingsOption
           icon="megaphone"
           name="Announcement root"
           description={enumSettingsOptionDescription}
           enumValue={announcementSetting}
           onEnumValuePress={onCheckBoxPress}
         />
         <ThreadSettingsCategoryFooter type="full" />
         <RegistrationButtonContainer>
           <RegistrationButton
             onPress={createNewCommunity}
             label="Create community"
             variant={
               createNewCommunityLoadingStatus === 'loading'
                 ? 'loading'
                 : 'enabled'
             }
           />
         </RegistrationButtonContainer>
         <View style={styles.errorMessageContainer}>
           <Text style={styles.errorMessageText}>{errorMessage}</Text>
         </View>
       </RegistrationContentContainer>
     </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
   containerPaddingOverride: {
     padding: 0,
   },
   communityNameRow: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 8,
   },
   communityNameLabel: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     width: 96,
   },
   communityNamePendingValue: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     margin: 0,
     paddingLeft: 4,
     paddingRight: 0,
     paddingVertical: 0,
     borderBottomColor: 'transparent',
   },
   communityNameNoticeContainer: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
   },
   communityNameNoticeText: {
     color: 'panelForegroundTertiaryLabel',
   },
   errorMessageContainer: {
     alignItems: 'center',
   },
   errorMessageText: {
     color: 'redText',
   },
 };
 
 export default CommunityConfiguration;
diff --git a/native/community-creation/community-creation-members.react.js b/native/community-creation/community-creation-members.react.js
index 4a773fc6b..51f40e47b 100644
--- a/native/community-creation/community-creation-members.react.js
+++ b/native/community-creation/community-creation-members.react.js
@@ -1,187 +1,186 @@
 // @flow
 
 import * as React from 'react';
 import { ActivityIndicator } from 'react-native';
 
 import {
   useChangeThreadSettings,
   changeThreadSettingsActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userInfoSelectorForPotentialMembers } from 'lib/selectors/user-selectors.js';
 import { usePotentialMemberItems } from 'lib/shared/search-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { AccountUserInfo } from 'lib/types/user-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import CommunityCreationContentContainer from './community-creation-content-container.react.js';
 import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
 import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js';
 import RegistrationContainer from '../account/registration/registration-container.react.js';
 import { useNavigateToThread } from '../chat/message-list-types.js';
 import LinkButton from '../components/link-button.react.js';
 import {
   createTagInput,
   type BaseTagInput,
 } from '../components/tag-input.react.js';
 import UserList from '../components/user-list.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 export type CommunityCreationMembersScreenParams = {
   +announcement: boolean,
   +threadID: string,
 };
 
 const TagInput = createTagInput<AccountUserInfo>();
 const tagInputProps = {
   placeholder: 'username',
   autoFocus: true,
   returnKeyType: 'go',
 };
 const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;
 
 type Props = {
   +navigation: CommunityCreationNavigationProp<'CommunityCreationMembers'>,
   +route: NavigationRoute<'CommunityCreationMembers'>,
 };
 
 const changeThreadSettingsLoadingStatusSelector = createLoadingStatusSelector(
   changeThreadSettingsActionTypes,
 );
 
 function CommunityCreationMembers(props: Props): React.Node {
   const { announcement, threadID } = props.route.params;
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadSettings = useChangeThreadSettings();
   const changeThreadSettingsLoadingStatus: LoadingStatus = useSelector(
     changeThreadSettingsLoadingStatusSelector,
   );
 
   const { navigation } = props;
   const { setOptions } = navigation;
 
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
 
   const [usernameInputText, setUsernameInputText] = React.useState<string>('');
   const [selectedUsers, setSelectedUsers] = React.useState<
     $ReadOnlyArray<AccountUserInfo>,
   >([]);
 
   const selectedUserIDs = React.useMemo(
     () => selectedUsers.map(userInfo => userInfo.id),
     [selectedUsers],
   );
 
   const navigateToThread = useNavigateToThread();
   const threadInfos = useSelector(threadInfoSelector);
   const communityThreadInfo = threadInfos[threadID];
 
   const addSelectedUsersToCommunity = React.useCallback(() => {
     void dispatchActionPromise(
       changeThreadSettingsActionTypes,
       (async () => {
         const result = await callChangeThreadSettings({
           threadID,
           changes: { newMemberIDs: selectedUserIDs },
         });
         navigateToThread({ threadInfo: communityThreadInfo });
         return result;
       })(),
     );
   }, [
     callChangeThreadSettings,
     communityThreadInfo,
     dispatchActionPromise,
     navigateToThread,
     selectedUserIDs,
     threadID,
   ]);
 
   const exitCommunityCreationFlow = React.useCallback(() => {
     navigateToThread({ threadInfo: communityThreadInfo });
   }, [communityThreadInfo, navigateToThread]);
 
   const activityIndicatorStyle = React.useMemo(
     () => ({ paddingRight: 20 }),
     [],
   );
 
   React.useEffect(() => {
     setOptions({
-      // eslint-disable-next-line react/display-name
       headerRight: () => {
         if (changeThreadSettingsLoadingStatus === 'loading') {
           return (
             <ActivityIndicator size="small" style={activityIndicatorStyle} />
           );
         }
         return (
           <LinkButton
             text={selectedUserIDs.length === 0 ? 'Skip' : 'Done'}
             onPress={
               selectedUserIDs.length === 0
                 ? exitCommunityCreationFlow
                 : addSelectedUsersToCommunity
             }
           />
         );
       },
     });
   }, [
     activityIndicatorStyle,
     addSelectedUsersToCommunity,
     changeThreadSettingsLoadingStatus,
     exitCommunityCreationFlow,
     selectedUserIDs.length,
     setOptions,
   ]);
 
   const userSearchResults = usePotentialMemberItems({
     text: usernameInputText,
     userInfos: otherUserInfos,
     excludeUserIDs: selectedUserIDs,
     threadType: announcement
       ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT
       : threadTypes.COMMUNITY_ROOT,
   });
 
   const onSelectUser = React.useCallback(
     ({ id }: AccountUserInfo) => {
       if (selectedUserIDs.some(existingUserID => id === existingUserID)) {
         return;
       }
       setSelectedUsers(oldUserInfoInputArray => [
         ...oldUserInfoInputArray,
         otherUserInfos[id],
       ]);
       setUsernameInputText('');
     },
     [otherUserInfos, selectedUserIDs],
   );
 
   const tagInputRef = React.useRef<?BaseTagInput<AccountUserInfo>>();
 
   return (
     <RegistrationContainer>
       <CommunityCreationContentContainer>
         <CommunityCreationKeyserverLabel />
         <TagInput
           value={selectedUsers}
           onChange={setSelectedUsers}
           text={usernameInputText}
           onChangeText={setUsernameInputText}
           labelExtractor={tagDataLabelExtractor}
           inputProps={tagInputProps}
           ref={tagInputRef}
         />
         <UserList userInfos={userSearchResults} onSelect={onSelectUser} />
       </CommunityCreationContentContainer>
     </RegistrationContainer>
   );
 }
 
 export default CommunityCreationMembers;
diff --git a/native/components/full-screen-view-modal.react.js b/native/components/full-screen-view-modal.react.js
index ca4b58453..05d35793d 100644
--- a/native/components/full-screen-view-modal.react.js
+++ b/native/components/full-screen-view-modal.react.js
@@ -1,1273 +1,1271 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   Platform,
 } from 'react-native';
 import {
   PinchGestureHandler,
   PanGestureHandler,
   TapGestureHandler,
   State as GestureState,
   type PinchGestureEvent,
   type PanGestureEvent,
   type TapGestureEvent,
 } from 'react-native-gesture-handler';
 import Orientation from 'react-native-orientation-locker';
 import Animated from 'react-native-reanimated';
 import type { EventResult } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { type Dimensions } from 'lib/types/media-types.js';
 import type { ReactRef } from 'lib/types/react-types.js';
 
 import SWMansionIcon from './swmansion-icon.react.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.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 {
   type DerivedDimensionsInfo,
   derivedDimensionsInfoSelector,
 } from '../selectors/dimensions-selectors.js';
 import type { NativeMethods } from '../types/react-native.js';
 import type { AnimatedViewStyle, ViewStyle } from '../types/styles.js';
 import type { UserProfileBottomSheetNavigationProp } from '../user-profile/user-profile-bottom-sheet-navigator.react.js';
 import {
   clamp,
   gestureJustStarted,
   gestureJustEnded,
   runTiming,
 } from '../utils/animation-utils.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Node,
   Clock,
   event,
   Extrapolate,
   block,
   set,
   call,
   cond,
   not,
   and,
   or,
   eq,
   neq,
   greaterThan,
   lessThan,
   add,
   sub,
   multiply,
   divide,
   pow,
   max,
   min,
   round,
   abs,
   interpolateNode,
   startClock,
   stopClock,
   clockRunning,
   decay,
 } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 function scaleDelta(value: Node, gestureActive: Node): Node {
   const diffThisFrame = new Value(1);
   const prevValue = new Value(1);
   return cond(
     gestureActive,
     [
       set(diffThisFrame, divide(value, prevValue)),
       set(prevValue, value),
       diffThisFrame,
     ],
     set(prevValue, 1),
   );
 }
 
 function panDelta(value: Node, gestureActive: Node): Node {
   const diffThisFrame = new Value(0);
   const prevValue = new Value(0);
   return cond(
     gestureActive,
     [
       set(diffThisFrame, sub(value, prevValue)),
       set(prevValue, value),
       diffThisFrame,
     ],
     set(prevValue, 0),
   );
 }
 
 function runDecay(
   clock: Clock,
   velocity: Node,
   initialPosition: Node,
   startStopClock: boolean = true,
 ): Node {
   const state = {
     finished: new Value(0),
     velocity: new Value(0),
     position: new Value(0),
     time: new Value(0),
   };
   const config = { deceleration: 0.99 };
   return block([
     cond(not(clockRunning(clock)), [
       set(state.finished, 0),
       set(state.velocity, velocity),
       set(state.position, initialPosition),
       set(state.time, 0),
       startStopClock ? startClock(clock) : undefined,
     ]),
     decay(clock, state, config),
     cond(state.finished, startStopClock ? stopClock(clock) : undefined),
     state.position,
   ]);
 }
 
 type TouchableOpacityInstance = React.AbstractComponent<
   React.ElementConfig<typeof TouchableOpacity>,
   NativeMethods,
 >;
 
 type BaseProps = {
   +navigation:
     | AppNavigationProp<'ImageModal'>
     | UserProfileBottomSheetNavigationProp<'UserProfileAvatarModal'>,
   +route:
     | NavigationRoute<'ImageModal'>
     | NavigationRoute<'UserProfileAvatarModal'>,
   +children: React.Node,
   +contentDimensions: Dimensions,
   +saveContentCallback?: () => Promise<mixed>,
   +copyContentCallback?: () => mixed,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +dimensions: DerivedDimensionsInfo,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
 };
 type State = {
   +closeButtonEnabled: boolean,
   +actionLinksEnabled: boolean,
 };
 class FullScreenViewModal extends React.PureComponent<Props, State> {
   state: State = {
     closeButtonEnabled: true,
     actionLinksEnabled: true,
   };
 
   closeButton: ?React.ElementRef<TouchableOpacityInstance>;
   mediaIconsContainer: ?React.ElementRef<typeof View>;
   closeButtonX: Value = new Value(-1);
   closeButtonY: Value = new Value(-1);
   closeButtonWidth: Value = new Value(0);
   closeButtonHeight: Value = new Value(0);
   closeButtonLastState: Value = new Value(1);
   mediaIconsX: Value = new Value(-1);
   mediaIconsY: Value = new Value(-1);
   mediaIconsWidth: Value = new Value(0);
   mediaIconsHeight: Value = new Value(0);
   actionLinksLastState: Value = new Value(1);
 
   centerX: Value;
   centerY: Value;
   frameWidth: Value;
   frameHeight: Value;
   imageWidth: Value;
   imageHeight: Value;
 
   pinchHandler: ReactRef<PinchGestureHandler> = React.createRef();
   panHandler: ReactRef<PanGestureHandler> = React.createRef();
   singleTapHandler: ReactRef<TapGestureHandler> = React.createRef();
   doubleTapHandler: ReactRef<TapGestureHandler> = React.createRef();
   handlerRefs: $ReadOnlyArray<
     | ReactRef<PinchGestureHandler>
     | ReactRef<PanGestureHandler>
     | ReactRef<TapGestureHandler>,
   > = [
     this.pinchHandler,
     this.panHandler,
     this.singleTapHandler,
     this.doubleTapHandler,
   ];
   beforeDoubleTapRefs: $ReadOnlyArray<
     | ReactRef<PinchGestureHandler>
     | ReactRef<PanGestureHandler>
     | ReactRef<TapGestureHandler>,
   >;
   beforeSingleTapRefs: $ReadOnlyArray<
     | ReactRef<PinchGestureHandler>
     | ReactRef<PanGestureHandler>
     | ReactRef<TapGestureHandler>,
   >;
 
   pinchEvent: EventResult<PinchGestureEvent>;
   panEvent: EventResult<PanGestureEvent>;
   singleTapEvent: EventResult<TapGestureEvent>;
   doubleTapEvent: EventResult<TapGestureEvent>;
 
   scale: Node;
   x: Node;
   y: Node;
   backdropOpacity: Node;
   imageContainerOpacity: Node;
   actionLinksOpacity: Node;
   closeButtonOpacity: Node;
 
   constructor(props: Props) {
     super(props);
     this.updateDimensions();
 
     const { imageWidth, imageHeight } = this;
     const left = sub(this.centerX, divide(imageWidth, 2));
     const top = sub(this.centerY, divide(imageHeight, 2));
 
     const { initialCoordinates } = props.route.params;
     const initialScale = divide(initialCoordinates.width, imageWidth);
     const initialTranslateX = sub(
       initialCoordinates.x + initialCoordinates.width / 2,
       add(left, divide(imageWidth, 2)),
     );
     const initialTranslateY = sub(
       initialCoordinates.y + initialCoordinates.height / 2,
       add(top, divide(imageHeight, 2)),
     );
 
     const { overlayContext } = props;
     invariant(overlayContext, 'FullScreenViewModal should have OverlayContext');
     const navigationProgress = overlayContext.position;
 
     // The inputs we receive from PanGestureHandler
     const panState = new Value(-1);
     const panTranslationX = new Value(0);
     const panTranslationY = new Value(0);
     const panVelocityX = new Value(0);
     const panVelocityY = new Value(0);
     const panAbsoluteX = new Value(0);
     const panAbsoluteY = new Value(0);
     this.panEvent = event<PanGestureEvent>([
       {
         nativeEvent: {
           state: panState,
           translationX: panTranslationX,
           translationY: panTranslationY,
           velocityX: panVelocityX,
           velocityY: panVelocityY,
           absoluteX: panAbsoluteX,
           absoluteY: panAbsoluteY,
         },
       },
     ]);
     const curPanActive = new Value(0);
     const panActive = block([
       cond(
         and(
           gestureJustStarted(panState),
           this.outsideButtons(
             sub(panAbsoluteX, panTranslationX),
             sub(panAbsoluteY, panTranslationY),
           ),
         ),
         set(curPanActive, 1),
       ),
       cond(gestureJustEnded(panState), set(curPanActive, 0)),
       curPanActive,
     ]);
     const lastPanActive = new Value(0);
     const panJustEnded = cond(eq(lastPanActive, panActive), 0, [
       set(lastPanActive, panActive),
       eq(panActive, 0),
     ]);
 
     // The inputs we receive from PinchGestureHandler
     const pinchState = new Value(-1);
     const pinchScale = new Value(1);
     const pinchFocalX = new Value(0);
     const pinchFocalY = new Value(0);
     this.pinchEvent = event<PinchGestureEvent>([
       {
         nativeEvent: {
           state: pinchState,
           scale: pinchScale,
           focalX: pinchFocalX,
           focalY: pinchFocalY,
         },
       },
     ]);
     const pinchActive = eq(pinchState, GestureState.ACTIVE);
 
     // The inputs we receive from single TapGestureHandler
     const singleTapState = new Value(-1);
     const singleTapX = new Value(0);
     const singleTapY = new Value(0);
     this.singleTapEvent = event<TapGestureEvent>([
       {
         nativeEvent: {
           state: singleTapState,
           x: singleTapX,
           y: singleTapY,
         },
       },
     ]);
 
     // The inputs we receive from double TapGestureHandler
     const doubleTapState = new Value(-1);
     const doubleTapX = new Value(0);
     const doubleTapY = new Value(0);
     this.doubleTapEvent = event<TapGestureEvent>([
       {
         nativeEvent: {
           state: doubleTapState,
           x: doubleTapX,
           y: doubleTapY,
         },
       },
     ]);
 
     // The all-important outputs
     const curScale = new Value(1);
     const curX = new Value(0);
     const curY = new Value(0);
     const curBackdropOpacity = new Value(1);
     const curCloseButtonOpacity = new Value(1);
     const curActionLinksOpacity = new Value(1);
 
     // The centered variables help us know if we need to be recentered
     const recenteredScale = max(curScale, 1);
     const horizontalPanSpace = this.horizontalPanSpace(recenteredScale);
     const verticalPanSpace = this.verticalPanSpace(recenteredScale);
 
     const resetXClock = new Clock();
     const resetYClock = new Clock();
     const zoomClock = new Clock();
 
     const dismissingFromPan = new Value(0);
 
     const roundedCurScale = divide(round(multiply(curScale, 1000)), 1000);
     const gestureActive = or(pinchActive, panActive);
     const activeInteraction = or(
       gestureActive,
       clockRunning(zoomClock),
       dismissingFromPan,
     );
 
     const updates = [
       this.pinchUpdate(
         pinchActive,
         pinchScale,
         pinchFocalX,
         pinchFocalY,
         curScale,
         curX,
         curY,
       ),
       this.panUpdate(panActive, panTranslationX, panTranslationY, curX, curY),
       this.singleTapUpdate(
         singleTapState,
         singleTapX,
         singleTapY,
         roundedCurScale,
         curCloseButtonOpacity,
         curActionLinksOpacity,
       ),
       this.doubleTapUpdate(
         doubleTapState,
         doubleTapX,
         doubleTapY,
         roundedCurScale,
         zoomClock,
         gestureActive,
         curScale,
         curX,
         curY,
       ),
       this.backdropOpacityUpdate(
         panJustEnded,
         pinchActive,
         panVelocityX,
         panVelocityY,
         roundedCurScale,
         curX,
         curY,
         curBackdropOpacity,
         dismissingFromPan,
       ),
       this.recenter(
         resetXClock,
         resetYClock,
         activeInteraction,
         recenteredScale,
         horizontalPanSpace,
         verticalPanSpace,
         curScale,
         curX,
         curY,
       ),
       this.flingUpdate(
         resetXClock,
         resetYClock,
         activeInteraction,
         panJustEnded,
         panVelocityX,
         panVelocityY,
         horizontalPanSpace,
         verticalPanSpace,
         curX,
         curY,
       ),
     ];
     const updatedScale = [updates, curScale];
     const updatedCurX = [updates, curX];
     const updatedCurY = [updates, curY];
     const updatedBackdropOpacity = [updates, curBackdropOpacity];
     const updatedCloseButtonOpacity = [updates, curCloseButtonOpacity];
     const updatedActionLinksOpacity = [updates, curActionLinksOpacity];
 
     const reverseNavigationProgress = sub(1, navigationProgress);
     this.scale = add(
       multiply(reverseNavigationProgress, initialScale),
       multiply(navigationProgress, updatedScale),
     );
     this.x = add(
       multiply(reverseNavigationProgress, initialTranslateX),
       multiply(navigationProgress, updatedCurX),
     );
     this.y = add(
       multiply(reverseNavigationProgress, initialTranslateY),
       multiply(navigationProgress, updatedCurY),
     );
     this.backdropOpacity = multiply(navigationProgress, updatedBackdropOpacity);
     this.imageContainerOpacity = interpolateNode(navigationProgress, {
       inputRange: [0, 0.1],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     const buttonOpacity = interpolateNode(updatedBackdropOpacity, {
       inputRange: [0.95, 1],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     this.closeButtonOpacity = multiply(
       navigationProgress,
       buttonOpacity,
       updatedCloseButtonOpacity,
     );
     this.actionLinksOpacity = multiply(
       navigationProgress,
       buttonOpacity,
       updatedActionLinksOpacity,
     );
 
     this.beforeDoubleTapRefs = Platform.select({
       android: [],
       default: [this.pinchHandler, this.panHandler],
     });
     this.beforeSingleTapRefs = [
       ...this.beforeDoubleTapRefs,
       this.doubleTapHandler,
     ];
   }
 
   // How much space do we have to pan the image horizontally?
   horizontalPanSpace(scale: Node): Node {
     const apparentWidth = multiply(this.imageWidth, scale);
     const horizPop = divide(sub(apparentWidth, this.frameWidth), 2);
     return max(horizPop, 0);
   }
 
   // How much space do we have to pan the image vertically?
   verticalPanSpace(scale: Node): Node {
     const apparentHeight = multiply(this.imageHeight, scale);
     const vertPop = divide(sub(apparentHeight, this.frameHeight), 2);
     return max(vertPop, 0);
   }
 
   pinchUpdate(
     // Inputs
     pinchActive: Node,
     pinchScale: Node,
     pinchFocalX: Node,
     pinchFocalY: Node,
     // Outputs
     curScale: Value,
     curX: Value,
     curY: Value,
   ): Node {
     const deltaScale = scaleDelta(pinchScale, pinchActive);
     const deltaPinchX = multiply(
       sub(1, deltaScale),
       sub(pinchFocalX, curX, this.centerX),
     );
     const deltaPinchY = multiply(
       sub(1, deltaScale),
       sub(pinchFocalY, curY, this.centerY),
     );
 
     return cond(
       [deltaScale, pinchActive],
       [
         set(curX, add(curX, deltaPinchX)),
         set(curY, add(curY, deltaPinchY)),
         set(curScale, multiply(curScale, deltaScale)),
       ],
     );
   }
 
   outsideButtons(x: Node, y: Node): Node {
     const {
       closeButtonX,
       closeButtonY,
       closeButtonWidth,
       closeButtonHeight,
       closeButtonLastState,
       mediaIconsX,
       mediaIconsY,
       mediaIconsWidth,
       mediaIconsHeight,
       actionLinksLastState,
     } = this;
     return and(
       or(
         eq(closeButtonLastState, 0),
         lessThan(x, closeButtonX),
         greaterThan(x, add(closeButtonX, closeButtonWidth)),
         lessThan(y, closeButtonY),
         greaterThan(y, add(closeButtonY, closeButtonHeight)),
       ),
       or(
         eq(actionLinksLastState, 0),
         lessThan(x, mediaIconsX),
         greaterThan(x, add(mediaIconsX, mediaIconsWidth)),
         lessThan(y, mediaIconsY),
         greaterThan(y, add(mediaIconsY, mediaIconsHeight)),
       ),
     );
   }
 
   panUpdate(
     // Inputs
     panActive: Node,
     panTranslationX: Node,
     panTranslationY: Node,
     // Outputs
     curX: Value,
     curY: Value,
   ): Node {
     const deltaX = panDelta(panTranslationX, panActive);
     const deltaY = panDelta(panTranslationY, panActive);
     return cond(
       [deltaX, deltaY, panActive],
       [set(curX, add(curX, deltaX)), set(curY, add(curY, deltaY))],
     );
   }
 
   singleTapUpdate(
     // Inputs
     singleTapState: Node,
     singleTapX: Node,
     singleTapY: Node,
     roundedCurScale: Node,
     // Outputs
     curCloseButtonOpacity: Value,
     curActionLinksOpacity: Value,
   ): Node {
     const lastTapX = new Value(0);
     const lastTapY = new Value(0);
     const fingerJustReleased = and(
       gestureJustEnded(singleTapState),
       this.outsideButtons(lastTapX, lastTapY),
     );
 
     const wasZoomed = new Value(0);
     const isZoomed = greaterThan(roundedCurScale, 1);
     const becameUnzoomed = and(wasZoomed, not(isZoomed));
 
     const closeButtonState = cond(
       or(
         fingerJustReleased,
         and(becameUnzoomed, eq(this.closeButtonLastState, 0)),
       ),
       sub(1, this.closeButtonLastState),
       this.closeButtonLastState,
     );
 
     const actionLinksState = cond(
       isZoomed,
       0,
       cond(
         or(fingerJustReleased, becameUnzoomed),
         sub(1, this.actionLinksLastState),
         this.actionLinksLastState,
       ),
     );
 
     const closeButtonAppearClock = new Clock();
     const closeButtonDisappearClock = new Clock();
     const actionLinksAppearClock = new Clock();
     const actionLinksDisappearClock = new Clock();
     return block([
       fingerJustReleased,
       set(
         curCloseButtonOpacity,
         cond(
           eq(closeButtonState, 1),
           [
             stopClock(closeButtonDisappearClock),
             runTiming(closeButtonAppearClock, curCloseButtonOpacity, 1),
           ],
           [
             stopClock(closeButtonAppearClock),
             runTiming(closeButtonDisappearClock, curCloseButtonOpacity, 0),
           ],
         ),
       ),
       set(
         curActionLinksOpacity,
         cond(
           eq(actionLinksState, 1),
           [
             stopClock(actionLinksDisappearClock),
             runTiming(actionLinksAppearClock, curActionLinksOpacity, 1),
           ],
           [
             stopClock(actionLinksAppearClock),
             runTiming(actionLinksDisappearClock, curActionLinksOpacity, 0),
           ],
         ),
       ),
       set(this.actionLinksLastState, actionLinksState),
       set(this.closeButtonLastState, closeButtonState),
       set(wasZoomed, isZoomed),
       set(lastTapX, singleTapX),
       set(lastTapY, singleTapY),
       call([eq(curCloseButtonOpacity, 1)], this.setCloseButtonEnabled),
       call([eq(curActionLinksOpacity, 1)], this.setActionLinksEnabled),
     ]);
   }
 
   doubleTapUpdate(
     // Inputs
     doubleTapState: Node,
     doubleTapX: Node,
     doubleTapY: Node,
     roundedCurScale: Node,
     zoomClock: Clock,
     gestureActive: Node,
     // Outputs
     curScale: Value,
     curX: Value,
     curY: Value,
   ): Node {
     const zoomClockRunning = clockRunning(zoomClock);
     const zoomActive = and(not(gestureActive), zoomClockRunning);
     const targetScale = cond(greaterThan(roundedCurScale, 1), 1, 3);
 
     const tapXDiff = sub(doubleTapX, this.centerX, curX);
     const tapYDiff = sub(doubleTapY, this.centerY, curY);
     const tapXPercent = divide(tapXDiff, this.imageWidth, curScale);
     const tapYPercent = divide(tapYDiff, this.imageHeight, curScale);
 
     const horizPanSpace = this.horizontalPanSpace(targetScale);
     const vertPanSpace = this.verticalPanSpace(targetScale);
     const horizPanPercent = divide(horizPanSpace, this.imageWidth, targetScale);
     const vertPanPercent = divide(vertPanSpace, this.imageHeight, targetScale);
 
     const tapXPercentClamped = clamp(
       tapXPercent,
       multiply(-1, horizPanPercent),
       horizPanPercent,
     );
     const tapYPercentClamped = clamp(
       tapYPercent,
       multiply(-1, vertPanPercent),
       vertPanPercent,
     );
     const targetX = multiply(tapXPercentClamped, this.imageWidth, targetScale);
     const targetY = multiply(tapYPercentClamped, this.imageHeight, targetScale);
 
     const targetRelativeScale = divide(targetScale, curScale);
     const targetRelativeX = multiply(-1, add(targetX, curX));
     const targetRelativeY = multiply(-1, add(targetY, curY));
 
     const zoomScale = runTiming(zoomClock, 1, targetRelativeScale);
     const zoomX = runTiming(zoomClock, 0, targetRelativeX, false);
     const zoomY = runTiming(zoomClock, 0, targetRelativeY, false);
 
     const deltaScale = scaleDelta(zoomScale, zoomActive);
     const deltaX = panDelta(zoomX, zoomActive);
     const deltaY = panDelta(zoomY, zoomActive);
 
     const fingerJustReleased = and(
       gestureJustEnded(doubleTapState),
       this.outsideButtons(doubleTapX, doubleTapY),
     );
 
     return cond(
       [fingerJustReleased, deltaX, deltaY, deltaScale, gestureActive],
       stopClock(zoomClock),
       cond(or(zoomClockRunning, fingerJustReleased), [
         zoomX,
         zoomY,
         zoomScale,
         set(curX, add(curX, deltaX)),
         set(curY, add(curY, deltaY)),
         set(curScale, multiply(curScale, deltaScale)),
       ]),
     );
   }
 
   backdropOpacityUpdate(
     // Inputs
     panJustEnded: Node,
     pinchActive: Node,
     panVelocityX: Node,
     panVelocityY: Node,
     roundedCurScale: Node,
     // Outputs
     curX: Value,
     curY: Value,
     curBackdropOpacity: Value,
     dismissingFromPan: Value,
   ): Node {
     const progressiveOpacity = max(
       min(
         sub(1, abs(divide(curX, this.frameWidth))),
         sub(1, abs(divide(curY, this.frameHeight))),
       ),
       0,
     );
 
     const resetClock = new Clock();
 
     const velocity = pow(add(pow(panVelocityX, 2), pow(panVelocityY, 2)), 0.5);
     const shouldGoBack = and(
       panJustEnded,
       or(greaterThan(velocity, 50), greaterThan(0.7, progressiveOpacity)),
     );
 
     const decayClock = new Clock();
     const decayItems = [
       set(curX, runDecay(decayClock, panVelocityX, curX, false)),
       set(curY, runDecay(decayClock, panVelocityY, curY)),
     ];
 
     return cond(
       [panJustEnded, dismissingFromPan],
       decayItems,
       cond(
         or(pinchActive, greaterThan(roundedCurScale, 1)),
         set(curBackdropOpacity, runTiming(resetClock, curBackdropOpacity, 1)),
         [
           stopClock(resetClock),
           set(curBackdropOpacity, progressiveOpacity),
           set(dismissingFromPan, shouldGoBack),
           cond(shouldGoBack, [decayItems, call([], this.close)]),
         ],
       ),
     );
   }
 
   recenter(
     // Inputs
     resetXClock: Clock,
     resetYClock: Clock,
     activeInteraction: Node,
     recenteredScale: Node,
     horizontalPanSpace: Node,
     verticalPanSpace: Node,
     // Outputs
     curScale: Value,
     curX: Value,
     curY: Value,
   ): Node {
     const resetScaleClock = new Clock();
 
     const recenteredX = clamp(
       curX,
       multiply(-1, horizontalPanSpace),
       horizontalPanSpace,
     );
     const recenteredY = clamp(
       curY,
       multiply(-1, verticalPanSpace),
       verticalPanSpace,
     );
 
     return cond(
       activeInteraction,
       [
         stopClock(resetScaleClock),
         stopClock(resetXClock),
         stopClock(resetYClock),
       ],
       [
         cond(
           or(clockRunning(resetScaleClock), neq(recenteredScale, curScale)),
           set(curScale, runTiming(resetScaleClock, curScale, recenteredScale)),
         ),
         cond(
           or(clockRunning(resetXClock), neq(recenteredX, curX)),
           set(curX, runTiming(resetXClock, curX, recenteredX)),
         ),
         cond(
           or(clockRunning(resetYClock), neq(recenteredY, curY)),
           set(curY, runTiming(resetYClock, curY, recenteredY)),
         ),
       ],
     );
   }
 
   flingUpdate(
     // Inputs
     resetXClock: Clock,
     resetYClock: Clock,
     activeInteraction: Node,
     panJustEnded: Node,
     panVelocityX: Node,
     panVelocityY: Node,
     horizontalPanSpace: Node,
     verticalPanSpace: Node,
     // Outputs
     curX: Value,
     curY: Value,
   ): Node {
     const flingXClock = new Clock();
     const flingYClock = new Clock();
 
     const decayX = runDecay(flingXClock, panVelocityX, curX);
     const recenteredX = clamp(
       decayX,
       multiply(-1, horizontalPanSpace),
       horizontalPanSpace,
     );
     const decayY = runDecay(flingYClock, panVelocityY, curY);
     const recenteredY = clamp(
       decayY,
       multiply(-1, verticalPanSpace),
       verticalPanSpace,
     );
 
     return cond(
       activeInteraction,
       [stopClock(flingXClock), stopClock(flingYClock)],
       [
         cond(
           clockRunning(resetXClock),
           stopClock(flingXClock),
           cond(or(panJustEnded, clockRunning(flingXClock)), [
             set(curX, recenteredX),
             cond(neq(decayX, recenteredX), stopClock(flingXClock)),
           ]),
         ),
         cond(
           clockRunning(resetYClock),
           stopClock(flingYClock),
           cond(or(panJustEnded, clockRunning(flingYClock)), [
             set(curY, recenteredY),
             cond(neq(decayY, recenteredY), stopClock(flingYClock)),
           ]),
         ),
       ],
     );
   }
 
   updateDimensions() {
     const { width: frameWidth, height: frameHeight } = this.frame;
     const { topInset } = this.props.dimensions;
     if (this.frameWidth) {
       this.frameWidth.setValue(frameWidth);
     } else {
       this.frameWidth = new Value(frameWidth);
     }
     if (this.frameHeight) {
       this.frameHeight.setValue(frameHeight);
     } else {
       this.frameHeight = new Value(frameHeight);
     }
 
     const centerX = frameWidth / 2;
     const centerY = frameHeight / 2 + topInset;
     if (this.centerX) {
       this.centerX.setValue(centerX);
     } else {
       this.centerX = new Value(centerX);
     }
     if (this.centerY) {
       this.centerY.setValue(centerY);
     } else {
       this.centerY = new Value(centerY);
     }
 
     const { width, height } = this.props.contentDimensions;
     if (this.imageWidth) {
       this.imageWidth.setValue(width);
     } else {
       this.imageWidth = new Value(width);
     }
     if (this.imageHeight) {
       this.imageHeight.setValue(height);
     } else {
       this.imageHeight = new Value(height);
     }
   }
 
   componentDidMount() {
     if (FullScreenViewModal.isActive(this.props)) {
       Orientation.unlockAllOrientations();
     }
   }
 
   componentWillUnmount() {
     if (FullScreenViewModal.isActive(this.props)) {
       Orientation.lockToPortrait();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.dimensions !== prevProps.dimensions) {
       this.updateDimensions();
     }
 
     const isActive = FullScreenViewModal.isActive(this.props);
     const wasActive = FullScreenViewModal.isActive(prevProps);
     if (isActive && !wasActive) {
       Orientation.unlockAllOrientations();
     } else if (!isActive && wasActive) {
       Orientation.lockToPortrait();
     }
   }
 
   get frame(): Dimensions {
     const { width, safeAreaHeight } = this.props.dimensions;
     return { width, height: safeAreaHeight };
   }
 
   get contentViewContainerStyle(): AnimatedViewStyle {
     const { height, width } = this.props.contentDimensions;
     const { height: frameHeight, width: frameWidth } = this.frame;
     const top = (frameHeight - height) / 2 + this.props.dimensions.topInset;
     const left = (frameWidth - width) / 2;
     const { verticalBounds } = this.props.route.params;
     return {
       height,
       width,
       marginTop: top - verticalBounds.y,
       marginLeft: left,
       opacity: this.imageContainerOpacity,
       transform: [
         { translateX: this.x },
         { translateY: this.y },
         { scale: this.scale },
       ],
     };
   }
 
   static isActive(props: Props): boolean {
     const { overlayContext } = props;
     invariant(overlayContext, 'FullScreenViewModal should have OverlayContext');
     return !overlayContext.isDismissing;
   }
 
   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;
 
     // margin will clip, but padding won't
     const verticalStyle = FullScreenViewModal.isActive(this.props)
       ? { paddingTop: top, paddingBottom: bottom }
       : { marginTop: top, marginBottom: bottom };
     return [styles.contentContainer, verticalStyle];
   }
 
   render(): React.Node {
     const { children, saveContentCallback, copyContentCallback } = this.props;
 
     const statusBar = FullScreenViewModal.isActive(this.props) ? (
       <ConnectedStatusBar hidden />
     ) : null;
     const backdropStyle = { opacity: this.backdropOpacity };
     const closeButtonStyle = {
       opacity: this.closeButtonOpacity,
     };
     const mediaIconsButtonStyle = {
       opacity: this.actionLinksOpacity,
     };
 
     let saveButton;
     if (saveContentCallback) {
       saveButton = (
         <TouchableOpacity
           onPress={saveContentCallback}
           disabled={!this.state.actionLinksEnabled}
           style={styles.mediaIconButtons}
         >
           <SWMansionIcon name="save" style={styles.mediaIcon} />
           <Text style={styles.mediaIconText}>Save</Text>
         </TouchableOpacity>
       );
     }
 
     let copyButton;
     if (Platform.OS === 'ios' && copyContentCallback) {
       copyButton = (
         <TouchableOpacity
           onPress={copyContentCallback}
           disabled={!this.state.actionLinksEnabled}
           style={styles.mediaIconButtons}
         >
           <SWMansionIcon name="copy" style={styles.mediaIcon} />
           <Text style={styles.mediaIconText}>Copy</Text>
         </TouchableOpacity>
       );
     }
 
     let mediaActionButtons;
     if (saveContentCallback || copyContentCallback) {
       mediaActionButtons = (
         <Animated.View
           style={[styles.mediaIconsContainer, mediaIconsButtonStyle]}
         >
           <View
             style={styles.mediaIconsRow}
             onLayout={this.onMediaIconsLayout}
             ref={this.mediaIconsRef}
           >
             {saveButton}
             {copyButton}
           </View>
         </Animated.View>
       );
     }
 
     const view = (
       <Animated.View style={styles.container}>
         {statusBar}
         <Animated.View style={[styles.backdrop, backdropStyle]} />
         <View style={this.contentContainerStyle}>
           <Animated.View style={this.contentViewContainerStyle}>
             {children}
           </Animated.View>
         </View>
         <SafeAreaView style={styles.buttonsOverlay}>
           <View style={styles.fill}>
             <Animated.View
               style={[styles.closeButtonContainer, closeButtonStyle]}
             >
               <TouchableOpacity
                 onPress={this.close}
                 disabled={!this.state.closeButtonEnabled}
                 onLayout={this.onCloseButtonLayout}
                 ref={this.closeButtonRef}
               >
                 <Text style={styles.closeButton}>×</Text>
               </TouchableOpacity>
             </Animated.View>
             {mediaActionButtons}
           </View>
         </SafeAreaView>
       </Animated.View>
     );
     return (
       <PinchGestureHandler
         onGestureEvent={this.pinchEvent}
         onHandlerStateChange={this.pinchEvent}
         simultaneousHandlers={this.handlerRefs}
         ref={this.pinchHandler}
       >
         <Animated.View style={styles.container}>
           <PanGestureHandler
             onGestureEvent={this.panEvent}
             onHandlerStateChange={this.panEvent}
             simultaneousHandlers={this.handlerRefs}
             ref={this.panHandler}
             avgTouches
           >
             <Animated.View style={styles.container}>
               <TapGestureHandler
                 onHandlerStateChange={this.doubleTapEvent}
                 simultaneousHandlers={this.handlerRefs}
                 ref={this.doubleTapHandler}
                 waitFor={this.beforeDoubleTapRefs}
                 numberOfTaps={2}
               >
                 <Animated.View style={styles.container}>
                   <TapGestureHandler
                     onHandlerStateChange={this.singleTapEvent}
                     simultaneousHandlers={this.handlerRefs}
                     ref={this.singleTapHandler}
                     waitFor={this.beforeSingleTapRefs}
                     numberOfTaps={1}
                   >
                     {view}
                   </TapGestureHandler>
                 </Animated.View>
               </TapGestureHandler>
             </Animated.View>
           </PanGestureHandler>
         </Animated.View>
       </PinchGestureHandler>
     );
   }
 
   close = () => {
     this.props.navigation.goBackOnce();
   };
 
   setCloseButtonEnabled = ([enabledNum]: [number]) => {
     const enabled = !!enabledNum;
     if (this.state.closeButtonEnabled !== enabled) {
       this.setState({ closeButtonEnabled: enabled });
     }
   };
 
   setActionLinksEnabled = ([enabledNum]: [number]) => {
     const enabled = !!enabledNum;
     if (this.state.actionLinksEnabled !== enabled) {
       this.setState({ actionLinksEnabled: enabled });
     }
   };
 
   closeButtonRef = (
     closeButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.closeButton = (closeButton: any);
   };
 
   mediaIconsRef = (mediaIconsContainer: ?React.ElementRef<typeof View>) => {
     this.mediaIconsContainer = mediaIconsContainer;
   };
 
   onCloseButtonLayout = () => {
     const { closeButton } = this;
     if (!closeButton) {
       return;
     }
     closeButton.measure((x, y, width, height, pageX, pageY) => {
       this.closeButtonX.setValue(pageX);
       this.closeButtonY.setValue(pageY);
       this.closeButtonWidth.setValue(width);
       this.closeButtonHeight.setValue(height);
     });
   };
 
   onMediaIconsLayout = () => {
     const { mediaIconsContainer } = this;
     if (!mediaIconsContainer) {
       return;
     }
 
     mediaIconsContainer.measure((x, y, width, height, pageX, pageY) => {
       this.mediaIconsX.setValue(pageX);
       this.mediaIconsY.setValue(pageY);
       this.mediaIconsWidth.setValue(width);
       this.mediaIconsHeight.setValue(height);
     });
   };
 }
 
 const styles = StyleSheet.create({
   backdrop: {
     backgroundColor: 'black',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   buttonsOverlay: {
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   closeButton: {
     color: 'white',
     fontSize: 36,
     paddingHorizontal: 8,
     paddingVertical: 2,
     textShadowColor: '#000',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   closeButtonContainer: {
     position: 'absolute',
     right: 4,
     top: 4,
   },
   container: {
     flex: 1,
   },
   contentContainer: {
     flex: 1,
     overflow: 'hidden',
   },
   fill: {
     flex: 1,
   },
   mediaIcon: {
     color: '#D7D7DC',
     fontSize: 36,
     textShadowColor: '#1C1C1E',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   mediaIconButtons: {
     alignItems: 'center',
     paddingBottom: 2,
     paddingLeft: 8,
     paddingRight: 8,
     paddingTop: 2,
   },
   mediaIconText: {
     color: '#D7D7DC',
     fontSize: 14,
     textShadowColor: '#1C1C1E',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   mediaIconsContainer: {
     bottom: 8,
     left: 16,
     position: 'absolute',
   },
   mediaIconsRow: {
     flexDirection: 'row',
   },
 });
 
 const ConnectedFullScreenViewModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedFullScreenViewModal(
     props: BaseProps,
   ) {
     const dimensions = useSelector(derivedDimensionsInfoSelector);
     const overlayContext = React.useContext(OverlayContext);
     return (
       <FullScreenViewModal
         {...props}
         dimensions={dimensions}
         overlayContext={overlayContext}
       />
     );
   });
 
 export default ConnectedFullScreenViewModal;
diff --git a/native/components/gesture-touchable-opacity.react.js b/native/components/gesture-touchable-opacity.react.js
index a6bab97fd..3690e1fca 100644
--- a/native/components/gesture-touchable-opacity.react.js
+++ b/native/components/gesture-touchable-opacity.react.js
@@ -1,254 +1,252 @@
 // @flow
 
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import {
   LongPressGestureHandler,
   TapGestureHandler,
   State as GestureState,
   type LongPressGestureEvent,
   type TapGestureEvent,
 } from 'react-native-gesture-handler';
 import Animated, { EasingNode } from 'react-native-reanimated';
 
 import type { ReactRefSetter } from 'lib/types/react-types.js';
 
 import type { AnimatedViewStyle, ViewStyle } from '../types/styles.js';
 import {
   runTiming,
   useReanimatedValueForBoolean,
 } from '../utils/animation-utils.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const {
   Clock,
   block,
   event,
   set,
   call,
   cond,
   not,
   and,
   or,
   eq,
   stopClock,
   clockRunning,
   useValue,
 } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 const pressAnimationSpec = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.quad),
 };
 const resetAnimationSpec = {
   duration: 250,
   easing: EasingNode.inOut(EasingNode.quad),
 };
 
 type Props = {
   +activeOpacity?: number,
   +onPress?: () => mixed,
   +onLongPress?: () => mixed,
   +children?: React.Node,
   +style?: ViewStyle,
   +animatedStyle?: AnimatedViewStyle,
   // If stickyActive is a boolean, we assume that we should stay active after a
   // successful onPress or onLongPress. We will wait for stickyActive to flip
   // from true to false before animating back to our deactivated mode.
   +stickyActive?: boolean,
   +overlay?: React.Node,
   +disabled?: boolean,
 };
 function ForwardedGestureTouchableOpacity(
   props: Props,
   ref: ReactRefSetter<TapGestureHandler>,
 ) {
   const { onPress: innerOnPress, onLongPress: innerOnLongPress } = props;
   const onPress = React.useCallback(() => {
     innerOnPress && innerOnPress();
   }, [innerOnPress]);
   const onLongPress = React.useCallback(() => {
     innerOnLongPress && innerOnLongPress();
   }, [innerOnLongPress]);
   const activeOpacity = props.activeOpacity ?? 0.2;
 
   const { stickyActive, disabled } = props;
   const activeValue = useReanimatedValueForBoolean(!!stickyActive);
   const disabledValue = useReanimatedValueForBoolean(!!disabled);
   const stickyActiveEnabled =
     stickyActive !== null && stickyActive !== undefined;
 
   const longPressState = useValue(-1);
   const tapState = useValue(-1);
   const longPressEvent = React.useMemo(
     () =>
       event<LongPressGestureEvent>([
         {
           nativeEvent: {
             state: longPressState,
           },
         },
       ]),
     [longPressState],
   );
   const tapEvent = React.useMemo(
     () =>
       event<TapGestureEvent>([
         {
           nativeEvent: {
             state: tapState,
           },
         },
       ]),
     [tapState],
   );
   const gestureActive = React.useMemo(
     () =>
       or(
         eq(longPressState, GestureState.ACTIVE),
         eq(tapState, GestureState.BEGAN),
         eq(tapState, GestureState.ACTIVE),
         activeValue,
       ),
     [longPressState, tapState, activeValue],
   );
 
   const curOpacity = useValue(1);
 
   const pressClockRef = React.useRef<?Clock>();
   if (!pressClockRef.current) {
     pressClockRef.current = new Clock();
   }
   const pressClock = pressClockRef.current;
   const resetClockRef = React.useRef<?Clock>();
   if (!resetClockRef.current) {
     resetClockRef.current = new Clock();
   }
   const resetClock = resetClockRef.current;
 
   const animationCode = React.useMemo(
     () => [
       cond(or(gestureActive, clockRunning(pressClock)), [
         set(
           curOpacity,
           runTiming(
             pressClock,
             curOpacity,
             activeOpacity,
             true,
             pressAnimationSpec,
           ),
         ),
         stopClock(resetClock),
       ]),
       // We have to do two separate conds here even though the condition is the
       // same because if runTiming stops the pressClock, we need to immediately
       // start the resetClock or Reanimated won't keep running the code because
       // it will think there is nothing left to do
       cond(
         not(or(gestureActive, clockRunning(pressClock))),
         set(
           curOpacity,
           runTiming(resetClock, curOpacity, 1, true, resetAnimationSpec),
         ),
       ),
     ],
     [gestureActive, curOpacity, pressClock, resetClock, activeOpacity],
   );
 
   const prevTapSuccess = useValue(0);
   const prevLongPressSuccess = useValue(0);
 
   const transformStyle = React.useMemo(() => {
     const tapSuccess = eq(tapState, GestureState.END);
     const longPressSuccess = eq(longPressState, GestureState.ACTIVE);
     const opacity = block([
       ...animationCode,
       [
         cond(and(tapSuccess, not(prevTapSuccess), not(disabledValue)), [
           stickyActiveEnabled ? set(activeValue, 1) : undefined,
           call([], onPress),
         ]),
         set(prevTapSuccess, tapSuccess),
       ],
       [
         cond(
           and(longPressSuccess, not(prevLongPressSuccess), not(disabledValue)),
           [
             stickyActiveEnabled ? set(activeValue, 1) : undefined,
             call([], onLongPress),
           ],
         ),
         set(prevLongPressSuccess, longPressSuccess),
       ],
       curOpacity,
     ]);
     return { opacity };
   }, [
     animationCode,
     tapState,
     longPressState,
     prevTapSuccess,
     prevLongPressSuccess,
     curOpacity,
     onPress,
     onLongPress,
     activeValue,
     disabledValue,
     stickyActiveEnabled,
   ]);
 
   const fillStyle = React.useMemo(() => {
     const result = StyleSheet.flatten<ViewStyle>(props.style);
     if (!result) {
       return undefined;
     }
     const { flex } = result;
     if (flex === null || flex === undefined) {
       return undefined;
     }
     return { flex };
   }, [props.style]);
 
   const tapHandler = (
     <TapGestureHandler
       onHandlerStateChange={tapEvent}
       maxDurationMs={100000}
       maxDist={50}
       ref={ref}
     >
       <Animated.View style={fillStyle}>
         <Animated.View
           style={[transformStyle, props.style, props.animatedStyle]}
         >
           {props.children}
         </Animated.View>
         {props.overlay}
       </Animated.View>
     </TapGestureHandler>
   );
   if (!innerOnLongPress) {
     return tapHandler;
   }
 
   return (
     <LongPressGestureHandler
       onHandlerStateChange={longPressEvent}
       minDurationMs={370}
       maxDist={50}
     >
       <Animated.View style={fillStyle}>{tapHandler}</Animated.View>
     </LongPressGestureHandler>
   );
 }
 
 const GestureTouchableOpacity: React.AbstractComponent<
   Props,
   TapGestureHandler,
 > = React.forwardRef<Props, TapGestureHandler>(
   ForwardedGestureTouchableOpacity,
 );
 GestureTouchableOpacity.displayName = 'GestureTouchableOpacity';
 
 export default GestureTouchableOpacity;
diff --git a/native/markdown/rules.react.js b/native/markdown/rules.react.js
index 6eceec02a..b157876e0 100644
--- a/native/markdown/rules.react.js
+++ b/native/markdown/rules.react.js
@@ -1,453 +1,441 @@
 // @flow
 
 import _memoize from 'lodash/memoize.js';
 import * as React from 'react';
 import { Text, View, Platform } from 'react-native';
 import * as SimpleMarkdown from 'simple-markdown';
 
 import * as SharedMarkdown from 'lib/shared/markdown.js';
 import { chatMentionRegex } from 'lib/shared/mention-utils.js';
 import type {
   ChatMentionCandidates,
   ThreadInfo,
 } from 'lib/types/thread-types.js';
 
 import MarkdownChatMention from './markdown-chat-mention.react.js';
 import MarkdownLink from './markdown-link.react.js';
 import MarkdownParagraph from './markdown-paragraph.react.js';
 import MarkdownSpoiler from './markdown-spoiler.react.js';
 import MarkdownUserMention from './markdown-user-mention.react.js';
 import { getMarkdownStyles } from './styles.js';
 
 export type MarkdownRules = {
   +simpleMarkdownRules: SharedMarkdown.ParserRules,
   +emojiOnlyFactor: ?number,
   // We need to use a Text container for Entry because it needs to match up
   // exactly with TextInput. However, if we use a Text container, we can't
   // support styles for things like blockQuote, which rely on rendering as a
   // View, and Views can't be nested inside Texts without explicit height and
   // width
   +container: 'View' | 'Text',
 };
 
 // Entry requires a seamless transition between Markdown and TextInput
 // components, so we can't do anything that would change the position of text
 const inlineMarkdownRules: boolean => MarkdownRules = _memoize(useDarkStyle => {
   const styles = getMarkdownStyles(useDarkStyle ? 'dark' : 'light');
   const simpleMarkdownRules = {
     // Matches 'https://google.com' during parse phase and returns a 'link' node
     url: {
       ...SimpleMarkdown.defaultRules.url,
       // simple-markdown is case-sensitive, but we don't want to be
       match: SimpleMarkdown.inlineRegex(SharedMarkdown.urlRegex),
     },
     // Matches '[Google](https://google.com)' during parse phase and handles
     // rendering all 'link' nodes, including for 'autolink' and 'url'
     link: {
       ...SimpleMarkdown.defaultRules.link,
       match: () => null,
       react(
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) {
         return (
           <MarkdownLink
             key={state.key}
             style={styles.link}
             target={node.target}
           >
             {output(node.content, state)}
           </MarkdownLink>
         );
       },
     },
     // Each line gets parsed into a 'paragraph' node. The AST returned by the
     // parser will be an array of one or more 'paragraph' nodes
     paragraph: {
       ...SimpleMarkdown.defaultRules.paragraph,
       // simple-markdown's default RegEx collapses multiple newlines into one.
       // We want to keep the newlines, but when rendering within a View, we
       // strip just one trailing newline off, since the View adds vertical
       // spacing between its children
       match: (source: string, state: SharedMarkdown.State) => {
         if (state.inline) {
           return null;
         } else if (state.container === 'View') {
           return SharedMarkdown.paragraphStripTrailingNewlineRegex.exec(source);
         } else {
           return SharedMarkdown.paragraphRegex.exec(source);
         }
       },
       parse(
         capture: SharedMarkdown.Capture,
         parse: SharedMarkdown.Parser,
         state: SharedMarkdown.State,
       ) {
         let content = capture[1];
         if (state.container === 'View') {
           // React Native renders empty lines with less height. We want to
           // preserve the newline characters, so we replace empty lines with a
           // single space
           content = content.replace(/^$/m, ' ');
         }
         return {
           content: SimpleMarkdown.parseInline(parse, content, state),
         };
       },
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <MarkdownParagraph key={state.key} style={state.textStyle}>
           {output(node.content, state)}
         </MarkdownParagraph>
       ),
     },
     // This is the leaf node in the AST returned by the parse phase
     text: SimpleMarkdown.defaultRules.text,
   };
   return {
     simpleMarkdownRules,
     emojiOnlyFactor: null,
     container: 'Text',
   };
 });
 
 // We allow the most markdown features for TextMessage, which doesn't have the
 // same requirements as Entry
 const fullMarkdownRules: boolean => MarkdownRules = _memoize(useDarkStyle => {
   const styles = getMarkdownStyles(useDarkStyle ? 'dark' : 'light');
   const inlineRules = inlineMarkdownRules(useDarkStyle);
   const simpleMarkdownRules = {
     ...inlineRules.simpleMarkdownRules,
     // Matches '<https://google.com>' during parse phase and returns a 'link'
     // node
     autolink: SimpleMarkdown.defaultRules.autolink,
     // Matches '[Google](https://google.com)' during parse phase and handles
     // rendering all 'link' nodes, including for 'autolink' and 'url'
     link: {
       ...inlineRules.simpleMarkdownRules.link,
       match: SimpleMarkdown.defaultRules.link.match,
     },
     mailto: SimpleMarkdown.defaultRules.mailto,
     em: {
       ...SimpleMarkdown.defaultRules.em,
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <Text key={state.key} style={styles.italics}>
           {output(node.content, state)}
         </Text>
       ),
     },
     strong: {
       ...SimpleMarkdown.defaultRules.strong,
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <Text key={state.key} style={styles.bold}>
           {output(node.content, state)}
         </Text>
       ),
     },
     u: {
       ...SimpleMarkdown.defaultRules.u,
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <Text key={state.key} style={styles.underline}>
           {output(node.content, state)}
         </Text>
       ),
     },
     del: {
       ...SimpleMarkdown.defaultRules.del,
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <Text key={state.key} style={styles.strikethrough}>
           {output(node.content, state)}
         </Text>
       ),
     },
     spoiler: {
       order: SimpleMarkdown.defaultRules.paragraph.order - 1,
       match: SimpleMarkdown.inlineRegex(SharedMarkdown.spoilerRegex),
       parse(
         capture: SharedMarkdown.Capture,
         parse: SharedMarkdown.Parser,
         state: SharedMarkdown.State,
       ) {
         const content = capture[1];
         return {
           content: SimpleMarkdown.parseInline(parse, content, state),
         };
       },
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <MarkdownSpoiler
           key={state.key}
           spoilerIdentifier={state.key}
           text={output(node.content, state)}
         />
       ),
     },
     inlineCode: {
       ...SimpleMarkdown.defaultRules.inlineCode,
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <Text key={state.key} style={styles.inlineCode}>
           {node.content}
         </Text>
       ),
     },
     heading: {
       ...SimpleMarkdown.defaultRules.heading,
       match: SimpleMarkdown.blockRegex(
         SharedMarkdown.headingStripFollowingNewlineRegex,
       ),
-      // eslint-disable-next-line react/display-name
       react(
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) {
         const headingStyle = styles['h' + node.level];
         return (
           <Text key={state.key} style={[state.textStyle, headingStyle]}>
             {output(node.content, state)}
           </Text>
         );
       },
     },
     blockQuote: {
       ...SimpleMarkdown.defaultRules.blockQuote,
       // match end of blockQuote by either \n\n or end of string
       match: SharedMarkdown.matchBlockQuote(
         SharedMarkdown.blockQuoteStripFollowingNewlineRegex,
       ),
       parse: SharedMarkdown.parseBlockQuote,
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => {
         const { isNestedQuote } = state;
         const backgroundColor = isNestedQuote ? '#00000000' : '#00000066';
         const borderLeftColor = (Platform.select({
           ios: '#00000066',
           default: isNestedQuote ? '#00000066' : '#000000A3',
         }): string);
 
         return (
           <View
             key={state.key}
             style={[styles.blockQuote, { backgroundColor, borderLeftColor }]}
           >
             {output(node.content, { ...state, isNestedQuote: true })}
           </View>
         );
       },
     },
     codeBlock: {
       ...SimpleMarkdown.defaultRules.codeBlock,
       match: SimpleMarkdown.blockRegex(
         SharedMarkdown.codeBlockStripTrailingNewlineRegex,
       ),
       parse(capture: SharedMarkdown.Capture) {
         return {
           content: capture[1].replace(/^ {4}/gm, ''),
         };
       },
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <View key={state.key} style={styles.codeBlock}>
           <Text style={[state.textStyle, styles.codeBlockText]}>
             {node.content}
           </Text>
         </View>
       ),
     },
     fence: {
       ...SimpleMarkdown.defaultRules.fence,
       match: SimpleMarkdown.blockRegex(
         SharedMarkdown.fenceStripTrailingNewlineRegex,
       ),
       parse: (capture: SharedMarkdown.Capture) => ({
         type: 'codeBlock',
         content: capture[2],
       }),
     },
     json: {
       order: SimpleMarkdown.defaultRules.paragraph.order - 1,
       match: (source: string, state: SharedMarkdown.State) => {
         if (state.inline) {
           return null;
         }
         return SharedMarkdown.jsonMatch(source);
       },
       parse: (capture: SharedMarkdown.Capture) => {
         const jsonCapture: SharedMarkdown.JSONCapture = (capture: any);
         return {
           type: 'codeBlock',
           content: SharedMarkdown.jsonPrint(jsonCapture),
         };
       },
     },
     list: {
       ...SimpleMarkdown.defaultRules.list,
       match: SharedMarkdown.matchList,
       parse: SharedMarkdown.parseList,
       react(
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) {
         const children = node.items.map((item, i) => {
           const content = output(item, state);
           const bulletValue = node.ordered ? node.start + i + '. ' : '\u2022 ';
           return (
             <View key={i} style={styles.listRow}>
               <Text style={[state.textStyle, styles.listBulletStyle]}>
                 {bulletValue}
               </Text>
               <View style={styles.insideListView}>{content}</View>
             </View>
           );
         });
 
         return <View key={state.key}>{children}</View>;
       },
     },
     escape: SimpleMarkdown.defaultRules.escape,
   };
   return {
     ...inlineRules,
     simpleMarkdownRules,
     emojiOnlyFactor: 2,
     container: 'View',
   };
 });
 
 function useTextMessageRulesFunc(
   threadInfo: ThreadInfo,
   chatMentionCandidates: ChatMentionCandidates,
 ): (useDarkStyle: boolean) => MarkdownRules {
   const { members } = threadInfo;
   const membersMap = SharedMarkdown.useMemberMapForUserMentions(members);
 
   return React.useMemo(
     () =>
       _memoize<[boolean], MarkdownRules>((useDarkStyle: boolean) =>
         textMessageRules(chatMentionCandidates, useDarkStyle, membersMap),
       ),
     [chatMentionCandidates, membersMap],
   );
 }
 
 function textMessageRules(
   chatMentionCandidates: ChatMentionCandidates,
   useDarkStyle: boolean,
   membersMap: $ReadOnlyMap<string, string>,
 ): MarkdownRules {
   const baseRules = fullMarkdownRules(useDarkStyle);
 
   return {
     ...baseRules,
     simpleMarkdownRules: {
       ...baseRules.simpleMarkdownRules,
       userMention: {
         ...SimpleMarkdown.defaultRules.strong,
         match: SharedMarkdown.matchUserMentions(membersMap),
         parse: (capture: SharedMarkdown.Capture) =>
           SharedMarkdown.parseUserMentions(membersMap, capture),
-        // eslint-disable-next-line react/display-name
         react: (
           node: SharedMarkdown.SingleASTNode,
           output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
           state: SharedMarkdown.State,
         ) => (
           <MarkdownUserMention
             key={state.key}
             userID={node.userID}
             useDarkStyle={useDarkStyle}
           >
             {node.content}
           </MarkdownUserMention>
         ),
       },
       chatMention: {
         ...SimpleMarkdown.defaultRules.strong,
         match: SimpleMarkdown.inlineRegex(chatMentionRegex),
         parse: (capture: SharedMarkdown.Capture) =>
           SharedMarkdown.parseChatMention(chatMentionCandidates, capture),
-        // eslint-disable-next-line react/display-name
         react: (
           node: SharedMarkdown.SingleASTNode,
           output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
           state: SharedMarkdown.State,
         ) =>
           node.hasAccessToChat ? (
             <MarkdownChatMention key={state.key} threadInfo={node.threadInfo}>
               {node.content}
             </MarkdownChatMention>
           ) : (
             <Text key={state.key}>{node.content}</Text>
           ),
       },
     },
   };
 }
 
 let defaultTextMessageRules = null;
 const defaultMembersMap = new Map<string, string>();
 
 function getDefaultTextMessageRules(
   overrideDefaultChatMentionCandidates: ChatMentionCandidates = {},
 ): MarkdownRules {
   if (Object.keys(overrideDefaultChatMentionCandidates).length > 0) {
     return textMessageRules(
       overrideDefaultChatMentionCandidates,
       false,
       defaultMembersMap,
     );
   }
   if (!defaultTextMessageRules) {
     defaultTextMessageRules = textMessageRules({}, false, defaultMembersMap);
   }
   return defaultTextMessageRules;
 }
 
 export {
   inlineMarkdownRules,
   useTextMessageRulesFunc,
   getDefaultTextMessageRules,
 };
diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js
index c8257011b..79f7b16b4 100644
--- a/native/media/camera-modal.react.js
+++ b/native/media/camera-modal.react.js
@@ -1,1221 +1,1219 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Ionicons.js';
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
   Platform,
   Image,
   Animated,
   Easing,
 } from 'react-native';
 import { RNCamera } from 'react-native-camera';
 import filesystem from 'react-native-fs';
 import {
   PinchGestureHandler,
   TapGestureHandler,
   State as GestureState,
   type PinchGestureEvent,
   type TapGestureEvent,
 } from 'react-native-gesture-handler';
 import Orientation from 'react-native-orientation-locker';
 import type { Orientations } from 'react-native-orientation-locker';
 import Reanimated, {
   EasingNode as ReanimatedEasing,
   type EventResult,
 } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { pathFromURI, filenameFromPathOrURI } from 'lib/media/file-utils.js';
 import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils.js';
 import type { PhotoCapture } from 'lib/types/media-types.js';
 import type { ReactRef } from 'lib/types/react-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import SendMediaButton from './send-media-button.react.js';
 import type { RegistrationNavigationProp } from '../account/registration/registration-navigator.react.js';
 import ContentLoading from '../components/content-loading.react.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../navigation/overlay-context.js';
 import { updateDeviceCameraInfoActionType } from '../redux/action-types.js';
 import { type DimensionsInfo } from '../redux/dimensions-updater.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { colors } from '../themes/colors.js';
 import { type DeviceCameraInfo } from '../types/camera.js';
 import type { NativeMethods } from '../types/react-native.js';
 import {
   AnimatedView,
   type ViewStyle,
   type AnimatedViewStyle,
 } from '../types/styles.js';
 import { clamp, gestureJustEnded } from '../utils/animation-utils.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const {
   Value,
   Node,
   Clock,
   event,
   Extrapolate,
   block,
   set,
   call,
   cond,
   not,
   and,
   or,
   eq,
   greaterThan,
   lessThan,
   add,
   sub,
   multiply,
   divide,
   abs,
   interpolateNode,
   startClock,
   stopClock,
   clockRunning,
   timing,
   spring,
   SpringUtils,
 } = Reanimated;
-/* eslint-enable import/no-named-as-default-member */
 
 const maxZoom = 16;
 const zoomUpdateFactor = (() => {
   if (Platform.OS === 'ios') {
     return 0.002;
   }
   if (Platform.OS === 'android' && Platform.Version > 26) {
     return 0.005;
   }
   if (Platform.OS === 'android' && Platform.Version > 23) {
     return 0.01;
   }
   return 0.03;
 })();
 
 const stagingModeAnimationConfig = {
   duration: 150,
   easing: ReanimatedEasing.inOut(ReanimatedEasing.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 
 const indicatorSpringConfig = {
   ...SpringUtils.makeDefaultConfig(),
   damping: 0,
   mass: 0.6,
   toValue: 1,
 };
 const indicatorTimingConfig = {
   duration: 500,
   easing: ReanimatedEasing.out(ReanimatedEasing.ease),
   toValue: 0,
 };
 function runIndicatorAnimation(
   // Inputs
   springClock: Clock,
   delayClock: Clock,
   timingClock: Clock,
   animationRunning: Node,
   // Outputs
   scale: Value,
   opacity: Value,
 ): Node {
   const delayStart = new Value(0);
 
   const springScale = new Value(0.75);
   const delayScale = new Value(0);
   const timingScale = new Value(0.75);
 
   const animatedScale = cond(
     clockRunning(springClock),
     springScale,
     cond(clockRunning(delayClock), delayScale, timingScale),
   );
   const lastAnimatedScale = new Value(0.75);
   const numScaleLoops = new Value(0);
 
   const springState = {
     finished: new Value(1),
     velocity: new Value(0),
     time: new Value(0),
     position: springScale,
   };
   const timingState = {
     finished: new Value(1),
     frameTime: new Value(0),
     time: new Value(0),
     position: timingScale,
   };
 
   return block([
     cond(not(animationRunning), [
       set(springState.finished, 0),
       set(springState.velocity, 0),
       set(springState.time, 0),
       set(springScale, 0.75),
       set(lastAnimatedScale, 0.75),
       set(numScaleLoops, 0),
       set(opacity, 1),
       startClock(springClock),
     ]),
     [
       cond(
         clockRunning(springClock),
         spring(springClock, springState, indicatorSpringConfig),
       ),
       timing(timingClock, timingState, indicatorTimingConfig),
     ],
     [
       cond(
         and(
           greaterThan(animatedScale, 1.2),
           not(greaterThan(lastAnimatedScale, 1.2)),
         ),
         [
           set(numScaleLoops, add(numScaleLoops, 1)),
           cond(greaterThan(numScaleLoops, 1), [
             set(springState.finished, 1),
             stopClock(springClock),
             set(delayScale, springScale),
             set(delayStart, delayClock),
             startClock(delayClock),
           ]),
         ],
       ),
       set(lastAnimatedScale, animatedScale),
     ],
     cond(
       and(
         clockRunning(delayClock),
         greaterThan(delayClock, add(delayStart, 400)),
       ),
       [
         stopClock(delayClock),
         set(timingState.finished, 0),
         set(timingState.frameTime, 0),
         set(timingState.time, 0),
         set(timingScale, delayScale),
         startClock(timingClock),
       ],
     ),
     cond(
       and(springState.finished, timingState.finished),
       stopClock(timingClock),
     ),
     set(scale, animatedScale),
     cond(clockRunning(timingClock), set(opacity, clamp(animatedScale, 0, 1))),
   ]);
 }
 
 type RNCameraStatus = 'READY' | 'PENDING_AUTHORIZATION' | 'NOT_AUTHORIZED';
 
 type TouchableOpacityInstance = React.AbstractComponent<
   React.ElementConfig<typeof TouchableOpacity>,
   NativeMethods,
 >;
 
 type BaseProps = {
   +handlePhotoCapture: (capture: PhotoCapture) => mixed,
   +navigation:
     | AppNavigationProp<'ChatCameraModal'>
     | AppNavigationProp<'UserAvatarCameraModal'>
     | AppNavigationProp<'ThreadAvatarCameraModal'>
     | RegistrationNavigationProp<'RegistrationUserAvatarCameraModal'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +dimensions: DimensionsInfo,
   +deviceCameraInfo: DeviceCameraInfo,
   +deviceOrientation: Orientations,
   +foreground: boolean,
   // Redux dispatch functions
   +dispatch: Dispatch,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
 };
 type State = {
   +zoom: number,
   +useFrontCamera: boolean,
   +hasCamerasOnBothSides: boolean,
   +flashMode: number,
   +autoFocusPointOfInterest: ?{
     x: number,
     y: number,
     autoExposure?: boolean,
   },
   +stagingMode: boolean,
   +pendingPhotoCapture: ?PhotoCapture,
 };
 class CameraModal extends React.PureComponent<Props, State> {
   camera: ?RNCamera;
 
   pinchEvent: EventResult<PinchGestureEvent>;
   pinchHandler: ReactRef<PinchGestureHandler> = React.createRef();
   tapEvent: EventResult<TapGestureEvent>;
   tapHandler: ReactRef<TapGestureHandler> = React.createRef();
   animationCode: Node;
 
   closeButton: ?React.ElementRef<TouchableOpacityInstance>;
   closeButtonX: Value = new Value(-1);
   closeButtonY: Value = new Value(-1);
   closeButtonWidth: Value = new Value(0);
   closeButtonHeight: Value = new Value(0);
 
   photoButton: ?React.ElementRef<TouchableOpacityInstance>;
   photoButtonX: Value = new Value(-1);
   photoButtonY: Value = new Value(-1);
   photoButtonWidth: Value = new Value(0);
   photoButtonHeight: Value = new Value(0);
 
   switchCameraButton: ?React.ElementRef<TouchableOpacityInstance>;
   switchCameraButtonX: Value = new Value(-1);
   switchCameraButtonY: Value = new Value(-1);
   switchCameraButtonWidth: Value = new Value(0);
   switchCameraButtonHeight: Value = new Value(0);
 
   flashButton: ?React.ElementRef<TouchableOpacityInstance>;
   flashButtonX: Value = new Value(-1);
   flashButtonY: Value = new Value(-1);
   flashButtonWidth: Value = new Value(0);
   flashButtonHeight: Value = new Value(0);
 
   focusIndicatorX: Value = new Value(-1);
   focusIndicatorY: Value = new Value(-1);
   focusIndicatorScale: Value = new Value(0);
   focusIndicatorOpacity: Value = new Value(0);
 
   cancelIndicatorAnimation: Value = new Value(0);
 
   cameraIDsFetched = false;
 
   stagingModeProgress: Value = new Value(0);
   sendButtonProgress: Animated.Value = new Animated.Value(0);
   sendButtonStyle: ViewStyle;
   overlayStyle: AnimatedViewStyle;
 
   constructor(props: Props) {
     super(props);
 
     this.state = {
       zoom: 0,
       useFrontCamera: props.deviceCameraInfo.defaultUseFrontCamera,
       hasCamerasOnBothSides: props.deviceCameraInfo.hasCamerasOnBothSides,
       flashMode: RNCamera.Constants.FlashMode.off,
       autoFocusPointOfInterest: undefined,
       stagingMode: false,
       pendingPhotoCapture: undefined,
     };
 
     const sendButtonScale = this.sendButtonProgress.interpolate({
       inputRange: [0, 1],
       outputRange: ([1.1, 1]: number[]), // Flow...
     });
     this.sendButtonStyle = {
       opacity: this.sendButtonProgress,
       transform: [{ scale: sendButtonScale }],
     };
 
     const overlayOpacity = interpolateNode(this.stagingModeProgress, {
       inputRange: [0, 0.01, 1],
       outputRange: [0, 0.5, 0],
       extrapolate: Extrapolate.CLAMP,
     });
     this.overlayStyle = {
       ...styles.overlay,
       opacity: overlayOpacity,
     };
 
     const pinchState = new Value(-1);
     const pinchScale = new Value(1);
     this.pinchEvent = event([
       {
         nativeEvent: {
           state: pinchState,
           scale: pinchScale,
         },
       },
     ]);
 
     const tapState = new Value(-1);
     const tapX = new Value(0);
     const tapY = new Value(0);
     this.tapEvent = event([
       {
         nativeEvent: {
           state: tapState,
           x: tapX,
           y: tapY,
         },
       },
     ]);
 
     this.animationCode = block([
       this.zoomAnimationCode(pinchState, pinchScale),
       this.focusAnimationCode(tapState, tapX, tapY),
     ]);
   }
 
   zoomAnimationCode(pinchState: Node, pinchScale: Node): Node {
     const pinchJustEnded = gestureJustEnded(pinchState);
 
     const zoomBase = new Value(1);
     const zoomReported = new Value(1);
 
     const currentZoom = interpolateNode(multiply(zoomBase, pinchScale), {
       inputRange: [1, 8],
       outputRange: [1, 8],
       extrapolate: Extrapolate.CLAMP,
     });
     const cameraZoomFactor = interpolateNode(zoomReported, {
       inputRange: [1, 8],
       outputRange: [0, 1],
       extrapolate: Extrapolate.CLAMP,
     });
     const resolvedZoom = cond(
       eq(pinchState, GestureState.ACTIVE),
       currentZoom,
       zoomBase,
     );
 
     return block([
       cond(pinchJustEnded, set(zoomBase, currentZoom)),
       cond(
         or(
           pinchJustEnded,
           greaterThan(
             abs(sub(divide(resolvedZoom, zoomReported), 1)),
             zoomUpdateFactor,
           ),
         ),
         [
           set(zoomReported, resolvedZoom),
           call([cameraZoomFactor], this.updateZoom),
         ],
       ),
     ]);
   }
 
   focusAnimationCode(tapState: Node, tapX: Node, tapY: Node): Node {
     const lastTapX = new Value(0);
     const lastTapY = new Value(0);
     const fingerJustReleased = and(
       gestureJustEnded(tapState),
       this.outsideButtons(lastTapX, lastTapY),
     );
 
     const indicatorSpringClock = new Clock();
     const indicatorDelayClock = new Clock();
     const indicatorTimingClock = new Clock();
     const indicatorAnimationRunning = or(
       clockRunning(indicatorSpringClock),
       clockRunning(indicatorDelayClock),
       clockRunning(indicatorTimingClock),
     );
 
     return block([
       cond(fingerJustReleased, [
         call([tapX, tapY], this.focusOnPoint),
         set(this.focusIndicatorX, tapX),
         set(this.focusIndicatorY, tapY),
         stopClock(indicatorSpringClock),
         stopClock(indicatorDelayClock),
         stopClock(indicatorTimingClock),
       ]),
       cond(this.cancelIndicatorAnimation, [
         set(this.cancelIndicatorAnimation, 0),
         stopClock(indicatorSpringClock),
         stopClock(indicatorDelayClock),
         stopClock(indicatorTimingClock),
         set(this.focusIndicatorOpacity, 0),
       ]),
       cond(
         or(fingerJustReleased, indicatorAnimationRunning),
         runIndicatorAnimation(
           indicatorSpringClock,
           indicatorDelayClock,
           indicatorTimingClock,
           indicatorAnimationRunning,
           this.focusIndicatorScale,
           this.focusIndicatorOpacity,
         ),
       ),
       set(lastTapX, tapX),
       set(lastTapY, tapY),
     ]);
   }
 
   outsideButtons(x: Node, y: Node): Node {
     const {
       closeButtonX,
       closeButtonY,
       closeButtonWidth,
       closeButtonHeight,
       photoButtonX,
       photoButtonY,
       photoButtonWidth,
       photoButtonHeight,
       switchCameraButtonX,
       switchCameraButtonY,
       switchCameraButtonWidth,
       switchCameraButtonHeight,
       flashButtonX,
       flashButtonY,
       flashButtonWidth,
       flashButtonHeight,
     } = this;
     return and(
       or(
         lessThan(x, closeButtonX),
         greaterThan(x, add(closeButtonX, closeButtonWidth)),
         lessThan(y, closeButtonY),
         greaterThan(y, add(closeButtonY, closeButtonHeight)),
       ),
       or(
         lessThan(x, photoButtonX),
         greaterThan(x, add(photoButtonX, photoButtonWidth)),
         lessThan(y, photoButtonY),
         greaterThan(y, add(photoButtonY, photoButtonHeight)),
       ),
       or(
         lessThan(x, switchCameraButtonX),
         greaterThan(x, add(switchCameraButtonX, switchCameraButtonWidth)),
         lessThan(y, switchCameraButtonY),
         greaterThan(y, add(switchCameraButtonY, switchCameraButtonHeight)),
       ),
       or(
         lessThan(x, flashButtonX),
         greaterThan(x, add(flashButtonX, flashButtonWidth)),
         lessThan(y, flashButtonY),
         greaterThan(y, add(flashButtonY, flashButtonHeight)),
       ),
     );
   }
 
   static isActive(props: Props): boolean {
     const { overlayContext } = props;
     if (!overlayContext) {
       return true;
     }
     return !overlayContext.isDismissing;
   }
 
   componentDidMount() {
     if (CameraModal.isActive(this.props)) {
       Orientation.unlockAllOrientations();
     }
   }
 
   componentWillUnmount() {
     if (CameraModal.isActive(this.props)) {
       Orientation.lockToPortrait();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     const isActive = CameraModal.isActive(this.props);
     const wasActive = CameraModal.isActive(prevProps);
     if (isActive && !wasActive) {
       Orientation.unlockAllOrientations();
     } else if (!isActive && wasActive) {
       Orientation.lockToPortrait();
     }
 
     if (!this.state.hasCamerasOnBothSides && prevState.hasCamerasOnBothSides) {
       this.switchCameraButtonX.setValue(-1);
       this.switchCameraButtonY.setValue(-1);
       this.switchCameraButtonWidth.setValue(0);
       this.switchCameraButtonHeight.setValue(0);
     }
 
     if (this.props.deviceOrientation !== prevProps.deviceOrientation) {
       this.setState({ autoFocusPointOfInterest: null });
       this.cancelIndicatorAnimation.setValue(1);
     }
 
     if (this.props.foreground && !prevProps.foreground && this.camera) {
       void this.camera.refreshAuthorizationStatus();
     }
 
     if (this.state.stagingMode && !prevState.stagingMode) {
       this.cancelIndicatorAnimation.setValue(1);
       this.focusIndicatorOpacity.setValue(0);
       timing(this.stagingModeProgress, {
         ...stagingModeAnimationConfig,
         toValue: 1,
       }).start();
     } else if (!this.state.stagingMode && prevState.stagingMode) {
       this.stagingModeProgress.setValue(0);
     }
 
     if (this.state.pendingPhotoCapture && !prevState.pendingPhotoCapture) {
       Animated.timing(this.sendButtonProgress, {
         ...sendButtonAnimationConfig,
         toValue: 1,
       }).start();
     } else if (
       !this.state.pendingPhotoCapture &&
       prevState.pendingPhotoCapture
     ) {
       void CameraModal.cleanUpPendingPhotoCapture(
         prevState.pendingPhotoCapture,
       );
       this.sendButtonProgress.setValue(0);
     }
   }
 
   static async cleanUpPendingPhotoCapture(pendingPhotoCapture: PhotoCapture) {
     const path = pathFromURI(pendingPhotoCapture.uri);
     if (!path) {
       return;
     }
     try {
       await filesystem.unlink(path);
     } catch (e) {}
   }
 
   get containerStyle(): AnimatedViewStyle {
     const { overlayContext } = this.props;
     if (!overlayContext) {
       return styles.container;
     }
     return {
       ...styles.container,
       opacity: overlayContext.position,
     };
   }
 
   get focusIndicatorStyle(): AnimatedViewStyle {
     return {
       ...styles.focusIndicator,
       opacity: this.focusIndicatorOpacity,
       transform: [
         { translateX: this.focusIndicatorX },
         { translateY: this.focusIndicatorY },
         { scale: this.focusIndicatorScale },
       ],
     };
   }
 
   renderCamera = ({
     camera,
     status,
   }: {
     +camera: RNCamera & { +_cameraHandle?: mixed, ... },
     status: RNCameraStatus,
     ...
   }): React.Node => {
     if (camera && camera._cameraHandle) {
       void this.fetchCameraIDs(camera);
     }
     if (this.state.stagingMode) {
       return this.renderStagingView();
     }
 
     return (
       <SafeAreaView style={styles.fill}>
         <View style={styles.fill}>
           {this.renderCameraContent(status)}
           <TouchableOpacity
             onPress={this.close}
             onLayout={this.onCloseButtonLayout}
             style={styles.closeButton}
             ref={this.closeButtonRef}
           >
             <Text style={styles.closeIcon}>×</Text>
           </TouchableOpacity>
         </View>
       </SafeAreaView>
     );
   };
 
   renderStagingView(): React.Node {
     let image = null;
     const { pendingPhotoCapture } = this.state;
     if (pendingPhotoCapture) {
       const imageSource = { uri: pendingPhotoCapture.uri };
       image = <Image source={imageSource} style={styles.stagingImage} />;
     } else {
       image = <ContentLoading fillType="flex" colors={colors.dark} />;
     }
 
     return (
       <>
         {image}
         <SafeAreaView style={styles.stagingViewOverlay}>
           <View style={styles.fill}>
             <TouchableOpacity
               onPress={this.clearPendingImage}
               style={styles.retakeButton}
             >
               <Icon name="ios-arrow-back" style={styles.retakeIcon} />
             </TouchableOpacity>
             <SendMediaButton
               onPress={this.sendPhoto}
               pointerEvents={pendingPhotoCapture ? 'auto' : 'none'}
               containerStyle={styles.sendButtonContainer}
               style={this.sendButtonStyle}
             />
           </View>
         </SafeAreaView>
       </>
     );
   }
 
   renderCameraContent(status: RNCameraStatus): React.Node {
     if (status === 'PENDING_AUTHORIZATION') {
       return <ContentLoading fillType="flex" colors={colors.dark} />;
     } else if (status === 'NOT_AUTHORIZED') {
       return (
         <View style={styles.authorizationDeniedContainer}>
           <Text style={styles.authorizationDeniedText}>
             {'don’t have permission :('}
           </Text>
         </View>
       );
     }
 
     let switchCameraButton = null;
     if (this.state.hasCamerasOnBothSides) {
       switchCameraButton = (
         <TouchableOpacity
           onPress={this.switchCamera}
           onLayout={this.onSwitchCameraButtonLayout}
           style={styles.switchCameraButton}
           ref={this.switchCameraButtonRef}
         >
           <Icon name="ios-camera-reverse" style={styles.switchCameraIcon} />
         </TouchableOpacity>
       );
     }
 
     let flashIcon;
     if (this.state.flashMode === RNCamera.Constants.FlashMode.on) {
       flashIcon = <Icon name="ios-flash" style={styles.flashIcon} />;
     } else if (this.state.flashMode === RNCamera.Constants.FlashMode.off) {
       flashIcon = <Icon name="ios-flash-off" style={styles.flashIcon} />;
     } else {
       flashIcon = (
         <>
           <Icon name="ios-flash" style={styles.flashIcon} />
           <Text style={styles.flashIconAutoText}>A</Text>
         </>
       );
     }
 
     return (
       <PinchGestureHandler
         onGestureEvent={this.pinchEvent}
         onHandlerStateChange={this.pinchEvent}
         simultaneousHandlers={this.tapHandler}
         ref={this.pinchHandler}
       >
         <Reanimated.View style={styles.fill}>
           <TapGestureHandler
             onHandlerStateChange={this.tapEvent}
             simultaneousHandlers={this.pinchHandler}
             waitFor={this.pinchHandler}
             ref={this.tapHandler}
           >
             <Reanimated.View style={styles.fill}>
               <Reanimated.View style={this.focusIndicatorStyle} />
               <TouchableOpacity
                 onPress={this.changeFlashMode}
                 onLayout={this.onFlashButtonLayout}
                 style={styles.flashButton}
                 ref={this.flashButtonRef}
               >
                 {flashIcon}
               </TouchableOpacity>
               <View style={styles.bottomButtonsContainer}>
                 <TouchableOpacity
                   onPress={this.takePhoto}
                   onLayout={this.onPhotoButtonLayout}
                   style={styles.saveButton}
                   ref={this.photoButtonRef}
                 >
                   <View style={styles.saveButtonInner} />
                 </TouchableOpacity>
                 {switchCameraButton}
               </View>
             </Reanimated.View>
           </TapGestureHandler>
         </Reanimated.View>
       </PinchGestureHandler>
     );
   }
 
   render(): React.Node {
     const statusBar = CameraModal.isActive(this.props) ? (
       <ConnectedStatusBar hidden />
     ) : null;
     const type = this.state.useFrontCamera
       ? RNCamera.Constants.Type.front
       : RNCamera.Constants.Type.back;
     return (
       <Reanimated.View style={this.containerStyle}>
         {statusBar}
         <Reanimated.Code exec={this.animationCode} />
         <RNCamera
           type={type}
           captureAudio={false}
           maxZoom={maxZoom}
           zoom={this.state.zoom}
           flashMode={this.state.flashMode}
           autoFocusPointOfInterest={this.state.autoFocusPointOfInterest}
           style={styles.fill}
           androidCameraPermissionOptions={null}
           ref={this.cameraRef}
         >
           {this.renderCamera}
         </RNCamera>
         <AnimatedView style={this.overlayStyle} pointerEvents="none" />
       </Reanimated.View>
     );
   }
 
   cameraRef = (camera: ?RNCamera) => {
     this.camera = camera;
   };
 
   closeButtonRef = (
     closeButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.closeButton = (closeButton: any);
   };
 
   onCloseButtonLayout = () => {
     const { closeButton } = this;
     if (!closeButton) {
       return;
     }
     closeButton.measure((x, y, width, height, pageX, pageY) => {
       this.closeButtonX.setValue(pageX);
       this.closeButtonY.setValue(pageY);
       this.closeButtonWidth.setValue(width);
       this.closeButtonHeight.setValue(height);
     });
   };
 
   photoButtonRef = (
     photoButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.photoButton = (photoButton: any);
   };
 
   onPhotoButtonLayout = () => {
     const { photoButton } = this;
     if (!photoButton) {
       return;
     }
     photoButton.measure((x, y, width, height, pageX, pageY) => {
       this.photoButtonX.setValue(pageX);
       this.photoButtonY.setValue(pageY);
       this.photoButtonWidth.setValue(width);
       this.photoButtonHeight.setValue(height);
     });
   };
 
   switchCameraButtonRef = (
     switchCameraButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.switchCameraButton = (switchCameraButton: any);
   };
 
   onSwitchCameraButtonLayout = () => {
     const { switchCameraButton } = this;
     if (!switchCameraButton) {
       return;
     }
     switchCameraButton.measure((x, y, width, height, pageX, pageY) => {
       this.switchCameraButtonX.setValue(pageX);
       this.switchCameraButtonY.setValue(pageY);
       this.switchCameraButtonWidth.setValue(width);
       this.switchCameraButtonHeight.setValue(height);
     });
   };
 
   flashButtonRef = (
     flashButton: ?React.ElementRef<typeof TouchableOpacity>,
   ) => {
     this.flashButton = (flashButton: any);
   };
 
   onFlashButtonLayout = () => {
     const { flashButton } = this;
     if (!flashButton) {
       return;
     }
     flashButton.measure((x, y, width, height, pageX, pageY) => {
       this.flashButtonX.setValue(pageX);
       this.flashButtonY.setValue(pageY);
       this.flashButtonWidth.setValue(width);
       this.flashButtonHeight.setValue(height);
     });
   };
 
   close = () => {
     const { overlayContext, navigation } = this.props;
     if (overlayContext && navigation.goBackOnce) {
       navigation.goBackOnce();
     } else {
       navigation.goBack();
     }
   };
 
   takePhoto = async () => {
     const { camera } = this;
     invariant(camera, 'camera ref should be set');
     this.setState({ stagingMode: true });
 
     // We avoid flipping this.state.useFrontCamera if we discover we don't
     // actually have a back camera since it causes a bit of lag, but this
     // means there are cases where it is false but we are actually using the
     // front camera
     const { hasCamerasOnBothSides, defaultUseFrontCamera } =
       this.props.deviceCameraInfo;
     const usingFrontCamera =
       this.state.useFrontCamera ||
       (!hasCamerasOnBothSides && defaultUseFrontCamera);
 
     const startTime = Date.now();
     const photoPromise = camera.takePictureAsync({
       pauseAfterCapture: Platform.OS === 'android',
       mirrorImage: usingFrontCamera,
       fixOrientation: true,
     });
 
     if (Platform.OS === 'ios') {
       camera.pausePreview();
     }
     const { uri, width, height } = await photoPromise;
     const filename = filenameFromPathOrURI(uri);
     invariant(
       filename,
       `unable to parse filename out of react-native-camera URI ${uri}`,
     );
 
     const now = Date.now();
     const pendingPhotoCapture = {
       step: 'photo_capture',
       uri,
       dimensions: { width, height },
       filename,
       time: now - startTime,
       captureTime: now,
       selectTime: 0,
       sendTime: 0,
       retries: 0,
     };
 
     this.setState({
       pendingPhotoCapture,
       zoom: 0,
       autoFocusPointOfInterest: undefined,
     });
   };
 
   sendPhoto = async () => {
     const { pendingPhotoCapture } = this.state;
     if (!pendingPhotoCapture) {
       return;
     }
 
     const now = Date.now();
     const capture = {
       ...pendingPhotoCapture,
       selectTime: now,
       sendTime: now,
     };
 
     this.close();
 
     this.props.handlePhotoCapture(capture);
   };
 
   clearPendingImage = () => {
     invariant(this.camera, 'camera ref should be set');
     this.camera.resumePreview();
     this.setState({
       stagingMode: false,
       pendingPhotoCapture: undefined,
     });
   };
 
   switchCamera = () => {
     this.setState((prevState: State) => ({
       useFrontCamera: !prevState.useFrontCamera,
     }));
   };
 
   updateZoom = ([zoom]: [number]) => {
     this.setState({ zoom });
   };
 
   changeFlashMode = () => {
     if (this.state.flashMode === RNCamera.Constants.FlashMode.on) {
       this.setState({ flashMode: RNCamera.Constants.FlashMode.off });
     } else if (this.state.flashMode === RNCamera.Constants.FlashMode.off) {
       this.setState({ flashMode: RNCamera.Constants.FlashMode.auto });
     } else {
       this.setState({ flashMode: RNCamera.Constants.FlashMode.on });
     }
   };
 
   focusOnPoint = ([inputX, inputY]: [number, number]) => {
     const { width: screenWidth, height: screenHeight } = this.props.dimensions;
     const relativeX = inputX / screenWidth;
     const relativeY = inputY / screenHeight;
 
     // react-native-camera's autoFocusPointOfInterest prop is based on a
     // LANDSCAPE-LEFT orientation, so we need to map to that
     let x, y;
     if (this.props.deviceOrientation === 'LANDSCAPE-LEFT') {
       x = relativeX;
       y = relativeY;
     } else if (this.props.deviceOrientation === 'LANDSCAPE-RIGHT') {
       x = 1 - relativeX;
       y = 1 - relativeY;
     } else if (this.props.deviceOrientation === 'PORTRAIT-UPSIDEDOWN') {
       x = 1 - relativeY;
       y = relativeX;
     } else {
       x = relativeY;
       y = 1 - relativeX;
     }
 
     const autoFocusPointOfInterest =
       Platform.OS === 'ios' ? { x, y, autoExposure: true } : { x, y };
     this.setState({ autoFocusPointOfInterest });
   };
 
   fetchCameraIDs = async (camera: RNCamera) => {
     if (this.cameraIDsFetched) {
       return;
     }
     this.cameraIDsFetched = true;
 
     const deviceCameras = await camera.getCameraIdsAsync();
 
     let hasFront = false,
       hasBack = false,
       i = 0;
     while ((!hasFront || !hasBack) && i < deviceCameras.length) {
       const deviceCamera = deviceCameras[i];
       if (deviceCamera.type === RNCamera.Constants.Type.front) {
         hasFront = true;
       } else if (deviceCamera.type === RNCamera.Constants.Type.back) {
         hasBack = true;
       }
       i++;
     }
 
     const hasCamerasOnBothSides = hasFront && hasBack;
     const defaultUseFrontCamera = !hasBack && hasFront;
     if (hasCamerasOnBothSides !== this.state.hasCamerasOnBothSides) {
       this.setState({ hasCamerasOnBothSides });
     }
     const {
       hasCamerasOnBothSides: oldHasCamerasOnBothSides,
       defaultUseFrontCamera: oldDefaultUseFrontCamera,
     } = this.props.deviceCameraInfo;
     if (
       hasCamerasOnBothSides !== oldHasCamerasOnBothSides ||
       defaultUseFrontCamera !== oldDefaultUseFrontCamera
     ) {
       this.props.dispatch({
         type: updateDeviceCameraInfoActionType,
         payload: { hasCamerasOnBothSides, defaultUseFrontCamera },
       });
     }
   };
 }
 
 const styles = StyleSheet.create({
   authorizationDeniedContainer: {
     alignItems: 'center',
     flex: 1,
     justifyContent: 'center',
   },
   authorizationDeniedText: {
     color: colors.dark.listSeparatorLabel,
     fontSize: 28,
     textAlign: 'center',
   },
   bottomButtonsContainer: {
     alignItems: 'center',
     bottom: 20,
     flexDirection: 'row',
     flex: 1,
     justifyContent: 'center',
     left: 0,
     position: 'absolute',
     right: 0,
   },
   closeButton: {
     left: 16,
     paddingBottom: 2,
     paddingHorizontal: 8,
     position: 'absolute',
     top: 6,
   },
   closeIcon: {
     color: 'white',
     fontSize: 36,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   container: {
     backgroundColor: 'black',
     flex: 1,
   },
   fill: {
     flex: 1,
   },
   flashButton: {
     marginTop: (Platform.select({ android: 15, default: 13 }): number),
     paddingHorizontal: 10,
     paddingVertical: 3,
     position: 'absolute',
     right: 15,
     top: 3,
   },
   flashIcon: {
     color: 'white',
     fontSize: 24,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   flashIconAutoText: {
     color: 'white',
     fontSize: 10,
     fontWeight: 'bold',
     position: 'absolute',
     right: 5,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
     top: 0,
   },
   focusIndicator: {
     borderColor: 'white',
     borderRadius: 24,
     borderWidth: 1,
     height: 24,
     left: -12,
     position: 'absolute',
     top: -12,
     width: 24,
   },
   overlay: {
     backgroundColor: 'white',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   retakeButton: {
     left: 20,
     marginTop: (Platform.select({ android: 15, default: 15 }): number),
     paddingBottom: 3,
     paddingHorizontal: 10,
     position: 'absolute',
     top: 6,
   },
   retakeIcon: {
     color: 'white',
     fontSize: 24,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
   saveButton: {
     alignItems: 'center',
     borderColor: 'white',
     borderRadius: 75,
     borderWidth: 4,
     height: 75,
     justifyContent: 'center',
     width: 75,
   },
   saveButtonInner: {
     backgroundColor: '#FFFFFF88',
     borderRadius: 60,
     height: 60,
     width: 60,
   },
   sendButtonContainer: {
     bottom: 22,
     position: 'absolute',
     right: 32,
   },
   stagingImage: {
     backgroundColor: 'black',
     flex: 1,
     resizeMode: 'contain',
   },
   stagingViewOverlay: {
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   switchCameraButton: {
     justifyContent: 'center',
     paddingHorizontal: 8,
     paddingVertical: 2,
     position: 'absolute',
     right: 18,
   },
   switchCameraIcon: {
     color: 'white',
     fontSize: 36,
     textShadowColor: 'black',
     textShadowOffset: { width: 0, height: 1 },
     textShadowRadius: 1,
   },
 });
 
 const ConnectedCameraModal: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedCameraModal(props: BaseProps) {
     const dimensions = useSelector(state => state.dimensions);
     const deviceCameraInfo = useSelector(state => state.deviceCameraInfo);
     const deviceOrientation = useSelector(state => state.deviceOrientation);
     const foreground = useIsAppForegrounded();
     const overlayContext = React.useContext(OverlayContext);
     const dispatch = useDispatch();
 
     return (
       <CameraModal
         {...props}
         dimensions={dimensions}
         deviceCameraInfo={deviceCameraInfo}
         deviceOrientation={deviceOrientation}
         foreground={foreground}
         dispatch={dispatch}
         overlayContext={overlayContext}
       />
     );
   });
 
 export default ConnectedCameraModal;
diff --git a/native/media/media-gallery-media.react.js b/native/media/media-gallery-media.react.js
index a62a3d7ec..024d005a2 100644
--- a/native/media/media-gallery-media.react.js
+++ b/native/media/media-gallery-media.react.js
@@ -1,316 +1,310 @@
 // @flow
 
 import Icon from '@expo/vector-icons/FontAwesome.js';
 import MaterialIcon from '@expo/vector-icons/MaterialIcons.js';
 import LottieView from 'lottie-react-native';
 import * as React from 'react';
 import {
   TouchableOpacity,
   StyleSheet,
   View,
   Text,
   Platform,
   Animated,
   Easing,
 } from 'react-native';
 import Reanimated, {
   EasingNode as ReanimatedEasing,
 } from 'react-native-reanimated';
 import Video from 'react-native-video';
 
 import { type MediaLibrarySelection } from 'lib/types/media-types.js';
 
 import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js';
 import { type DimensionsInfo } from '../redux/dimensions-updater.react.js';
 import type { AnimatedValue } from '../types/react-native.js';
 import {
   AnimatedView,
   AnimatedImage,
   type AnimatedViewStyle,
   type AnimatedStyleObj,
 } from '../types/styles.js';
 
 const animatedSpec = {
   duration: 400,
   easing: Easing.inOut(Easing.ease),
   useNativeDriver: true,
 };
 const reanimatedSpec = {
   duration: 400,
   easing: ReanimatedEasing.inOut(ReanimatedEasing.ease),
 };
 
 type Props = {
   +selection: MediaLibrarySelection,
   +containerHeight: number,
   +queueModeActive: boolean,
   +isQueued: boolean,
   +setMediaQueued: (media: MediaLibrarySelection, isQueued: boolean) => void,
   +sendMedia: (media: MediaLibrarySelection) => void,
   +isFocused: boolean,
   +setFocus: (media: MediaLibrarySelection, isFocused: boolean) => void,
   +dimensions: DimensionsInfo,
 };
 class MediaGalleryMedia extends React.PureComponent<Props> {
-  // eslint-disable-next-line import/no-named-as-default-member
   focusProgress: Reanimated.Value = new Reanimated.Value(0);
   buttonsStyle: AnimatedViewStyle;
   mediaStyle: AnimatedStyleObj;
   checkProgress: AnimatedValue = new Animated.Value(0);
 
   constructor(props: Props) {
     super(props);
 
-    // eslint-disable-next-line import/no-named-as-default-member
     const buttonsScale = Reanimated.interpolateNode(this.focusProgress, {
       inputRange: [0, 1],
       outputRange: [1.3, 1],
     });
     this.buttonsStyle = {
       ...styles.buttons,
       opacity: this.focusProgress,
       transform: [{ scale: buttonsScale }],
       marginBottom: this.props.dimensions.bottomInset,
     };
 
-    // eslint-disable-next-line import/no-named-as-default-member
     const mediaScale = Reanimated.interpolateNode(this.focusProgress, {
       inputRange: [0, 1],
       outputRange: [1, 1.3],
     });
     this.mediaStyle = {
       transform: [{ scale: mediaScale }],
     };
   }
 
   static isActive(props: Props): boolean {
     return props.isFocused || props.isQueued;
   }
 
   componentDidMount() {
     const isActive = MediaGalleryMedia.isActive(this.props);
     if (isActive) {
-      // eslint-disable-next-line import/no-named-as-default-member
       Reanimated.timing(this.focusProgress, {
         ...reanimatedSpec,
         toValue: 1,
       }).start();
     }
 
     if (this.props.isQueued) {
       // When I updated to React Native 0.60, I also updated Lottie. At that
       // time, on iOS the last frame of the animation drops the circle outlining
       // the checkmark. This is a hack to get around that
       const maxValue = Platform.OS === 'ios' ? 0.99 : 1;
       Animated.timing(this.checkProgress, {
         ...animatedSpec,
         toValue: maxValue,
       }).start();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     const isActive = MediaGalleryMedia.isActive(this.props);
     const wasActive = MediaGalleryMedia.isActive(prevProps);
     if (isActive && !wasActive) {
-      // eslint-disable-next-line import/no-named-as-default-member
       Reanimated.timing(this.focusProgress, {
         ...reanimatedSpec,
         toValue: 1,
       }).start();
     } else if (!isActive && wasActive) {
-      // eslint-disable-next-line import/no-named-as-default-member
       Reanimated.timing(this.focusProgress, {
         ...reanimatedSpec,
         toValue: 0,
       }).start();
     }
 
     if (this.props.isQueued && !prevProps.isQueued) {
       // When I updated to React Native 0.60, I also updated Lottie. At that
       // time, on iOS the last frame of the animation drops the circle outlining
       // the checkmark. This is a hack to get around that
       const maxValue = Platform.OS === 'ios' ? 0.99 : 1;
       Animated.timing(this.checkProgress, {
         ...animatedSpec,
         toValue: maxValue,
       }).start();
     } else if (!this.props.isQueued && prevProps.isQueued) {
       Animated.timing(this.checkProgress, {
         ...animatedSpec,
         toValue: 0,
       }).start();
     }
   }
 
   render(): React.Node {
     const { selection, containerHeight } = this.props;
     const {
       uri,
       dimensions: { width, height },
       step,
     } = selection;
     const active = MediaGalleryMedia.isActive(this.props);
     const scaledWidth = height ? (width * containerHeight) / height : 0;
     const dimensionsStyle: { +height: number, +width: number } = {
       height: containerHeight,
       width: Math.max(Math.min(scaledWidth, this.props.dimensions.width), 150),
     };
 
     let buttons = null;
     const { queueModeActive } = this.props;
     if (!queueModeActive) {
       buttons = (
         <>
           <TouchableOpacity
             onPress={this.onPressSend}
             style={styles.sendButton}
             activeOpacity={0.6}
             disabled={!active}
           >
             <Icon name="send" style={styles.buttonIcon} />
             <Text style={styles.buttonText}>Send</Text>
           </TouchableOpacity>
           <TouchableOpacity
             onPress={this.onPressEnqueue}
             style={styles.enqueueButton}
             activeOpacity={0.6}
             disabled={!active}
           >
             <MaterialIcon name="add-to-photos" style={styles.buttonIcon} />
             <Text style={styles.buttonText}>Queue</Text>
           </TouchableOpacity>
         </>
       );
     }
 
     let media;
     const source = { uri };
     if (step === 'video_library') {
       let resizeMode = 'contain';
       if (Platform.OS === 'ios') {
         const [major, minor] = Platform.Version.split('.');
         if (parseInt(major, 10) === 14 && parseInt(minor, 10) < 2) {
           resizeMode = 'stretch';
         }
       }
       media = (
         <AnimatedView style={this.mediaStyle}>
           <Video
             source={source}
             repeat={true}
             muted={true}
             resizeMode={resizeMode}
             style={dimensionsStyle}
           />
         </AnimatedView>
       );
     } else {
       media = (
         <AnimatedImage
           source={source}
           style={[this.mediaStyle, dimensionsStyle]}
         />
       );
     }
 
     const overlay = (
       <AnimatedView style={this.buttonsStyle}>
         <LottieView
           source={require('../animations/check.json')}
           progress={this.checkProgress}
           style={styles.checkAnimation}
           resizeMode="cover"
         />
       </AnimatedView>
     );
 
     return (
       <View style={[styles.container, dimensionsStyle]}>
         <GestureTouchableOpacity
           onPress={this.onPressBackdrop}
           overlay={overlay}
           stickyActive={active}
         >
           {media}
         </GestureTouchableOpacity>
         <AnimatedView
           style={this.buttonsStyle}
           pointerEvents={active ? 'box-none' : 'none'}
         >
           {buttons}
         </AnimatedView>
       </View>
     );
   }
 
   onPressBackdrop: () => void = () => {
     if (this.props.isQueued) {
       this.props.setMediaQueued(this.props.selection, false);
     } else if (this.props.queueModeActive) {
       this.props.setMediaQueued(this.props.selection, true);
     } else {
       this.props.setFocus(this.props.selection, !this.props.isFocused);
     }
   };
 
   onPressSend: () => void = () => {
     this.props.sendMedia(this.props.selection);
   };
 
   onPressEnqueue: () => void = () => {
     this.props.setMediaQueued(this.props.selection, true);
   };
 }
 
 const buttonStyle = {
   flexDirection: 'row',
   alignItems: 'flex-start',
   margin: 10,
   borderRadius: 20,
   paddingLeft: 20,
   paddingRight: 20,
   paddingTop: 10,
   paddingBottom: 10,
 };
 const styles = StyleSheet.create({
   buttonIcon: {
     alignSelf: Platform.OS === 'android' ? 'center' : 'flex-end',
     color: 'white',
     fontSize: 18,
     marginRight: 6,
     paddingRight: 5,
   },
   buttonText: {
     color: 'white',
     fontSize: 16,
   },
   buttons: {
     alignItems: 'center',
     bottom: 0,
     justifyContent: 'center',
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   checkAnimation: {
     position: 'absolute',
     width: 128,
   },
   container: {
     flex: 1,
     overflow: 'hidden',
   },
   enqueueButton: {
     ...buttonStyle,
     backgroundColor: '#2A78E5',
   },
   sendButton: {
     ...buttonStyle,
     backgroundColor: '#7ED321',
     paddingLeft: 18,
   },
 });
 
 export default MediaGalleryMedia;
diff --git a/native/media/video-playback-modal.react.js b/native/media/video-playback-modal.react.js
index c57041a7f..0a1bf58b9 100644
--- a/native/media/video-playback-modal.react.js
+++ b/native/media/video-playback-modal.react.js
@@ -1,834 +1,833 @@
 // @flow
 
 import Icon from '@expo/vector-icons/MaterialCommunityIcons.js';
 import invariant from 'invariant';
 import * as React from 'react';
 import { useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import filesystem from 'react-native-fs';
 import {
   TapGestureHandler,
   type TapGestureEvent,
 } from 'react-native-gesture-handler';
 import * as Progress from 'react-native-progress';
 import Animated from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import Video from 'react-native-video';
 
 import { MediaCacheContext } from 'lib/components/media-cache-provider.react.js';
 import { useIsAppBackgroundedOrInactive } from 'lib/shared/lifecycle-utils.js';
 import type { MediaInfo } from 'lib/types/media-types.js';
 
 import { decryptMedia } from './encryption-utils.js';
 import { formatDuration } from './video-utils.js';
 import ConnectedStatusBar from '../connected-status-bar.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { derivedDimensionsInfoSelector } from '../selectors/dimensions-selectors.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js';
 import type {
   VerticalBounds,
   LayoutCoordinates,
 } from '../types/layout-types.js';
 import type { NativeMethods } from '../types/react-native.js';
 import { gestureJustEnded, animateTowards } from '../utils/animation-utils.js';
 
 type TouchableOpacityInstance = React.AbstractComponent<
   React.ElementConfig<typeof TouchableOpacity>,
   NativeMethods,
 >;
 
 type VideoRef = {
   +seek: number => mixed,
   ...
 };
 
-/* eslint-disable import/no-named-as-default-member */
 const {
   Extrapolate,
   and,
   or,
   block,
   cond,
   eq,
   ceil,
   call,
   set,
   add,
   sub,
   multiply,
   divide,
   not,
   max,
   min,
   lessThan,
   greaterThan,
   abs,
   interpolateNode,
   useValue,
   event,
 } = Animated;
 
 export type VideoPlaybackModalParams = {
   +presentedFrom: string,
   +mediaInfo: MediaInfo,
   +initialCoordinates: LayoutCoordinates,
   +verticalBounds: VerticalBounds,
   +item: ChatMultimediaMessageInfoItem,
 };
 
 type ReactNativeVideoOnProgressData = {
   +currentTime: number,
   +playableDuration: number,
   +seekableDuration: number,
 };
 
 type Props = {
   +navigation: AppNavigationProp<'VideoPlaybackModal'>,
   +route: NavigationRoute<'VideoPlaybackModal'>,
 };
 function VideoPlaybackModal(props: Props): React.Node {
   const { mediaInfo } = props.route.params;
 
   const { uri: videoUri, holder: blobURI, encryptionKey } = mediaInfo;
   const [videoSource, setVideoSource] = React.useState(
     videoUri ? { uri: videoUri } : undefined,
   );
 
   const mediaCache = React.useContext(MediaCacheContext);
 
   React.useEffect(() => {
     // skip for unencrypted videos
     if (!blobURI || !encryptionKey) {
       return undefined;
     }
 
     let isMounted = true;
     let uriToDispose;
     setVideoSource(undefined);
 
     const loadDecrypted = async () => {
       const cached = await mediaCache?.get(blobURI);
       if (cached && isMounted) {
         setVideoSource({ uri: cached });
         return;
       }
 
       const { result } = await decryptMedia(blobURI, encryptionKey, {
         destination: 'file',
       });
       if (result.success) {
         const { uri } = result;
         const cacheSetPromise = mediaCache?.set(blobURI, uri);
         if (isMounted) {
           uriToDispose = uri;
           setVideoSource({ uri });
         } else {
           // dispose of the temporary file immediately when unmounted
           // but wait for the cache to be set
           await cacheSetPromise;
           filesystem.unlink(uri);
         }
       }
     };
     void loadDecrypted();
 
     return () => {
       isMounted = false;
       if (uriToDispose) {
         // remove the temporary file created by decryptMedia
         filesystem.unlink(uriToDispose);
       }
     };
   }, [blobURI, encryptionKey, mediaCache]);
 
   const closeButtonX = useValue(-1);
   const closeButtonY = useValue(-1);
   const closeButtonWidth = useValue(-1);
   const closeButtonHeight = useValue(-1);
   const closeButtonRef =
     React.useRef<?React.ElementRef<TouchableOpacityInstance>>();
   const closeButton = closeButtonRef.current;
   const onCloseButtonLayoutCalledRef = React.useRef(false);
   const onCloseButtonLayout = React.useCallback(() => {
     onCloseButtonLayoutCalledRef.current = true;
   }, []);
   const onCloseButtonLayoutCalled = onCloseButtonLayoutCalledRef.current;
   React.useEffect(() => {
     if (!closeButton || !onCloseButtonLayoutCalled) {
       return;
     }
     closeButton.measure((x, y, width, height, pageX, pageY) => {
       closeButtonX.setValue(pageX);
       closeButtonY.setValue(pageY);
       closeButtonWidth.setValue(width);
       closeButtonHeight.setValue(height);
     });
   }, [
     closeButton,
     onCloseButtonLayoutCalled,
     closeButtonX,
     closeButtonY,
     closeButtonWidth,
     closeButtonHeight,
   ]);
 
   const footerX = useValue(-1);
   const footerY = useValue(-1);
   const footerWidth = useValue(-1);
   const footerHeight = useValue(-1);
   const footerRef = React.useRef<?React.ElementRef<typeof View>>();
   const footer = footerRef.current;
   const onFooterLayoutCalledRef = React.useRef(false);
   const onFooterLayout = React.useCallback(() => {
     onFooterLayoutCalledRef.current = true;
   }, []);
   const onFooterLayoutCalled = onFooterLayoutCalledRef.current;
   React.useEffect(() => {
     if (!footer || !onFooterLayoutCalled) {
       return;
     }
     footer.measure((x, y, width, height, pageX, pageY) => {
       footerX.setValue(pageX);
       footerY.setValue(pageY);
       footerWidth.setValue(width);
       footerHeight.setValue(height);
     });
   }, [
     footer,
     onFooterLayoutCalled,
     footerX,
     footerY,
     footerWidth,
     footerHeight,
   ]);
 
   const controlsShowing = useValue(1);
   const outsideButtons = React.useCallback(
     (x: Animated.Value, y: Animated.Value) =>
       and(
         or(
           eq(controlsShowing, 0),
           lessThan(x, closeButtonX),
           greaterThan(x, add(closeButtonX, closeButtonWidth)),
           lessThan(y, closeButtonY),
           greaterThan(y, add(closeButtonY, closeButtonHeight)),
         ),
         or(
           eq(controlsShowing, 0),
           lessThan(x, footerX),
           greaterThan(x, add(footerX, footerWidth)),
           lessThan(y, footerY),
           greaterThan(y, add(footerY, footerHeight)),
         ),
       ),
     [
       controlsShowing,
       closeButtonX,
       closeButtonY,
       closeButtonWidth,
       closeButtonHeight,
       footerX,
       footerY,
       footerWidth,
       footerHeight,
     ],
   );
 
   /* ===== START FADE CONTROL ANIMATION ===== */
 
   const singleTapState = useValue(-1);
   const singleTapX = useValue(0);
   const singleTapY = useValue(0);
 
   const singleTapEvent = React.useMemo(
     () =>
       event<TapGestureEvent>([
         {
           nativeEvent: {
             state: singleTapState,
             x: singleTapX,
             y: singleTapY,
           },
         },
       ]),
     [singleTapState, singleTapX, singleTapY],
   );
 
   const lastTapX = useValue(-1);
   const lastTapY = useValue(-1);
 
   const activeControlsOpacity = React.useMemo(
     () =>
       animateTowards(
         block([
           cond(
             and(
               gestureJustEnded(singleTapState),
               outsideButtons(lastTapX, lastTapY),
             ),
             set(controlsShowing, not(controlsShowing)),
           ),
           set(lastTapX, singleTapX),
           set(lastTapY, singleTapY),
           controlsShowing,
         ]),
         150,
       ),
     [
       singleTapState,
       controlsShowing,
       outsideButtons,
       lastTapX,
       lastTapY,
       singleTapX,
       singleTapY,
     ],
   );
 
   const [controlsEnabled, setControlsEnabled] = React.useState(true);
   const enableControls = React.useCallback(() => setControlsEnabled(true), []);
   const disableControls = React.useCallback(
     () => setControlsEnabled(false),
     [],
   );
 
   const previousOpacityCeiling = useValue(-1);
   const opacityCeiling = React.useMemo(
     () => ceil(activeControlsOpacity),
     [activeControlsOpacity],
   );
 
   const opacityJustChanged = React.useMemo(
     () =>
       cond(eq(previousOpacityCeiling, opacityCeiling), 0, [
         set(previousOpacityCeiling, opacityCeiling),
         1,
       ]),
     [previousOpacityCeiling, opacityCeiling],
   );
 
   const toggleControls = React.useMemo(
     () => [
       cond(
         and(eq(opacityJustChanged, 1), eq(opacityCeiling, 0)),
         call([], disableControls),
       ),
       cond(
         and(eq(opacityJustChanged, 1), eq(opacityCeiling, 1)),
         call([], enableControls),
       ),
     ],
     [opacityJustChanged, opacityCeiling, disableControls, enableControls],
   );
 
   /* ===== END FADE CONTROL ANIMATION ===== */
 
   const mediaDimensions = mediaInfo.dimensions;
   const screenDimensions = useSelector(derivedDimensionsInfoSelector);
 
   const frame = React.useMemo(
     () => ({
       width: screenDimensions.width,
       height: screenDimensions.safeAreaHeight,
     }),
     [screenDimensions],
   );
 
   const mediaDisplayDimensions = React.useMemo(() => {
     let { height: maxHeight, width: maxWidth } = frame;
     if (maxHeight > maxWidth) {
       maxHeight -= 100;
     } else {
       maxWidth -= 100;
     }
 
     if (
       mediaDimensions.height < maxHeight &&
       mediaDimensions.width < maxWidth
     ) {
       return mediaDimensions;
     }
 
     const heightRatio = maxHeight / mediaDimensions.height;
     const widthRatio = maxWidth / mediaDimensions.width;
 
     if (heightRatio < widthRatio) {
       return {
         height: maxHeight,
         width: mediaDimensions.width * heightRatio,
       };
     } else {
       return {
         width: maxWidth,
         height: mediaDimensions.height * widthRatio,
       };
     }
   }, [frame, mediaDimensions]);
 
   const centerX = useValue(frame.width / 2);
   const centerY = useValue(frame.height / 2 + screenDimensions.topInset);
   const frameWidth = useValue(frame.width);
   const frameHeight = useValue(frame.height);
   const imageWidth = useValue(mediaDisplayDimensions.width);
   const imageHeight = useValue(mediaDisplayDimensions.height);
 
   React.useEffect(() => {
     const { width: frameW, height: frameH } = frame;
     const { topInset } = screenDimensions;
     frameWidth.setValue(frameW);
     frameHeight.setValue(frameH);
 
     centerX.setValue(frameW / 2);
     centerY.setValue(frameH / 2 + topInset);
 
     const { width, height } = mediaDisplayDimensions;
     imageWidth.setValue(width);
     imageHeight.setValue(height);
   }, [
     screenDimensions,
     frame,
     mediaDisplayDimensions,
     frameWidth,
     frameHeight,
     centerX,
     centerY,
     imageWidth,
     imageHeight,
   ]);
 
   const left = React.useMemo(
     () => sub(centerX, divide(imageWidth, 2)),
     [centerX, imageWidth],
   );
   const top = React.useMemo(
     () => sub(centerY, divide(imageHeight, 2)),
     [centerY, imageHeight],
   );
 
   const { initialCoordinates } = props.route.params;
 
   const initialScale = React.useMemo(
     () => divide(initialCoordinates.width, imageWidth),
     [initialCoordinates, imageWidth],
   );
 
   const initialTranslateX = React.useMemo(
     () =>
       sub(
         initialCoordinates.x + initialCoordinates.width / 2,
         add(left, divide(imageWidth, 2)),
       ),
     [initialCoordinates, left, imageWidth],
   );
 
   const initialTranslateY = React.useMemo(
     () =>
       sub(
         initialCoordinates.y + initialCoordinates.height / 2,
         add(top, divide(imageHeight, 2)),
       ),
     [initialCoordinates, top, imageHeight],
   );
 
   // The all-important outputs
   const curScale = useValue(1);
   const curX = useValue(0);
   const curY = useValue(0);
   const curBackdropOpacity = useValue(1);
 
   const progressiveOpacity = React.useMemo(
     () =>
       max(
         min(
           sub(1, abs(divide(curX, frameWidth))),
           sub(1, abs(divide(curY, frameHeight))),
         ),
         0,
       ),
     [curX, curY, frameWidth, frameHeight],
   );
 
   const updates = React.useMemo(
     () => [toggleControls, set(curBackdropOpacity, progressiveOpacity)],
     [curBackdropOpacity, progressiveOpacity, toggleControls],
   );
   const updatedScale = React.useMemo(
     () => [updates, curScale],
     [updates, curScale],
   );
   const updatedCurX = React.useMemo(() => [updates, curX], [updates, curX]);
   const updatedCurY = React.useMemo(() => [updates, curY], [updates, curY]);
   const updatedBackdropOpacity = React.useMemo(
     () => [updates, curBackdropOpacity],
     [updates, curBackdropOpacity],
   );
 
   const updatedActiveControlsOpacity = React.useMemo(
     () => block([updates, activeControlsOpacity]),
     [updates, activeControlsOpacity],
   );
 
   const overlayContext = React.useContext(OverlayContext);
   invariant(overlayContext, 'VideoPlaybackModal should have OverlayContext');
   const navigationProgress = overlayContext.position;
 
   const reverseNavigationProgress = React.useMemo(
     () => sub(1, navigationProgress),
     [navigationProgress],
   );
 
   const dismissalButtonOpacity = interpolateNode(updatedBackdropOpacity, {
     inputRange: [0.95, 1],
     outputRange: [0, 1],
     extrapolate: Extrapolate.CLAMP,
   });
   const controlsOpacity = multiply(
     navigationProgress,
     dismissalButtonOpacity,
     updatedActiveControlsOpacity,
   );
 
   const scale = React.useMemo(
     () =>
       add(
         multiply(reverseNavigationProgress, initialScale),
         multiply(navigationProgress, updatedScale),
       ),
     [reverseNavigationProgress, initialScale, navigationProgress, updatedScale],
   );
 
   const x = React.useMemo(
     () =>
       add(
         multiply(reverseNavigationProgress, initialTranslateX),
         multiply(navigationProgress, updatedCurX),
       ),
     [
       reverseNavigationProgress,
       initialTranslateX,
       navigationProgress,
       updatedCurX,
     ],
   );
 
   const y = React.useMemo(
     () =>
       add(
         multiply(reverseNavigationProgress, initialTranslateY),
         multiply(navigationProgress, updatedCurY),
       ),
     [
       reverseNavigationProgress,
       initialTranslateY,
       navigationProgress,
       updatedCurY,
     ],
   );
 
   const backdropOpacity = React.useMemo(
     () => multiply(navigationProgress, updatedBackdropOpacity),
     [navigationProgress, updatedBackdropOpacity],
   );
 
   const imageContainerOpacity = React.useMemo(
     () =>
       interpolateNode(navigationProgress, {
         inputRange: [0, 0.1],
         outputRange: [0, 1],
         extrapolate: Extrapolate.CLAMP,
       }),
     [navigationProgress],
   );
 
   const { verticalBounds } = props.route.params;
   const videoContainerStyle = React.useMemo(() => {
     const { height, width } = mediaDisplayDimensions;
     const { height: frameH, width: frameW } = frame;
 
     return {
       height,
       width,
       marginTop:
         (frameH - height) / 2 + screenDimensions.topInset - verticalBounds.y,
       marginLeft: (frameW - width) / 2,
       opacity: imageContainerOpacity,
       transform: [{ translateX: x }, { translateY: y }, { scale: scale }],
     };
   }, [
     mediaDisplayDimensions,
     frame,
     screenDimensions.topInset,
     verticalBounds.y,
     imageContainerOpacity,
     x,
     y,
     scale,
   ]);
 
   const styles = useStyles(unboundStyles);
 
   const [paused, setPaused] = useState(false);
   const [percentElapsed, setPercentElapsed] = useState(0);
   const [spinnerVisible, setSpinnerVisible] = useState(true);
   const [timeElapsed, setTimeElapsed] = useState('0:00');
   const [totalDuration, setTotalDuration] = useState('0:00');
   const videoRef = React.useRef<?VideoRef>();
 
   const backgroundedOrInactive = useIsAppBackgroundedOrInactive();
   React.useEffect(() => {
     if (backgroundedOrInactive) {
       setPaused(true);
       controlsShowing.setValue(1);
     }
   }, [backgroundedOrInactive, controlsShowing]);
 
   const { navigation } = props;
 
   const togglePlayback = React.useCallback(() => {
     setPaused(!paused);
   }, [paused]);
 
   const resetVideo = React.useCallback(() => {
     invariant(videoRef.current, 'videoRef.current should be set in resetVideo');
     videoRef.current.seek(0);
   }, []);
 
   const progressCallback = React.useCallback(
     (res: ReactNativeVideoOnProgressData) => {
       setTimeElapsed(formatDuration(res.currentTime));
       setTotalDuration(formatDuration(res.seekableDuration));
       setPercentElapsed(
         Math.ceil((res.currentTime / res.seekableDuration) * 100),
       );
     },
     [],
   );
 
   const readyForDisplayCallback = React.useCallback(() => {
     setSpinnerVisible(false);
   }, []);
 
   const statusBar = overlayContext.isDismissing ? null : (
     <ConnectedStatusBar hidden />
   );
 
   const backdropStyle = React.useMemo(
     () => ({ opacity: backdropOpacity }),
     [backdropOpacity],
   );
 
   const contentContainerStyle = React.useMemo(() => {
     const fullScreenHeight = screenDimensions.height;
     const bottom = fullScreenHeight - verticalBounds.y - verticalBounds.height;
 
     // margin will clip, but padding won't
     const verticalStyle = overlayContext.isDismissing
       ? { marginTop: verticalBounds.y, marginBottom: bottom }
       : { paddingTop: verticalBounds.y, paddingBottom: bottom };
     return [styles.contentContainer, verticalStyle];
   }, [
     screenDimensions.height,
     verticalBounds.y,
     verticalBounds.height,
     overlayContext.isDismissing,
     styles.contentContainer,
   ]);
 
   let controls;
   if (videoSource) {
     controls = (
       <Animated.View
         style={[styles.controls, { opacity: controlsOpacity }]}
         pointerEvents={controlsEnabled ? 'box-none' : 'none'}
       >
         <SafeAreaView style={styles.fill}>
           <View style={styles.fill}>
             <View style={styles.header}>
               <View style={styles.closeButton}>
                 <TouchableOpacity
                   onPress={navigation.goBackOnce}
                   ref={(closeButtonRef: any)}
                   onLayout={onCloseButtonLayout}
                 >
                   <Icon name="close" size={30} style={styles.iconButton} />
                 </TouchableOpacity>
               </View>
             </View>
             <View
               style={styles.footer}
               ref={footerRef}
               onLayout={onFooterLayout}
             >
               <TouchableOpacity
                 onPress={togglePlayback}
                 style={styles.playPauseButton}
               >
                 <Icon
                   name={paused ? 'play' : 'pause'}
                   size={28}
                   style={styles.iconButton}
                 />
               </TouchableOpacity>
               <View style={styles.progressBar}>
                 <Progress.Bar
                   progress={percentElapsed / 100}
                   height={4}
                   width={null}
                   color={styles.progressBar.color}
                   style={styles.expand}
                 />
               </View>
               <Text style={styles.durationText}>
                 {timeElapsed} / {totalDuration}
               </Text>
             </View>
           </View>
         </SafeAreaView>
       </Animated.View>
     );
   }
 
   let spinner;
   if (spinnerVisible) {
     spinner = (
       <Progress.Circle
         size={80}
         indeterminate={true}
         color="white"
         style={styles.progressCircle}
       />
     );
   }
 
   let videoPlayer;
   if (videoSource) {
     videoPlayer = (
       <Video
         source={videoSource}
         ref={videoRef}
         style={styles.backgroundVideo}
         paused={paused}
         onProgress={progressCallback}
         onEnd={resetVideo}
         onReadyForDisplay={readyForDisplayCallback}
       />
     );
   }
 
   return (
     <TapGestureHandler onHandlerStateChange={singleTapEvent} minPointers={1}>
       <Animated.View style={styles.expand}>
         {statusBar}
         <Animated.View style={[styles.backdrop, backdropStyle]} />
         <View style={contentContainerStyle}>
           {spinner}
           <Animated.View style={videoContainerStyle}>
             {videoPlayer}
           </Animated.View>
         </View>
         {controls}
       </Animated.View>
     </TapGestureHandler>
   );
 }
 
 const unboundStyles = {
   expand: {
     flex: 1,
   },
   backgroundVideo: {
     position: 'absolute',
     top: 0,
     left: 0,
     bottom: 0,
     right: 0,
   },
   footer: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
     backgroundColor: 'rgba(52,52,52,0.6)',
     height: 76,
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: 8,
   },
   header: {
     position: 'absolute',
     left: 0,
     right: 0,
     top: 0,
   },
   playPauseButton: {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
   closeButton: {
     paddingTop: 10,
     paddingRight: 20,
     justifyContent: 'flex-end',
     alignItems: 'center',
     flexDirection: 'row',
     height: 100,
   },
   progressBar: {
     flex: 1,
     position: 'relative',
     alignItems: 'center',
     justifyContent: 'center',
     color: 'white',
     paddingRight: 10,
     display: 'flex',
     flexDirection: 'row',
   },
   progressCircle: {
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
   },
   iconButton: {
     marginHorizontal: 10,
     color: 'white',
   },
   durationText: {
     color: 'white',
     fontSize: 11,
     width: 70,
   },
   backdrop: {
     backgroundColor: 'black',
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
   controls: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
     top: 0,
   },
   contentContainer: {
     flex: 1,
     overflow: 'hidden',
   },
   fill: {
     flex: 1,
   },
 };
 
 export default VideoPlaybackModal;
diff --git a/native/navigation/overlay-navigator.react.js b/native/navigation/overlay-navigator.react.js
index a6480e885..b2f2d0833 100644
--- a/native/navigation/overlay-navigator.react.js
+++ b/native/navigation/overlay-navigator.react.js
@@ -1,561 +1,559 @@
 // @flow
 
 import type {
   StackNavigationState,
   NavigatorPropsBase,
   ExtraNavigatorPropsBase,
   CreateNavigator,
   StackNavigationProp,
   ParamListBase,
   StackNavigationHelpers,
   ScreenListeners,
   StackRouterOptions,
   Descriptor,
   Route,
 } from '@react-navigation/core';
 import {
   useNavigationBuilder,
   createNavigatorFactory,
   NavigationHelpersContext,
 } from '@react-navigation/native';
 import { TransitionPresets } from '@react-navigation/stack';
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import Animated, { EasingNode } from 'react-native-reanimated';
 
 import { values } from 'lib/utils/objects.js';
 
 import {
   OverlayContext,
   type VisibleOverlay,
   type ScrollBlockingModalStatus,
 } from './overlay-context.js';
 import OverlayRouter from './overlay-router.js';
 import type {
   OverlayRouterExtraNavigationHelpers,
   OverlayRouterNavigationAction,
 } from './overlay-router.js';
 import { scrollBlockingModals, TabNavigatorRouteName } from './route-names.js';
 import { isMessageTooltipKey } from '../chat/utils.js';
 
 export type OverlayNavigationHelpers<ParamList: ParamListBase = ParamListBase> =
   {
     ...$Exact<StackNavigationHelpers<ParamList, {}>>,
     ...OverlayRouterExtraNavigationHelpers,
     ...
   };
 
 export type OverlayNavigationProp<
   ParamList: ParamListBase = ParamListBase,
   RouteName: $Keys<ParamList> = $Keys<ParamList>,
 > = {
   ...StackNavigationProp<ParamList, RouteName, {}, {}>,
   ...OverlayRouterExtraNavigationHelpers,
 };
 
-/* eslint-disable import/no-named-as-default-member */
 const { Value, timing, cond, call, lessOrEq, block } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 type Scene = {
   +route: Route<>,
   +descriptor: Descriptor<OverlayNavigationHelpers<>, {}>,
   +context: {
     +position: Value,
     +isDismissing: boolean,
   },
   +ordering: {
     +routeIndex: number,
   },
 };
 
 type SceneData = $ReadOnly<{
   ...Scene,
   +context: $ReadOnly<{
     ...$PropertyType<Scene, 'context'>,
     +visibleOverlays: $ReadOnlyArray<VisibleOverlay>,
     +scrollBlockingModalStatus: ScrollBlockingModalStatus,
     +setScrollBlockingModalStatus: ScrollBlockingModalStatus => void,
     +resetScrollBlockingModalStatus: () => void,
   }>,
   +ordering: $ReadOnly<{
     ...$PropertyType<Scene, 'ordering'>,
     +creationTime: number,
   }>,
   +listeners: $ReadOnlyArray<Animated.Node>,
 }>;
 
 type Props = $Exact<
   NavigatorPropsBase<
     {},
     ScreenListeners<StackNavigationState, {}>,
     OverlayNavigationHelpers<>,
   >,
 >;
 const OverlayNavigator = React.memo<Props>(
   ({ initialRouteName, children, screenOptions, screenListeners }: Props) => {
     const { state, descriptors, navigation } = useNavigationBuilder<
       StackNavigationState,
       OverlayRouterNavigationAction,
       {},
       StackRouterOptions,
       OverlayNavigationHelpers<>,
       {},
       ExtraNavigatorPropsBase,
     >(OverlayRouter, {
       children,
       screenOptions,
       screenListeners,
       initialRouteName,
     });
     const curIndex = state.index;
 
     const positionRefs = React.useRef<{ [string]: Animated.Value }>({});
     const positions = positionRefs.current;
 
     const firstRenderRef = React.useRef(true);
     React.useEffect(() => {
       firstRenderRef.current = false;
     }, [firstRenderRef]);
     const firstRender = firstRenderRef.current;
 
     const { routes } = state;
     const scenes = React.useMemo(
       () =>
         routes.map((route, routeIndex) => {
           const descriptor = descriptors[route.key];
           invariant(
             descriptor,
             `OverlayNavigator could not find descriptor for ${route.key}`,
           );
           if (!positions[route.key]) {
             positions[route.key] = new Value(firstRender ? 1 : 0);
           }
           return {
             route,
             descriptor,
             context: {
               position: positions[route.key],
               isDismissing: curIndex < routeIndex,
             },
             ordering: {
               routeIndex,
             },
           };
         }),
       // We don't include descriptors here because they can change on every
       // render. We know that they should only substantially change if something
       // about the underlying route has changed
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [positions, routes, curIndex],
     );
 
     const prevScenesRef = React.useRef<?$ReadOnlyArray<Scene>>();
     const prevScenes = prevScenesRef.current;
 
     const visibleOverlayEntryForNewScene = (scene: Scene) => {
       const { route } = scene;
       if (route.name === TabNavigatorRouteName) {
         // We don't consider the TabNavigator at the bottom to be an overlay
         return undefined;
       }
       const presentedFrom =
         typeof route.params?.presentedFrom === 'string'
           ? route.params.presentedFrom
           : undefined;
       return {
         routeKey: route.key,
         routeName: route.name,
         position: positions[route.key],
         presentedFrom,
       };
     };
 
     const visibleOverlaysRef = React.useRef<?$ReadOnlyArray<VisibleOverlay>>();
     if (!visibleOverlaysRef.current) {
       visibleOverlaysRef.current = scenes
         .map(visibleOverlayEntryForNewScene)
         .filter(Boolean);
     }
     let visibleOverlays = visibleOverlaysRef.current;
 
     // The scrollBlockingModalStatus state gets incorporated into the
     // OverlayContext, but it's global to the navigator rather than local to
     // each screen. Note that we also include the setter in OverlayContext. We
     // do this so that screens can freeze ScrollViews as quickly as possible to
     // avoid drags after onLongPress is triggered
     const getScrollBlockingModalStatus = (
       data: $ReadOnlyArray<Scene | SceneData>,
     ) => {
       let status = 'closed';
       for (const scene of data) {
         if (!scrollBlockingModals.includes(scene.route.name)) {
           continue;
         }
         if (!scene.context.isDismissing) {
           status = 'open';
           break;
         }
         status = 'closing';
       }
       return status;
     };
     const [scrollBlockingModalStatus, setScrollBlockingModalStatus] =
       React.useState(() => getScrollBlockingModalStatus(scenes));
 
     const resetScrollBlockingModalStatus = React.useCallback(() => {
       setScrollBlockingModalStatus(
         getScrollBlockingModalStatus(prevScenesRef.current ?? []),
       );
     }, []);
 
     const sceneDataForNewScene = (scene: Scene) => ({
       ...scene,
       context: {
         ...scene.context,
         visibleOverlays,
         scrollBlockingModalStatus,
         setScrollBlockingModalStatus,
         resetScrollBlockingModalStatus,
       },
       ordering: {
         ...scene.ordering,
         creationTime: Date.now(),
       },
       listeners: [],
     });
 
     // We track two previous states of scrollBlockingModalStatus via refs. We
     // need two because we expose setScrollBlockingModalStatus to screens. We
     // track the previous sceneData-determined value separately so that we only
     // overwrite the screen-determined value with the sceneData-determined value
     // when the latter actually changes
     const prevScrollBlockingModalStatusRef = React.useRef(
       scrollBlockingModalStatus,
     );
     const prevScrollBlockingModalStatus =
       prevScrollBlockingModalStatusRef.current;
     const prevScrollBlockingModalStatusFromSceneDataRef = React.useRef(
       scrollBlockingModalStatus,
     );
     const prevScrollBlockingModalStatusFromSceneData =
       prevScrollBlockingModalStatusFromSceneDataRef.current;
 
     // We need state to continue rendering screens while they are dismissing
     const [sceneData, setSceneData] = React.useState(() => {
       const newSceneData: { [string]: SceneData } = {};
       for (const scene of scenes) {
         const { key } = scene.route;
         newSceneData[key] = sceneDataForNewScene(scene);
       }
       return newSceneData;
     });
     const prevSceneDataRef = React.useRef(sceneData);
     const prevSceneData = prevSceneDataRef.current;
 
     // We need to initiate animations in useEffect blocks, but because we
     // setState within render we might have multiple renders before the
     // useEffect triggers. So we cache whether or not new animations should be
     // started in this ref
     const pendingAnimationsRef = React.useRef<{ [key: string]: number }>({});
     const queueAnimation = (key: string, toValue: number) => {
       pendingAnimationsRef.current = {
         ...pendingAnimationsRef.current,
         [key]: toValue,
       };
     };
 
     // This block keeps sceneData updated when our props change. It's the
     // hook equivalent of getDerivedStateFromProps
     // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
     const updatedSceneData = { ...sceneData };
     let sceneDataChanged = false;
     if (prevScenes && scenes !== prevScenes) {
       const currentKeys = new Set<string>();
       for (const scene of scenes) {
         const { key } = scene.route;
         currentKeys.add(key);
 
         let data = updatedSceneData[key];
         if (!data) {
           // A new route has been pushed
           const newVisibleOverlayEntry = visibleOverlayEntryForNewScene(scene);
           if (newVisibleOverlayEntry) {
             visibleOverlays = [...visibleOverlays, newVisibleOverlayEntry];
           }
           updatedSceneData[key] = sceneDataForNewScene(scene);
           sceneDataChanged = true;
           queueAnimation(key, 1);
           continue;
         }
 
         let dataChanged = false;
         if (scene.route !== data.route) {
           data = { ...data, route: scene.route };
           dataChanged = true;
         }
         if (scene.descriptor !== data.descriptor) {
           data = { ...data, descriptor: scene.descriptor };
           // We don't set dataChanged here because descriptors get recomputed on
           // every render, which means we could get an infinite loop. However,
           // we want to update the descriptor whenever anything else changes, so
           // that if and when our scene is dismissed, the sceneData has the most
           // recent descriptor
         }
         if (scene.context.isDismissing !== data.context.isDismissing) {
           data = { ...data, context: { ...data.context, ...scene.context } };
           dataChanged = true;
         }
         if (scene.ordering.routeIndex !== data.ordering.routeIndex) {
           data = { ...data, ordering: { ...data.ordering, ...scene.ordering } };
           dataChanged = true;
         }
 
         if (dataChanged) {
           // Something about an existing route has changed
           updatedSceneData[key] = data;
           sceneDataChanged = true;
         }
       }
 
       for (let i = 0; i < prevScenes.length; i++) {
         const scene = prevScenes[i];
         const { key } = scene.route;
         if (currentKeys.has(key)) {
           continue;
         }
         currentKeys.add(key);
         const data = updatedSceneData[key];
         invariant(data, `should have sceneData for dismissed key ${key}`);
 
         if (!visibleOverlayEntryForNewScene(scene)) {
           // This should only happen if TabNavigator gets dismissed
           // TabNavigator doesn't normally ever get dismissed, but hot reload
           // can cause that to happen. We don't need to animate TabNavigator
           // closed, and in fact we would crash if we tried. So we short-circuit
           // the logic below
           delete updatedSceneData[key];
           sceneDataChanged = true;
           continue;
         }
 
         // A route just got dismissed
         // We'll watch the animation to determine when to clear the screen
         const { position } = data.context;
         invariant(position, `should have position for dismissed key ${key}`);
         updatedSceneData[key] = {
           ...data,
           context: {
             ...data.context,
             isDismissing: true,
           },
           listeners: [
             cond(
               lessOrEq(position, 0),
               call([], () => {
                 // This gets called when the scene is no longer visible and
                 // handles cleaning up our data structures to remove it
                 const curVisibleOverlays = visibleOverlaysRef.current;
                 invariant(
                   curVisibleOverlays,
                   'visibleOverlaysRef should be set',
                 );
                 const newVisibleOverlays = curVisibleOverlays.filter(
                   (overlay: VisibleOverlay) => overlay.routeKey !== key,
                 );
                 if (newVisibleOverlays.length === curVisibleOverlays.length) {
                   return;
                 }
                 visibleOverlaysRef.current = newVisibleOverlays;
                 setSceneData(curSceneData => {
                   const newSceneData: { [string]: SceneData } = {};
                   for (const sceneKey in curSceneData) {
                     if (sceneKey === key) {
                       continue;
                     }
                     newSceneData[sceneKey] = {
                       ...curSceneData[sceneKey],
                       context: {
                         ...curSceneData[sceneKey].context,
                         visibleOverlays: newVisibleOverlays,
                       },
                     };
                   }
                   return newSceneData;
                 });
               }),
             ),
           ],
         };
         sceneDataChanged = true;
         queueAnimation(key, 0);
       }
     }
 
     if (visibleOverlays !== visibleOverlaysRef.current) {
       // This indicates we have pushed a new route. Let's make sure every
       // sceneData has the updated visibleOverlays
       for (const sceneKey in updatedSceneData) {
         updatedSceneData[sceneKey] = {
           ...updatedSceneData[sceneKey],
           context: {
             ...updatedSceneData[sceneKey].context,
             visibleOverlays,
           },
         };
       }
       visibleOverlaysRef.current = visibleOverlays;
       sceneDataChanged = true;
     }
 
     const pendingAnimations = pendingAnimationsRef.current;
     React.useEffect(() => {
       if (Object.keys(pendingAnimations).length === 0) {
         return;
       }
       for (const key in pendingAnimations) {
         const toValue = pendingAnimations[key];
         const position = positions[key];
         let duration = 150;
         if (isMessageTooltipKey(key)) {
           const navigationTransitionSpec =
             toValue === 0
               ? TransitionPresets.DefaultTransition.transitionSpec.close
               : TransitionPresets.DefaultTransition.transitionSpec.open;
           duration =
             (navigationTransitionSpec.animation === 'timing' &&
               navigationTransitionSpec.config.duration) ||
             400;
         }
         invariant(position, `should have position for animating key ${key}`);
         timing(position, {
           duration,
           easing: EasingNode.inOut(EasingNode.ease),
           toValue,
         }).start();
       }
       pendingAnimationsRef.current = {};
     }, [positions, pendingAnimations]);
 
     // If sceneData changes, we update scrollBlockingModalStatus based on it,
     // both in state and within the individual sceneData contexts.
     // If sceneData doesn't change,
     // it's still possible for scrollBlockingModalStatus to change via the
     // setScrollBlockingModalStatus callback we expose via context
     let newScrollBlockingModalStatus;
     if (sceneDataChanged || sceneData !== prevSceneData) {
       const statusFromSceneData = getScrollBlockingModalStatus(
         values(updatedSceneData),
       );
       if (
         statusFromSceneData !== scrollBlockingModalStatus &&
         statusFromSceneData !== prevScrollBlockingModalStatusFromSceneData
       ) {
         newScrollBlockingModalStatus = statusFromSceneData;
       }
       prevScrollBlockingModalStatusFromSceneDataRef.current =
         statusFromSceneData;
     }
     if (
       !newScrollBlockingModalStatus &&
       scrollBlockingModalStatus !== prevScrollBlockingModalStatus
     ) {
       newScrollBlockingModalStatus = scrollBlockingModalStatus;
     }
     if (newScrollBlockingModalStatus) {
       if (newScrollBlockingModalStatus !== scrollBlockingModalStatus) {
         setScrollBlockingModalStatus(newScrollBlockingModalStatus);
       }
       for (const key in updatedSceneData) {
         const data = updatedSceneData[key];
         updatedSceneData[key] = {
           ...data,
           context: {
             ...data.context,
             scrollBlockingModalStatus: newScrollBlockingModalStatus,
           },
         };
       }
       sceneDataChanged = true;
     }
 
     if (sceneDataChanged) {
       setSceneData(updatedSceneData);
     }
 
     // Usually this would be done in an effect,
     // but calling setState from the body
     // of a hook causes the hook to rerender before triggering effects. To avoid
     // infinite loops we make sure to set our prev values after we finish
     // comparing them
     prevScenesRef.current = scenes;
     prevSceneDataRef.current = sceneDataChanged ? updatedSceneData : sceneData;
     prevScrollBlockingModalStatusRef.current = newScrollBlockingModalStatus
       ? newScrollBlockingModalStatus
       : scrollBlockingModalStatus;
 
     const sceneList = values(updatedSceneData).sort((a, b) => {
       const routeIndexDifference =
         a.ordering.routeIndex - b.ordering.routeIndex;
       if (routeIndexDifference) {
         return routeIndexDifference;
       }
       return a.ordering.creationTime - b.ordering.creationTime;
     });
 
     const screens = sceneList.map(scene => {
       const { route, descriptor, context, listeners } = scene;
       const { render } = descriptor;
 
       const pressable = !context.isDismissing && !route.params?.preventPresses;
       const pointerEvents = pressable ? 'auto' : 'none';
 
       // These listeners are used to clear routes after they finish dismissing
       const listenerCode =
         listeners.length > 0 ? <Animated.Code exec={block(listeners)} /> : null;
       return (
         <OverlayContext.Provider value={context} key={route.key}>
           <View style={styles.scene} pointerEvents={pointerEvents}>
             {render()}
           </View>
           {listenerCode}
         </OverlayContext.Provider>
       );
     });
 
     return (
       <NavigationHelpersContext.Provider value={navigation}>
         <View style={styles.container}>{screens}</View>
       </NavigationHelpersContext.Provider>
     );
   },
 );
 OverlayNavigator.displayName = 'OverlayNavigator';
 const createOverlayNavigator: CreateNavigator<
   StackNavigationState,
   {},
   {},
   ExtraNavigatorPropsBase,
 > = createNavigatorFactory<
   StackNavigationState,
   {},
   {},
   OverlayNavigationHelpers<>,
   ExtraNavigatorPropsBase,
 >(OverlayNavigator);
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
   scene: {
     bottom: 0,
     left: 0,
     position: 'absolute',
     right: 0,
     top: 0,
   },
 });
 
 export { createOverlayNavigator };
diff --git a/native/navigation/tab-bar.react.js b/native/navigation/tab-bar.react.js
index 208ef0867..2bec1abb6 100644
--- a/native/navigation/tab-bar.react.js
+++ b/native/navigation/tab-bar.react.js
@@ -1,150 +1,146 @@
 // @flow
 
 import { BottomTabBar } from '@react-navigation/bottom-tabs';
 import * as React from 'react';
 import { Platform, View, StyleSheet } from 'react-native';
 import Animated, { EasingNode } from 'react-native-reanimated';
 import { useSafeArea } from 'react-native-safe-area-context';
 
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import {
   KeyboardContext,
   type KeyboardState,
 } from '../keyboard/keyboard-state.js';
 import { updateDimensionsActiveType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import type { LayoutEvent } from '../types/react-native.js';
 
-/* eslint-disable import/no-named-as-default-member */
 const { Value, timing, interpolateNode } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 const tabBarAnimationDuration = 200;
 
 type Props = React.ElementConfig<typeof BottomTabBar>;
 function TabBar(props: Props) {
   const tabBarVisibleRef = React.useRef<?Value>();
   if (!tabBarVisibleRef.current) {
     tabBarVisibleRef.current = new Value(1);
   }
   const tabBarVisible = tabBarVisibleRef.current;
 
   const keyboardState = React.useContext(KeyboardContext);
   const shouldHideTabBar = keyboardState?.mediaGalleryOpen;
 
   const prevKeyboardStateRef = React.useRef<?KeyboardState>();
   React.useEffect(() => {
     prevKeyboardStateRef.current = keyboardState;
   }, [keyboardState]);
   const prevKeyboardState = prevKeyboardStateRef.current;
 
   const setTabBar = React.useCallback(
     (toValue: number) => {
       const keyboardIsShowing = keyboardState && keyboardState.keyboardShowing;
       const keyboardWasShowing =
         prevKeyboardState && prevKeyboardState.keyboardShowing;
       if (keyboardIsShowing === keyboardWasShowing) {
         tabBarVisible.setValue(toValue);
         return;
       }
       timing(tabBarVisible, {
         toValue,
         duration: tabBarAnimationDuration,
         easing: EasingNode.inOut(EasingNode.ease),
       }).start();
     },
     [keyboardState, prevKeyboardState, tabBarVisible],
   );
 
   const prevShouldHideTabBarRef = React.useRef<?boolean>(false);
   React.useEffect(() => {
     const prevShouldHideTabBar = prevShouldHideTabBarRef.current;
     if (shouldHideTabBar && !prevShouldHideTabBar) {
       setTabBar(0);
     } else if (!shouldHideTabBar && prevShouldHideTabBar) {
       setTabBar(1);
     }
     prevShouldHideTabBarRef.current = shouldHideTabBar;
   }, [shouldHideTabBar, setTabBar]);
 
   const reduxTabBarHeight = useSelector(state => state.dimensions.tabBarHeight);
   const dispatch = useDispatch();
   const setReduxTabBarHeight = React.useCallback(
     (height: number) => {
       if (height === reduxTabBarHeight) {
         return;
       }
       dispatch({
         type: updateDimensionsActiveType,
         payload: { tabBarHeight: height },
       });
     },
     [reduxTabBarHeight, dispatch],
   );
 
   const [tabBarHeight, setTabBarHeight] = React.useState(0);
   const insets = useSafeArea();
   const handleLayout = React.useCallback(
     (e: LayoutEvent) => {
       const rawHeight = Math.round(e.nativeEvent.layout.height);
       if (rawHeight > 100 || rawHeight <= 0) {
         return;
       }
       if (Platform.OS === 'android') {
         setTabBarHeight(rawHeight);
       }
       const height = rawHeight - insets.bottom;
       if (height > 0) {
         setReduxTabBarHeight(height);
       }
     },
     [setTabBarHeight, setReduxTabBarHeight, insets],
   );
 
   const containerHeight = React.useMemo(
     () =>
       interpolateNode(tabBarVisible, {
         inputRange: [0, 1],
         outputRange: [0, tabBarHeight],
       }),
     [tabBarVisible, tabBarHeight],
   );
   const containerStyle = React.useMemo(
     () => ({
       height: tabBarHeight ? containerHeight : undefined,
       ...styles.container,
     }),
     [tabBarHeight, containerHeight],
   );
 
   if (Platform.OS !== 'android') {
     return (
       <View onLayout={handleLayout} style={styles.container}>
         <BottomTabBar {...props} />
       </View>
     );
   }
 
   return (
     <Animated.View style={containerStyle}>
       <View onLayout={handleLayout} style={styles.container}>
         <BottomTabBar {...props} />
       </View>
     </Animated.View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     bottom: 0,
     left: 0,
     right: 0,
   },
 });
 
-// This is a render prop, not a component
-// eslint-disable-next-line react/display-name
 const tabBar = (props: Props): React.Node => <TabBar {...props} />;
 
 export { tabBarAnimationDuration, tabBar };
diff --git a/native/navigation/tab-navigator.react.js b/native/navigation/tab-navigator.react.js
index 1920dfcf6..3e7062f4f 100644
--- a/native/navigation/tab-navigator.react.js
+++ b/native/navigation/tab-navigator.react.js
@@ -1,241 +1,237 @@
 // @flow
 
 import { BottomTabView } from '@react-navigation/bottom-tabs';
 import type {
   BottomTabNavigationEventMap,
   BottomTabOptions,
   CreateNavigator,
   TabNavigationState,
   ParamListBase,
   BottomTabNavigationHelpers,
   BottomTabNavigationProp,
   ExtraBottomTabNavigatorProps,
   BottomTabNavigatorProps,
   TabAction,
   TabRouterOptions,
 } from '@react-navigation/core';
 import {
   createNavigatorFactory,
   useNavigationBuilder,
 } from '@react-navigation/native';
 import * as React from 'react';
 
 import { unreadCount } from 'lib/selectors/thread-selectors.js';
 
 import CommunityDrawerButton from './community-drawer-button.react.js';
 import type { CommunityDrawerNavigationProp } from './community-drawer-navigator.react.js';
 import {
   CalendarRouteName,
   ChatRouteName,
   ProfileRouteName,
   AppsRouteName,
   type ScreenParamList,
   type TabParamList,
   type NavigationRoute,
 } from './route-names.js';
 import { tabBar } from './tab-bar.react.js';
 import TabRouter from './tab-router.js';
 import AppsDirectory from '../apps/apps-directory.react.js';
 import Calendar from '../calendar/calendar.react.js';
 import Chat from '../chat/chat.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import Profile from '../profile/profile.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useColors } from '../themes/colors.js';
 
 const calendarTabOptions = {
   tabBarLabel: 'Calendar',
-  // eslint-disable-next-line react/display-name
   tabBarIcon: ({ color }: { +color: string, ... }) => (
     <SWMansionIcon name="calendar" style={[styles.icon, { color }]} />
   ),
 };
 const getChatTabOptions = (badge: number) => ({
   tabBarLabel: 'Inbox',
-  // eslint-disable-next-line react/display-name
   tabBarIcon: ({ color }: { +color: string, ... }) => (
     <SWMansionIcon name="message-square" style={[styles.icon, { color }]} />
   ),
   tabBarBadge: badge ? badge : undefined,
 });
 const profileTabOptions = {
   tabBarLabel: 'Profile',
-  // eslint-disable-next-line react/display-name
   tabBarIcon: ({ color }: { +color: string, ... }) => (
     <SWMansionIcon name="user-2" style={[styles.icon, { color }]} />
   ),
 };
 const appsTabOptions = {
   tabBarLabel: 'Apps',
-  // eslint-disable-next-line react/display-name
   tabBarIcon: ({ color }: { +color: string, ... }) => (
     <SWMansionIcon name="globe-1" style={[styles.icon, { color }]} />
   ),
 };
 
 export type CustomBottomTabNavigationHelpers<
   ParamList: ParamListBase = ParamListBase,
 > = {
   ...$Exact<BottomTabNavigationHelpers<ParamList>>,
   ...
 };
 
 export type TabNavigationProp<
   RouteName: $Keys<TabParamList> = $Keys<TabParamList>,
 > = BottomTabNavigationProp<ScreenParamList, RouteName>;
 
 type TabNavigatorProps = BottomTabNavigatorProps<
   CustomBottomTabNavigationHelpers<>,
 >;
 
 const TabNavigator = React.memo<TabNavigatorProps>(function TabNavigator({
   id,
   initialRouteName,
   backBehavior,
   children,
   screenListeners,
   screenOptions,
   defaultScreenOptions,
   ...rest
 }: TabNavigatorProps) {
   const { state, descriptors, navigation } = useNavigationBuilder<
     TabNavigationState,
     TabAction,
     BottomTabOptions,
     TabRouterOptions,
     CustomBottomTabNavigationHelpers<>,
     BottomTabNavigationEventMap,
     ExtraBottomTabNavigatorProps,
   >(TabRouter, {
     id,
     initialRouteName,
     backBehavior,
     children,
     screenListeners,
     screenOptions,
     defaultScreenOptions,
   });
 
   return (
     <BottomTabView
       {...rest}
       state={state}
       navigation={navigation}
       descriptors={descriptors}
       tabBar={tabBar}
     />
   );
 });
 
 const createTabNavigator: CreateNavigator<
   TabNavigationState,
   BottomTabOptions,
   BottomTabNavigationEventMap,
   ExtraBottomTabNavigatorProps,
 > = createNavigatorFactory<
   TabNavigationState,
   BottomTabOptions,
   BottomTabNavigationEventMap,
   BottomTabNavigationHelpers<>,
   ExtraBottomTabNavigatorProps,
 >(TabNavigator);
 
 const Tab = createTabNavigator<
   ScreenParamList,
   TabParamList,
   BottomTabNavigationHelpers<ScreenParamList>,
 >();
 type Props = {
   +navigation: CommunityDrawerNavigationProp<'TabNavigator'>,
   +route: NavigationRoute<'TabNavigator'>,
 };
 function TabComponent(props: Props): React.Node {
   const colors = useColors();
   const chatBadge = useSelector(unreadCount);
   const isCalendarEnabled = useSelector(state => state.enabledApps.calendar);
 
   const headerLeft = React.useCallback(
     () => <CommunityDrawerButton navigation={props.navigation} />,
     [props.navigation],
   );
 
   const headerCommonOptions = React.useMemo(
     () => ({
       headerShown: true,
       headerLeft,
       headerStyle: {
         backgroundColor: colors.tabBarBackground,
       },
       headerShadowVisible: false,
     }),
     [colors.tabBarBackground, headerLeft],
   );
 
   const calendarOptions = React.useMemo(
     () => ({ ...calendarTabOptions, ...headerCommonOptions }),
     [headerCommonOptions],
   );
 
   let calendarTab;
   if (isCalendarEnabled) {
     calendarTab = (
       <Tab.Screen
         name={CalendarRouteName}
         component={Calendar}
         options={calendarOptions}
       />
     );
   }
 
   const appsOptions = React.useMemo(
     () => ({ ...appsTabOptions, ...headerCommonOptions }),
     [headerCommonOptions],
   );
 
   const tabBarScreenOptions = React.useMemo(
     () => ({
       headerShown: false,
       tabBarHideOnKeyboard: false,
       tabBarActiveTintColor: colors.tabBarActiveTintColor,
       tabBarStyle: {
         backgroundColor: colors.tabBarBackground,
         borderTopWidth: 1,
       },
       lazy: false,
     }),
     [colors.tabBarActiveTintColor, colors.tabBarBackground],
   );
 
   return (
     <Tab.Navigator
       initialRouteName={ChatRouteName}
       backBehavior="none"
       screenOptions={tabBarScreenOptions}
     >
       <Tab.Screen
         name={ChatRouteName}
         component={Chat}
         options={getChatTabOptions(chatBadge)}
       />
       {calendarTab}
       <Tab.Screen
         name={ProfileRouteName}
         component={Profile}
         options={profileTabOptions}
       />
       <Tab.Screen
         name={AppsRouteName}
         component={AppsDirectory}
         options={appsOptions}
       />
     </Tab.Navigator>
   );
 }
 
 const styles = {
   icon: {
     fontSize: 28,
   },
 };
 
 export default TabComponent;
diff --git a/native/profile/add-keyserver.react.js b/native/profile/add-keyserver.react.js
index 5fd2261d5..2316bac8f 100644
--- a/native/profile/add-keyserver.react.js
+++ b/native/profile/add-keyserver.react.js
@@ -1,161 +1,160 @@
 // @flow
 
 import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
 import { View, Text } from 'react-native';
 
 import { addKeyserverActionType } from 'lib/actions/keyserver-actions.js';
 import { useIsKeyserverURLValid } from 'lib/shared/keyserver-utils.js';
 import type { KeyserverInfo } from 'lib/types/keyserver-types.js';
 import { defaultConnectionInfo } from 'lib/types/socket-types.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import TextInput from '../components/text-input.react.js';
 import HeaderRightTextButton from '../navigation/header-right-text-button.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles, useColors } from '../themes/colors.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 type Props = {
   +navigation: ProfileNavigationProp<'AddKeyserver'>,
   +route: NavigationRoute<'AddKeyserver'>,
 };
 // eslint-disable-next-line no-unused-vars
 function AddKeyserver(props: Props): React.Node {
   const { goBack, setOptions } = useNavigation();
 
   const dispatch = useDispatch();
 
   const staffCanSee = useStaffCanSee();
 
   const currentUserID = useSelector(state => state.currentUserInfo?.id);
   const customServer = useSelector(state => state.customServer);
 
   const { panelForegroundTertiaryLabel } = useColors();
   const styles = useStyles(unboundStyles);
 
   const [urlInput, setUrlInput] = React.useState(
     customServer && staffCanSee ? customServer : '',
   );
   const [showErrorMessage, setShowErrorMessage] = React.useState(false);
 
   const isKeyserverURLValidCallback = useIsKeyserverURLValid(urlInput);
 
   const onPressSave = React.useCallback(async () => {
     setShowErrorMessage(false);
     if (!currentUserID || !urlInput) {
       return;
     }
 
     const isKeyserverURLValid = await isKeyserverURLValidCallback();
     if (!isKeyserverURLValid) {
       setShowErrorMessage(true);
       return;
     }
 
     const newKeyserverInfo: KeyserverInfo = {
       cookie: null,
       updatesCurrentAsOf: 0,
       urlPrefix: urlInput,
       connection: defaultConnectionInfo,
       lastCommunicatedPlatformDetails: null,
       deviceToken: null,
     };
 
     dispatch({
       type: addKeyserverActionType,
       payload: {
         keyserverAdminUserID: currentUserID,
         newKeyserverInfo,
       },
     });
 
     goBack();
   }, [currentUserID, dispatch, goBack, isKeyserverURLValidCallback, urlInput]);
 
   React.useEffect(() => {
     setOptions({
-      // eslint-disable-next-line react/display-name
       headerRight: () => (
         <HeaderRightTextButton label="Save" onPress={onPressSave} />
       ),
     });
   }, [onPressSave, setOptions, styles.header]);
 
   const onChangeText = React.useCallback(
     (text: string) => setUrlInput(text),
     [],
   );
 
   const errorMessage = React.useMemo(() => {
     if (!showErrorMessage) {
       return null;
     }
 
     return (
       <Text style={styles.errorMessage}>
         Cannot connect to keyserver. Please check the URL or your connection and
         try again.
       </Text>
     );
   }, [showErrorMessage, styles.errorMessage]);
 
   return (
     <View style={styles.container}>
       <Text style={styles.header}>KEYSERVER URL</Text>
       <View style={styles.inputContainer}>
         <TextInput
           style={styles.input}
           value={urlInput}
           onChangeText={onChangeText}
           placeholder="Keyserver URL"
           placeholderTextColor={panelForegroundTertiaryLabel}
           autoFocus={true}
           autoCapitalize="none"
           autoCorrect={false}
         />
       </View>
       {errorMessage}
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     paddingTop: 8,
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   inputContainer: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 12,
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
   },
   input: {
     color: 'panelForegroundLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     paddingVertical: 0,
     borderBottomColor: 'transparent',
   },
   errorMessage: {
     marginTop: 8,
     marginHorizontal: 16,
     color: 'redText',
   },
 };
 
 export default AddKeyserver;
diff --git a/native/profile/profile.react.js b/native/profile/profile.react.js
index c10620d97..781a86144 100644
--- a/native/profile/profile.react.js
+++ b/native/profile/profile.react.js
@@ -1,246 +1,244 @@
 // @flow
 
 import type {
   StackNavigationProp,
   StackNavigationHelpers,
   StackHeaderProps,
   StackHeaderLeftButtonProps,
 } from '@react-navigation/core';
 import { createStackNavigator } from '@react-navigation/stack';
 import * as React from 'react';
 import { View, useWindowDimensions } from 'react-native';
 
 import AddKeyserver from './add-keyserver.react.js';
 import AppearancePreferences from './appearance-preferences.react.js';
 import BackupMenu from './backup-menu.react.js';
 import BuildInfo from './build-info.react.js';
 import DefaultNotificationsPreferences from './default-notifications-preferences.react.js';
 import DeleteAccount from './delete-account.react.js';
 import DevTools from './dev-tools.react.js';
 import EditPassword from './edit-password.react.js';
 import EmojiUserAvatarCreation from './emoji-user-avatar-creation.react.js';
 import KeyserverSelectionListHeaderRightButton from './keyserver-selection-list-header-right-button.react.js';
 import KeyserverSelectionList from './keyserver-selection-list.react.js';
 import LinkedDevicesHeaderRightButton from './linked-devices-header-right-button.react.js';
 import LinkedDevices from './linked-devices.react.js';
 import PrivacyPreferences from './privacy-preferences.react.js';
 import ProfileHeader from './profile-header.react.js';
 import ProfileScreen from './profile-screen.react.js';
 import RelationshipList from './relationship-list.react.js';
 import SecondaryDeviceQRCodeScanner from './secondary-device-qr-code-scanner.react.js';
 import TunnelbrokerMenu from './tunnelbroker-menu.react.js';
 import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
 import CommunityDrawerButton from '../navigation/community-drawer-button.react.js';
 import HeaderBackButton from '../navigation/header-back-button.react.js';
 import {
   ProfileScreenRouteName,
   EditPasswordRouteName,
   DeleteAccountRouteName,
   EmojiUserAvatarCreationRouteName,
   BuildInfoRouteName,
   DevToolsRouteName,
   AppearancePreferencesRouteName,
   PrivacyPreferencesRouteName,
   FriendListRouteName,
   DefaultNotificationsPreferencesRouteName,
   BlockListRouteName,
   LinkedDevicesRouteName,
   SecondaryDeviceQRCodeScannerRouteName,
   BackupMenuRouteName,
   KeyserverSelectionListRouteName,
   AddKeyserverRouteName,
   type ScreenParamList,
   type ProfileParamList,
   TunnelbrokerMenuRouteName,
 } from '../navigation/route-names.js';
 import type { TabNavigationProp } from '../navigation/tab-navigator.react.js';
 import { useStyles, useColors } from '../themes/colors.js';
 
 const header = (props: StackHeaderProps) => <ProfileHeader {...props} />;
 const profileScreenOptions = { headerTitle: 'Profile' };
 const emojiAvatarCreationOptions = {
   headerTitle: 'Emoji avatar selection',
   headerBackTitleVisible: false,
 };
 const editPasswordOptions = { headerTitle: 'Change password' };
 const deleteAccountOptions = { headerTitle: 'Delete account' };
 const linkedDevicesOptions = {
   headerTitle: 'Linked devices',
-  // eslint-disable-next-line react/display-name
   headerRight: () => <LinkedDevicesHeaderRightButton />,
 };
 const keyserverSelectionListOptions = {
   headerTitle: 'Keyservers',
-  // eslint-disable-next-line react/display-name
   headerRight: () => <KeyserverSelectionListHeaderRightButton />,
 };
 const addKeyserverOptions = { headerTitle: 'Add keyserver' };
 const backupMenuOptions = { headerTitle: 'Backup menu' };
 const tunnelbrokerMenuOptions = { headerTitle: 'Tunnelbroker menu' };
 const secondaryDeviceQRCodeScannerOptions = {
   headerTitle: '',
   headerBackTitleVisible: false,
 };
 const buildInfoOptions = { headerTitle: 'Build info' };
 const devToolsOptions = { headerTitle: 'Developer tools' };
 const appearanceOptions = { headerTitle: 'Appearance' };
 const privacyOptions = { headerTitle: 'Privacy' };
 const friendListOptions = { headerTitle: 'Friend list' };
 const blockListOptions = { headerTitle: 'Block list' };
 const defaultNotificationsOptions = { headerTitle: 'Default Notifications' };
 
 export type ProfileNavigationProp<
   RouteName: $Keys<ProfileParamList> = $Keys<ProfileParamList>,
 > = StackNavigationProp<ScreenParamList, RouteName>;
 
 const Profile = createStackNavigator<
   ScreenParamList,
   ProfileParamList,
   StackNavigationHelpers<ScreenParamList>,
 >();
 type Props = {
   +navigation: TabNavigationProp<'Profile'>,
   ...
 };
 
 function ProfileComponent(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const headerLeftButton = React.useCallback(
     (headerProps: StackHeaderLeftButtonProps) =>
       headerProps.canGoBack ? (
         <HeaderBackButton {...headerProps} />
       ) : (
         <CommunityDrawerButton navigation={props.navigation} />
       ),
     [props.navigation],
   );
 
   const { width: screenWidth } = useWindowDimensions();
   const screenOptions = React.useMemo(
     () => ({
       header,
       headerLeft: headerLeftButton,
       headerStyle: {
         backgroundColor: colors.tabBarBackground,
         shadowOpacity: 0,
       },
       gestureEnabled: true,
       gestureResponseDistance: screenWidth,
     }),
     [colors.tabBarBackground, headerLeftButton, screenWidth],
   );
 
   return (
     <View style={styles.view}>
       <KeyboardAvoidingView
         behavior="padding"
         style={styles.keyboardAvoidingView}
       >
         <Profile.Navigator
           screenOptions={screenOptions}
           detachInactiveScreens={false}
         >
           <Profile.Screen
             name={ProfileScreenRouteName}
             component={ProfileScreen}
             options={profileScreenOptions}
           />
           <Profile.Screen
             name={EmojiUserAvatarCreationRouteName}
             component={EmojiUserAvatarCreation}
             options={emojiAvatarCreationOptions}
           />
           <Profile.Screen
             name={EditPasswordRouteName}
             component={EditPassword}
             options={editPasswordOptions}
           />
           <Profile.Screen
             name={DeleteAccountRouteName}
             component={DeleteAccount}
             options={deleteAccountOptions}
           />
           <Profile.Screen
             name={LinkedDevicesRouteName}
             component={LinkedDevices}
             options={linkedDevicesOptions}
           />
           <Profile.Screen
             name={KeyserverSelectionListRouteName}
             component={KeyserverSelectionList}
             options={keyserverSelectionListOptions}
           />
           <Profile.Screen
             name={AddKeyserverRouteName}
             component={AddKeyserver}
             options={addKeyserverOptions}
           />
           <Profile.Screen
             name={BackupMenuRouteName}
             component={BackupMenu}
             options={backupMenuOptions}
           />
           <Profile.Screen
             name={TunnelbrokerMenuRouteName}
             component={TunnelbrokerMenu}
             options={tunnelbrokerMenuOptions}
           />
           <Profile.Screen
             name={SecondaryDeviceQRCodeScannerRouteName}
             component={SecondaryDeviceQRCodeScanner}
             options={secondaryDeviceQRCodeScannerOptions}
           />
           <Profile.Screen
             name={BuildInfoRouteName}
             component={BuildInfo}
             options={buildInfoOptions}
           />
           <Profile.Screen
             name={DevToolsRouteName}
             component={DevTools}
             options={devToolsOptions}
           />
           <Profile.Screen
             name={AppearancePreferencesRouteName}
             component={AppearancePreferences}
             options={appearanceOptions}
           />
           <Profile.Screen
             name={PrivacyPreferencesRouteName}
             component={PrivacyPreferences}
             options={privacyOptions}
           />
           <Profile.Screen
             name={DefaultNotificationsPreferencesRouteName}
             component={DefaultNotificationsPreferences}
             options={defaultNotificationsOptions}
           />
           <Profile.Screen
             name={FriendListRouteName}
             component={RelationshipList}
             options={friendListOptions}
           />
           <Profile.Screen
             name={BlockListRouteName}
             component={RelationshipList}
             options={blockListOptions}
           />
         </Profile.Navigator>
       </KeyboardAvoidingView>
     </View>
   );
 }
 
 const unboundStyles = {
   keyboardAvoidingView: {
     flex: 1,
   },
   view: {
     flex: 1,
     backgroundColor: 'panelBackground',
   },
 };
 
 export default ProfileComponent;
diff --git a/native/profile/relationship-list.react.js b/native/profile/relationship-list.react.js
index d575176dc..e59f5a668 100644
--- a/native/profile/relationship-list.react.js
+++ b/native/profile/relationship-list.react.js
@@ -1,490 +1,489 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, Platform } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 
 import {
   updateRelationshipsActionTypes,
   updateRelationships,
 } from 'lib/actions/relationship-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
 import { userRelationshipsSelector } from 'lib/selectors/relationship-selectors.js';
 import { useSearchUsers } from 'lib/shared/search-utils.js';
 import {
   userRelationshipStatus,
   relationshipActions,
 } from 'lib/types/relationship-types.js';
 import type {
   GlobalAccountUserInfo,
   AccountUserInfo,
 } from 'lib/types/user-types.js';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import RelationshipListItem from './relationship-list-item.react.js';
 import LinkButton from '../components/link-button.react.js';
 import { createTagInput, BaseTagInput } from '../components/tag-input.react.js';
 import { KeyboardContext } from '../keyboard/keyboard-state.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import {
   FriendListRouteName,
   BlockListRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles, useIndicatorStyle } from '../themes/colors.js';
 import type { VerticalBounds } from '../types/layout-types.js';
 import Alert from '../utils/alert.js';
 
 const TagInput = createTagInput<GlobalAccountUserInfo>();
 
 export type RelationshipListNavigate = $PropertyType<
   ProfileNavigationProp<'FriendList' | 'BlockList'>,
   'navigate',
 >;
 
 const tagInputProps = {
   placeholder: 'username',
   autoFocus: true,
   returnKeyType: 'go',
 };
 
 type ListItem =
   | { +type: 'empty', +because: 'no-relationships' | 'no-results' }
   | { +type: 'header' }
   | { +type: 'footer' }
   | {
       +type: 'user',
       +userInfo: AccountUserInfo,
       +lastListItem: boolean,
       +verticalBounds: ?VerticalBounds,
     };
 
 // ESLint doesn't recognize that invariant always throws
 // eslint-disable-next-line consistent-return
 function keyExtractor(item: ListItem) {
   if (item.userInfo) {
     return item.userInfo.id;
   } else if (item.type === 'empty') {
     return 'empty';
   } else if (item.type === 'header') {
     return 'header';
   } else if (item.type === 'footer') {
     return 'footer';
   }
   invariant(false, 'keyExtractor conditions should be exhaustive');
 }
 
 const tagDataLabelExtractor = (userInfo: GlobalAccountUserInfo) =>
   userInfo.username;
 
 type Props = {
   +navigation: ProfileNavigationProp<'FriendList' | 'BlockList'>,
   +route: NavigationRoute<'FriendList' | 'BlockList'>,
 };
 function RelationshipList(props: Props): React.Node {
   const { route } = props;
   const routeName = route.name;
   const excludeStatuses = React.useMemo(
     () =>
       ({
         [FriendListRouteName]: [
           userRelationshipStatus.BLOCKED_VIEWER,
           userRelationshipStatus.BOTH_BLOCKED,
         ],
         [BlockListRouteName]: [],
       })[routeName],
     [routeName],
   );
 
   const userInfos = useSelector(state => state.userStore.userInfos);
   const userInfosArray = React.useMemo(
     () =>
       values(userInfos).filter(userInfo => {
         const relationship = userInfo.relationshipStatus;
         return !excludeStatuses.includes(relationship);
       }),
     [userInfos, excludeStatuses],
   );
 
   const [searchInputText, setSearchInputText] = React.useState<string>('');
   const [userStoreSearchResults, setUserStoreSearchResults] = React.useState<
     $ReadOnlySet<string>,
   >(new Set());
 
   const serverSearchResults = useSearchUsers(searchInputText);
   const filteredServerSearchResults = React.useMemo(
     () =>
       serverSearchResults.filter(searchUserInfo => {
         const userInfo = userInfos[searchUserInfo.id];
         return (
           !userInfo || !excludeStatuses.includes(userInfo.relationshipStatus)
         );
       }),
     [serverSearchResults, userInfos, excludeStatuses],
   );
 
   const userStoreSearchIndex = useUserSearchIndex(userInfosArray);
   const onChangeSearchText = React.useCallback(
     async (searchText: string) => {
       setSearchInputText(searchText);
 
       const results = userStoreSearchIndex.getSearchResults(searchText);
       setUserStoreSearchResults(new Set(results));
     },
     [userStoreSearchIndex],
   );
 
   const overlayContext = React.useContext(OverlayContext);
   invariant(overlayContext, 'RelationshipList should have OverlayContext');
   const scrollEnabled = overlayContext.scrollBlockingModalStatus === 'closed';
 
   const tagInputRef = React.useRef<?BaseTagInput<GlobalAccountUserInfo>>();
   const flatListContainerRef = React.useRef<?React.ElementRef<typeof View>>();
 
   const keyboardState = React.useContext(KeyboardContext);
   const keyboardNotShowing = !!(
     keyboardState && !keyboardState.keyboardShowing
   );
   const [verticalBounds, setVerticalBounds] =
     React.useState<?VerticalBounds>(null);
   const onFlatListContainerLayout = React.useCallback(() => {
     if (!flatListContainerRef.current) {
       return;
     }
 
     if (!keyboardNotShowing) {
       return;
     }
 
     flatListContainerRef.current.measure(
       (x, y, width, height, pageX, pageY) => {
         if (
           height === null ||
           height === undefined ||
           pageY === null ||
           pageY === undefined
         ) {
           return;
         }
         setVerticalBounds({ height, y: pageY });
       },
     );
   }, [keyboardNotShowing]);
 
   const [currentTags, setCurrentTags] = React.useState<
     $ReadOnlyArray<GlobalAccountUserInfo>,
   >([]);
 
   const onSelect = React.useCallback(
     (selectedUser: GlobalAccountUserInfo) => {
       if (currentTags.find(o => o.id === selectedUser.id)) {
         return;
       }
       setSearchInputText('');
       setCurrentTags(prevCurrentTags => prevCurrentTags.concat(selectedUser));
     },
     [currentTags],
   );
 
   const onUnknownErrorAlertAcknowledged = React.useCallback(() => {
     setCurrentTags([]);
     setSearchInputText('');
     tagInputRef.current?.focus();
   }, []);
 
   const callUpdateRelationships = useServerCall(updateRelationships);
   const updateRelationshipsOnServer = React.useCallback(async () => {
     const action = {
       [FriendListRouteName]: relationshipActions.FRIEND,
       [BlockListRouteName]: relationshipActions.BLOCK,
     }[routeName];
     const userIDs = currentTags.map(userInfo => userInfo.id);
     try {
       const result = await callUpdateRelationships({
         action,
         userIDs,
       });
       setCurrentTags([]);
       setSearchInputText('');
       return result;
     } catch (e) {
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: onUnknownErrorAlertAcknowledged }],
         { cancelable: true, onDismiss: onUnknownErrorAlertAcknowledged },
       );
       throw e;
     }
   }, [
     routeName,
     currentTags,
     callUpdateRelationships,
     onUnknownErrorAlertAcknowledged,
   ]);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const noCurrentTags = currentTags.length === 0;
   const onPressAdd = React.useCallback(() => {
     if (noCurrentTags) {
       return;
     }
     void dispatchActionPromise(
       updateRelationshipsActionTypes,
       updateRelationshipsOnServer(),
     );
   }, [noCurrentTags, dispatchActionPromise, updateRelationshipsOnServer]);
   const inputProps = React.useMemo(
     () => ({
       ...tagInputProps,
       onSubmitEditing: onPressAdd,
     }),
     [onPressAdd],
   );
 
   const { navigation } = props;
   const { navigate } = navigation;
   const styles = useStyles(unboundStyles);
   const renderItem = React.useCallback(
     // ESLint doesn't recognize that invariant always throws
     // eslint-disable-next-line consistent-return
     ({ item }: { item: ListItem, ... }) => {
       if (item.type === 'empty') {
         const action = {
           [FriendListRouteName]: 'added',
           [BlockListRouteName]: 'blocked',
         }[routeName];
 
         const emptyMessage =
           item.because === 'no-relationships'
             ? `You haven't ${action} any users yet`
             : 'No results';
 
         return <Text style={styles.emptyText}>{emptyMessage}</Text>;
       } else if (item.type === 'header' || item.type === 'footer') {
         return <View style={styles.separator} />;
       } else if (item.type === 'user') {
         return (
           <RelationshipListItem
             userInfo={item.userInfo}
             lastListItem={item.lastListItem}
             verticalBounds={item.verticalBounds}
             navigate={navigate}
             relationshipListRoute={route}
             onSelect={onSelect}
           />
         );
       } else {
         invariant(false, `unexpected RelationshipList item type ${item.type}`);
       }
     },
     [routeName, navigate, route, onSelect, styles.emptyText, styles.separator],
   );
 
   const { setOptions } = navigation;
   const prevNoCurrentTags = React.useRef(noCurrentTags);
   React.useEffect(() => {
     let setSaveButtonDisabled;
     if (!prevNoCurrentTags.current && noCurrentTags) {
       setSaveButtonDisabled = true;
     } else if (prevNoCurrentTags.current && !noCurrentTags) {
       setSaveButtonDisabled = false;
     }
     prevNoCurrentTags.current = noCurrentTags;
     if (setSaveButtonDisabled === undefined) {
       return;
     }
     setOptions({
-      // eslint-disable-next-line react/display-name
       headerRight: () => (
         <LinkButton
           text="Save"
           onPress={onPressAdd}
           disabled={setSaveButtonDisabled}
         />
       ),
     });
   }, [setOptions, noCurrentTags, onPressAdd]);
 
   const relationships = useSelector(userRelationshipsSelector);
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const usersWithoutENSNames = React.useMemo(() => {
     if (searchInputText === '') {
       return {
         [FriendListRouteName]: relationships.friends,
         [BlockListRouteName]: relationships.blocked,
       }[routeName];
     }
 
     const mergedUserInfos: { [id: string]: AccountUserInfo } = {};
     for (const userInfo of filteredServerSearchResults) {
       mergedUserInfos[userInfo.id] = userInfo;
     }
     for (const id of userStoreSearchResults) {
       const { username, relationshipStatus } = userInfos[id];
       if (username) {
         mergedUserInfos[id] = { id, username, relationshipStatus };
       }
     }
 
     const excludeUserIDsArray = currentTags
       .map(userInfo => userInfo.id)
       .concat(viewerID || []);
     const excludeUserIDs = new Set(excludeUserIDsArray);
 
     const sortToEnd = [];
     const userSearchResults = [];
     const sortRelationshipTypesToEnd = {
       [FriendListRouteName]: [userRelationshipStatus.FRIEND],
       [BlockListRouteName]: [
         userRelationshipStatus.BLOCKED_BY_VIEWER,
         userRelationshipStatus.BOTH_BLOCKED,
       ],
     }[routeName];
     for (const userID in mergedUserInfos) {
       if (excludeUserIDs.has(userID)) {
         continue;
       }
 
       const userInfo = mergedUserInfos[userID];
       if (sortRelationshipTypesToEnd.includes(userInfo.relationshipStatus)) {
         sortToEnd.push(userInfo);
       } else {
         userSearchResults.push(userInfo);
       }
     }
 
     return userSearchResults.concat(sortToEnd);
   }, [
     searchInputText,
     relationships,
     routeName,
     viewerID,
     currentTags,
     filteredServerSearchResults,
     userStoreSearchResults,
     userInfos,
   ]);
 
   const displayUsers = useENSNames(usersWithoutENSNames);
   const listData = React.useMemo(() => {
     let emptyItem;
     if (displayUsers.length === 0 && searchInputText === '') {
       emptyItem = { type: 'empty', because: 'no-relationships' };
     } else if (displayUsers.length === 0) {
       emptyItem = { type: 'empty', because: 'no-results' };
     }
 
     const mappedUsers = displayUsers.map((userInfo, index) => ({
       type: 'user',
       userInfo,
       lastListItem: displayUsers.length - 1 === index,
       verticalBounds,
     }));
 
     return []
       .concat(emptyItem ? emptyItem : [])
       .concat(emptyItem ? [] : { type: 'header' })
       .concat(mappedUsers)
       .concat(emptyItem ? [] : { type: 'footer' });
   }, [displayUsers, verticalBounds, searchInputText]);
 
   const indicatorStyle = useIndicatorStyle();
   const currentTagsWithENSNames = useENSNames(currentTags);
   return (
     <View style={styles.container}>
       <View style={styles.tagInputContainer}>
         <Text style={styles.tagInputLabel}>Search:</Text>
         <View style={styles.tagInput}>
           <TagInput
             value={currentTagsWithENSNames}
             onChange={setCurrentTags}
             text={searchInputText}
             onChangeText={onChangeSearchText}
             labelExtractor={tagDataLabelExtractor}
             ref={tagInputRef}
             inputProps={inputProps}
             maxHeight={36}
           />
         </View>
       </View>
       <View
         ref={flatListContainerRef}
         onLayout={onFlatListContainerLayout}
         style={styles.container}
       >
         <FlatList
           contentContainerStyle={styles.contentContainer}
           data={listData}
           renderItem={renderItem}
           keyExtractor={keyExtractor}
           scrollEnabled={scrollEnabled}
           indicatorStyle={indicatorStyle}
           keyboardShouldPersistTaps="handled"
         />
       </View>
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     flex: 1,
     backgroundColor: 'panelBackground',
   },
   contentContainer: {
     paddingTop: 12,
     paddingBottom: 24,
   },
   separator: {
     backgroundColor: 'panelForegroundBorder',
     height: Platform.OS === 'android' ? 1.5 : 1,
   },
   emptyText: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
     lineHeight: 20,
     textAlign: 'center',
     paddingHorizontal: 12,
     paddingVertical: 10,
     marginHorizontal: 12,
   },
   tagInput: {
     flex: 1,
     marginLeft: 8,
     paddingRight: 12,
   },
   tagInputLabel: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     paddingLeft: 12,
   },
   tagInputContainer: {
     alignItems: 'center',
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     flexDirection: 'row',
     paddingVertical: 6,
   },
 };
 
 registerFetchKey(updateRelationshipsActionTypes);
 
 const MemoizedRelationshipList: React.ComponentType<Props> =
   React.memo<Props>(RelationshipList);
 MemoizedRelationshipList.displayName = 'RelationshipList';
 
 export default MemoizedRelationshipList;
diff --git a/native/redux/persist.js b/native/redux/persist.js
index 62bb5b842..983822adf 100644
--- a/native/redux/persist.js
+++ b/native/redux/persist.js
@@ -1,1151 +1,1149 @@
 // @flow
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import invariant from 'invariant';
 import { Platform } from 'react-native';
 import Orientation from 'react-native-orientation-locker';
 import { createTransform } from 'redux-persist';
 import type { Transform } from 'redux-persist/es/types.js';
 
 import {
   convertEntryStoreToNewIDSchema,
   convertInviteLinksStoreToNewIDSchema,
   convertMessageStoreToNewIDSchema,
   convertRawMessageInfoToNewIDSchema,
   convertCalendarFilterToNewIDSchema,
   convertConnectionInfoToNewIDSchema,
 } from 'lib/_generated/migration-utils.js';
 import {
   type ClientDBMessageStoreOperation,
   messageStoreOpsHandlers,
 } from 'lib/ops/message-store-ops.js';
 import {
   type ReportStoreOperation,
   type ClientDBReportStoreOperation,
   convertReportsToReplaceReportOps,
   reportStoreOpsHandlers,
 } from 'lib/ops/report-store-ops.js';
 import type { ClientDBThreadStoreOperation } from 'lib/ops/thread-store-ops.js';
 import { threadStoreOpsHandlers } from 'lib/ops/thread-store-ops.js';
 import {
   type ClientDBUserStoreOperation,
   type UserStoreOperation,
   convertUserInfosToReplaceUserOps,
   userStoreOpsHandlers,
 } from 'lib/ops/user-store-ops.js';
 import { highestLocalIDSelector } from 'lib/selectors/local-id-selectors.js';
 import { createAsyncMigrate } from 'lib/shared/create-async-migrate.js';
 import { inconsistencyResponsesToReports } from 'lib/shared/report-utils.js';
 import {
   getContainingThreadID,
   getCommunity,
   assertAllThreadInfosAreLegacy,
 } from 'lib/shared/thread-utils.js';
 import {
   DEPRECATED_unshimMessageStore,
   unshimFunc,
 } from 'lib/shared/unshim-utils.js';
 import { defaultEnabledApps } from 'lib/types/enabled-apps.js';
 import { defaultCalendarQuery } from 'lib/types/entry-types.js';
 import { defaultCalendarFilters } from 'lib/types/filter-types.js';
 import type {
   KeyserverStore,
   KeyserverInfo,
 } from 'lib/types/keyserver-types.js';
 import {
   messageTypes,
   type MessageType,
 } from 'lib/types/message-types-enum.js';
 import {
   type LocalMessageInfo,
   type MessageStore,
   type MessageStoreThreads,
   type RawMessageInfo,
 } from 'lib/types/message-types.js';
 import { minimallyEncodeRawThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type {
   ReportStore,
   ClientReportCreationRequest,
 } from 'lib/types/report-types.js';
 import {
   defaultConnectionInfo,
   type ConnectionInfo,
 } from 'lib/types/socket-types.js';
 import { defaultGlobalThemeInfo } from 'lib/types/theme-types.js';
 import type {
   ClientDBThreadInfo,
   LegacyRawThreadInfo,
   RawThreadInfo,
   RawThreadInfos,
 } from 'lib/types/thread-types.js';
 import {
   translateClientDBMessageInfoToRawMessageInfo,
   translateRawMessageInfoToClientDBMessageInfo,
 } from 'lib/utils/message-ops-utils.js';
 import {
   generateIDSchemaMigrationOpsForDrafts,
   convertMessageStoreThreadsToNewIDSchema,
   convertThreadStoreThreadInfosToNewIDSchema,
 } from 'lib/utils/migration-utils.js';
 import { defaultNotifPermissionAlertInfo } from 'lib/utils/push-alerts.js';
 import {
   deprecatedConvertClientDBThreadInfoToRawThreadInfo,
   convertRawThreadInfoToClientDBThreadInfo,
 } from 'lib/utils/thread-ops-utils.js';
 import { getUUID } from 'lib/utils/uuid.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import {
   updateClientDBThreadStoreThreadInfos,
   createUpdateDBOpsForThreadStoreThreadInfos,
   createUpdateDBOpsForMessageStoreMessages,
   createUpdateDBOpsForMessageStoreThreads,
 } from './client-db-utils.js';
 import { defaultState } from './default-state.js';
 import { migrateThreadStoreForEditThreadPermissions } from './edit-thread-permission-migration.js';
 import { legacyUpdateRolesAndPermissions } from './legacy-update-roles-and-permissions.js';
 import { persistMigrationForManagePinsThreadPermission } from './manage-pins-permission-migration.js';
 import { persistMigrationToRemoveSelectRolePermissions } from './remove-select-role-permissions.js';
 import type { AppState } from './state-types.js';
 import { unshimClientDB } from './unshim-utils.js';
 import { commCoreModule } from '../native-modules.js';
 import { defaultDeviceCameraInfo } from '../types/camera.js';
 import { isTaskCancelledError } from '../utils/error-handling.js';
 import { defaultURLPrefix } from '../utils/url-utils.js';
 
 const migrations = {
   [1]: (state: AppState) => ({
     ...state,
     notifPermissionAlertInfo: defaultNotifPermissionAlertInfo,
   }),
   [2]: (state: AppState) => ({
     ...state,
     messageSentFromRoute: [],
   }),
   [3]: (state: any) => ({
     currentUserInfo: state.currentUserInfo,
     entryStore: state.entryStore,
     threadInfos: state.threadInfos,
     userInfos: state.userInfos,
     messageStore: {
       ...state.messageStore,
       currentAsOf: state.currentAsOf,
     },
     updatesCurrentAsOf: state.currentAsOf,
     cookie: state.cookie,
     deviceToken: state.deviceToken,
     urlPrefix: state.urlPrefix,
     customServer: state.customServer,
     notifPermissionAlertInfo: state.notifPermissionAlertInfo,
     messageSentFromRoute: state.messageSentFromRoute,
     _persist: state._persist,
   }),
   [4]: (state: AppState) => ({
     ...state,
     pingTimestamps: undefined,
     activeServerRequests: undefined,
   }),
   [5]: (state: AppState) => ({
     ...state,
     calendarFilters: defaultCalendarFilters,
   }),
   [6]: (state: any) => ({
     ...state,
     threadInfos: undefined,
     threadStore: {
       threadInfos: state.threadInfos,
       inconsistencyResponses: [],
     },
   }),
   [7]: (state: AppState) => ({
     ...state,
     lastUserInteraction: undefined,
     sessionID: undefined,
     entryStore: {
       ...state.entryStore,
       inconsistencyResponses: [],
     },
   }),
   [8]: (state: AppState) => ({
     ...state,
     pingTimestamps: undefined,
     activeServerRequests: undefined,
     connection: {
       ...defaultConnectionInfo,
       actualizedCalendarQuery: defaultCalendarQuery(Platform.OS),
     },
     watchedThreadIDs: [],
     entryStore: {
       ...state.entryStore,
       actualizedCalendarQuery: undefined,
     },
   }),
   [9]: (state: any) => ({
     ...state,
     connection: {
       ...state.connection,
       lateResponses: [],
     },
   }),
   [10]: (state: any) => ({
     ...state,
     nextLocalID: highestLocalIDSelector(state) + 1,
     connection: {
       ...state.connection,
       showDisconnectedBar: false,
     },
     messageStore: {
       ...state.messageStore,
       local: {},
     },
   }),
   [11]: (state: AppState) => ({
     ...state,
     messageStore: DEPRECATED_unshimMessageStore(state.messageStore, [
       messageTypes.IMAGES,
     ]),
   }),
   [12]: (state: AppState) => ({
     ...state,
     globalThemeInfo: defaultGlobalThemeInfo,
   }),
   [13]: (state: AppState) => ({
     ...state,
     deviceCameraInfo: defaultDeviceCameraInfo,
     deviceOrientation: Orientation.getInitialOrientation(),
   }),
   [14]: (state: AppState) => state,
   [15]: (state: any) => ({
     ...state,
     threadStore: {
       ...state.threadStore,
       inconsistencyReports: inconsistencyResponsesToReports(
         state.threadStore.inconsistencyResponses,
       ),
       inconsistencyResponses: undefined,
     },
     entryStore: {
       ...state.entryStore,
       inconsistencyReports: inconsistencyResponsesToReports(
         state.entryStore.inconsistencyResponses,
       ),
       inconsistencyResponses: undefined,
     },
     queuedReports: [],
   }),
   [16]: (state: any) => {
     const result = {
       ...state,
       messageSentFromRoute: undefined,
       dataLoaded: !!state.currentUserInfo && !state.currentUserInfo.anonymous,
     };
     if (state.navInfo) {
       result.navInfo = {
         ...state.navInfo,
         navigationState: undefined,
       };
     }
     return result;
   },
   [17]: (state: any) => ({
     ...state,
     userInfos: undefined,
     userStore: {
       userInfos: state.userInfos,
       inconsistencyResponses: [],
     },
   }),
   [18]: (state: AppState) => ({
     ...state,
     userStore: {
       userInfos: state.userStore.userInfos,
       inconsistencyReports: [],
     },
   }),
   [19]: (state: any) => {
     const threadInfos: { [string]: LegacyRawThreadInfo } = {};
     for (const threadID in state.threadStore.threadInfos) {
       const threadInfo = state.threadStore.threadInfos[threadID];
       const { visibilityRules, ...rest } = threadInfo;
       threadInfos[threadID] = rest;
     }
     return {
       ...state,
       threadStore: {
         ...state.threadStore,
         threadInfos,
       },
     };
   },
   [20]: (state: AppState) => ({
     ...state,
     messageStore: DEPRECATED_unshimMessageStore(state.messageStore, [
       messageTypes.UPDATE_RELATIONSHIP,
     ]),
   }),
   [21]: (state: AppState) => ({
     ...state,
     messageStore: DEPRECATED_unshimMessageStore(state.messageStore, [
       messageTypes.CREATE_SIDEBAR,
       messageTypes.SIDEBAR_SOURCE,
     ]),
   }),
   [22]: (state: any) => {
     for (const key in state.drafts) {
       const value = state.drafts[key];
       try {
         void commCoreModule.updateDraft(key, value);
       } catch (e) {
         if (!isTaskCancelledError(e)) {
           throw e;
         }
       }
     }
     return {
       ...state,
       drafts: undefined,
     };
   },
   [23]: (state: AppState) => ({
     ...state,
     globalThemeInfo: defaultGlobalThemeInfo,
   }),
   [24]: (state: AppState) => ({
     ...state,
     enabledApps: defaultEnabledApps,
   }),
   [25]: (state: AppState) => ({
     ...state,
     crashReportsEnabled: __DEV__,
   }),
   [26]: (state: any) => {
     const { currentUserInfo } = state;
     if (currentUserInfo.anonymous) {
       return state;
     }
     return {
       ...state,
       crashReportsEnabled: undefined,
       currentUserInfo: {
         id: currentUserInfo.id,
         username: currentUserInfo.username,
       },
       enabledReports: {
         crashReports: __DEV__,
         inconsistencyReports: __DEV__,
         mediaReports: __DEV__,
       },
     };
   },
   [27]: (state: any) => ({
     ...state,
     queuedReports: undefined,
     enabledReports: undefined,
     threadStore: {
       ...state.threadStore,
       inconsistencyReports: undefined,
     },
     entryStore: {
       ...state.entryStore,
       inconsistencyReports: undefined,
     },
     reportStore: {
       enabledReports: {
         crashReports: __DEV__,
         inconsistencyReports: __DEV__,
         mediaReports: __DEV__,
       },
       queuedReports: [
         ...state.entryStore.inconsistencyReports,
         ...state.threadStore.inconsistencyReports,
         ...state.queuedReports,
       ],
     },
   }),
   [28]: (state: AppState) => {
     const threadParentToChildren: { [string]: string[] } = {};
     for (const threadID in state.threadStore.threadInfos) {
       const threadInfo = state.threadStore.threadInfos[threadID];
       const parentThreadInfo = threadInfo.parentThreadID
         ? state.threadStore.threadInfos[threadInfo.parentThreadID]
         : null;
       const parentIndex = parentThreadInfo ? parentThreadInfo.id : '-1';
       if (!threadParentToChildren[parentIndex]) {
         threadParentToChildren[parentIndex] = [];
       }
       threadParentToChildren[parentIndex].push(threadID);
     }
 
     const rootIDs = threadParentToChildren['-1'];
     if (!rootIDs) {
       // This should never happen, but if it somehow does we'll let the state
       // check mechanism resolve it...
       return state;
     }
 
     const threadInfos: { [string]: RawThreadInfo } = {};
     const stack = [...rootIDs];
     while (stack.length > 0) {
       const threadID = stack.shift();
       const threadInfo = state.threadStore.threadInfos[threadID];
       const parentThreadInfo = threadInfo.parentThreadID
         ? threadInfos[threadInfo.parentThreadID]
         : null;
       threadInfos[threadID] = {
         ...threadInfo,
         containingThreadID: getContainingThreadID(
           parentThreadInfo,
           threadInfo.type,
         ),
         community: getCommunity(parentThreadInfo),
       };
       const children = threadParentToChildren[threadID];
       if (children) {
         stack.push(...children);
       }
     }
     return { ...state, threadStore: { ...state.threadStore, threadInfos } };
   },
   [29]: (state: AppState) => {
     const legacyRawThreadInfos: {
       +[id: string]: LegacyRawThreadInfo,
     } = assertAllThreadInfosAreLegacy(state.threadStore.threadInfos);
 
     const updatedThreadInfos =
       migrateThreadStoreForEditThreadPermissions(legacyRawThreadInfos);
 
     return {
       ...state,
       threadStore: {
         ...state.threadStore,
         threadInfos: updatedThreadInfos,
       },
     };
   },
   [30]: (state: AppState) => {
     const threadInfos = state.threadStore.threadInfos;
     const operations = [
       {
         type: 'remove_all',
       },
       ...Object.keys(threadInfos).map((id: string) => ({
         type: 'replace',
         payload: { id, threadInfo: threadInfos[id] },
       })),
     ];
     try {
       commCoreModule.processThreadStoreOperationsSync(
         threadStoreOpsHandlers.convertOpsToClientDBOps(operations),
       );
     } catch (exception) {
       console.log(exception);
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
     return state;
   },
   [31]: (state: AppState) => {
     const messages = state.messageStore.messages;
     const operations: $ReadOnlyArray<ClientDBMessageStoreOperation> = [
       {
         type: 'remove_all',
       },
       ...Object.keys(messages).map((id: string) => ({
         type: 'replace',
         payload: translateRawMessageInfoToClientDBMessageInfo(messages[id]),
       })),
     ];
     try {
       commCoreModule.processMessageStoreOperationsSync(operations);
     } catch (exception) {
       console.log(exception);
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
     return state;
   },
   [32]: (state: AppState) => unshimClientDB(state, [messageTypes.MULTIMEDIA]),
   [33]: (state: AppState) => unshimClientDB(state, [messageTypes.REACTION]),
   [34]: (state: any) => {
     const { threadIDsToNotifIDs, ...stateSansThreadIDsToNotifIDs } = state;
     return stateSansThreadIDsToNotifIDs;
   },
   [35]: (state: AppState) => unshimClientDB(state, [messageTypes.MULTIMEDIA]),
   [36]: (state: AppState) => {
     // 1. Get threads and messages from SQLite `threads` and `messages` tables.
     const clientDBThreadInfos = commCoreModule.getAllThreadsSync();
     const clientDBMessageInfos = commCoreModule.getAllMessagesSync();
 
     // 2. Translate `ClientDBThreadInfo`s to `RawThreadInfo`s and
     //    `ClientDBMessageInfo`s to `RawMessageInfo`s.
     const rawThreadInfos = clientDBThreadInfos.map(
       deprecatedConvertClientDBThreadInfoToRawThreadInfo,
     );
     const rawMessageInfos = clientDBMessageInfos.map(
       translateClientDBMessageInfoToRawMessageInfo,
     );
 
     // 3. Unshim translated `RawMessageInfos` to get the TOGGLE_PIN messages
     const unshimmedRawMessageInfos = rawMessageInfos.map(messageInfo =>
       unshimFunc(messageInfo, new Set<MessageType>([messageTypes.TOGGLE_PIN])),
     );
 
     // 4. Filter out non-TOGGLE_PIN messages
     const filteredRawMessageInfos = unshimmedRawMessageInfos
       .map(messageInfo =>
         messageInfo.type === messageTypes.TOGGLE_PIN ? messageInfo : null,
       )
       .filter(Boolean);
 
     // 5. We want only the last TOGGLE_PIN message for each message ID,
     // so 'pin', 'unpin', 'pin' don't count as 3 pins, but only 1.
     const lastMessageIDToRawMessageInfoMap = new Map<string, RawMessageInfo>();
     for (const messageInfo of filteredRawMessageInfos) {
       const { targetMessageID } = messageInfo;
       lastMessageIDToRawMessageInfoMap.set(targetMessageID, messageInfo);
     }
     const lastMessageIDToRawMessageInfos = Array.from(
       lastMessageIDToRawMessageInfoMap.values(),
     );
 
     // 6. Create a Map of threadIDs to pinnedCount
     const threadIDsToPinnedCount = new Map<string, number>();
     for (const messageInfo of lastMessageIDToRawMessageInfos) {
       const { threadID, type } = messageInfo;
       if (type === messageTypes.TOGGLE_PIN) {
         const pinnedCount = threadIDsToPinnedCount.get(threadID) || 0;
         threadIDsToPinnedCount.set(threadID, pinnedCount + 1);
       }
     }
 
     // 7. Include a pinnedCount for each rawThreadInfo
     const rawThreadInfosWithPinnedCount = rawThreadInfos.map(threadInfo => ({
       ...threadInfo,
       pinnedCount: threadIDsToPinnedCount.get(threadInfo.id) || 0,
     }));
 
     // 8. Convert rawThreadInfos to a map of threadID to threadInfo
     const threadIDToThreadInfo = rawThreadInfosWithPinnedCount.reduce(
       (
         acc: { [string]: LegacyRawThreadInfo },
         threadInfo: LegacyRawThreadInfo,
       ) => {
         acc[threadInfo.id] = threadInfo;
         return acc;
       },
       {},
     );
 
     // 9. Add threadPermission to each threadInfo
     const rawThreadInfosWithThreadPermission =
       persistMigrationForManagePinsThreadPermission(threadIDToThreadInfo);
 
     // 10. Convert the new threadInfos back into an array
     const rawThreadInfosWithCountAndPermission = Object.keys(
       rawThreadInfosWithThreadPermission,
     ).map(id => rawThreadInfosWithThreadPermission[id]);
 
     // 11. Translate `RawThreadInfo`s to `ClientDBThreadInfo`s.
     const convertedClientDBThreadInfos =
       rawThreadInfosWithCountAndPermission.map(
         convertRawThreadInfoToClientDBThreadInfo,
       );
 
     // 12. Construct `ClientDBThreadStoreOperation`s to clear SQLite `threads`
     //    table and repopulate with `ClientDBThreadInfo`s.
     const operations: $ReadOnlyArray<ClientDBThreadStoreOperation> = [
       {
         type: 'remove_all',
       },
       ...convertedClientDBThreadInfos.map((thread: ClientDBThreadInfo) => ({
         type: 'replace',
         payload: thread,
       })),
     ];
 
     // 13. Try processing `ClientDBThreadStoreOperation`s and log out if
     //    `processThreadStoreOperationsSync(...)` throws an exception.
     try {
       commCoreModule.processThreadStoreOperationsSync(operations);
     } catch (exception) {
       console.log(exception);
       return { ...state, cookie: null };
     }
 
     return state;
   },
   [37]: (state: AppState) => {
     const operations = messageStoreOpsHandlers.convertOpsToClientDBOps([
       {
         type: 'remove_all_threads',
       },
       {
         type: 'replace_threads',
         payload: { threads: state.messageStore.threads },
       },
     ]);
 
     try {
       commCoreModule.processMessageStoreOperationsSync(operations);
     } catch (exception) {
       console.error(exception);
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
 
     return state;
   },
   [38]: (state: AppState) =>
     updateClientDBThreadStoreThreadInfos(
       state,
       legacyUpdateRolesAndPermissions,
     ),
   [39]: (state: AppState) => unshimClientDB(state, [messageTypes.EDIT_MESSAGE]),
   [40]: (state: AppState) =>
     updateClientDBThreadStoreThreadInfos(
       state,
       legacyUpdateRolesAndPermissions,
     ),
   [41]: (state: AppState) => {
     const queuedReports = state.reportStore.queuedReports.map(report => ({
       ...report,
       id: getUUID(),
     }));
     return {
       ...state,
       reportStore: { ...state.reportStore, queuedReports },
     };
   },
   [42]: (state: AppState) => {
     const reportStoreOperations: $ReadOnlyArray<ReportStoreOperation> = [
       { type: 'remove_all_reports' },
       ...convertReportsToReplaceReportOps(state.reportStore.queuedReports),
     ];
     const dbOperations: $ReadOnlyArray<ClientDBReportStoreOperation> =
       reportStoreOpsHandlers.convertOpsToClientDBOps(reportStoreOperations);
 
     try {
       commCoreModule.processReportStoreOperationsSync(dbOperations);
     } catch (exception) {
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
     return state;
   },
   [43]: async (state: any) => {
     const { messages, drafts, threads, messageStoreThreads } =
       await commCoreModule.getClientDBStore();
 
     const messageStoreThreadsOperations =
       createUpdateDBOpsForMessageStoreThreads(
         messageStoreThreads,
         convertMessageStoreThreadsToNewIDSchema,
       );
 
     const messageStoreMessagesOperations =
       createUpdateDBOpsForMessageStoreMessages(messages, messageInfos =>
         messageInfos.map(convertRawMessageInfoToNewIDSchema),
       );
 
     const threadOperations = createUpdateDBOpsForThreadStoreThreadInfos(
       threads,
       convertThreadStoreThreadInfosToNewIDSchema,
     );
 
     const draftOperations = generateIDSchemaMigrationOpsForDrafts(drafts);
 
     try {
       await Promise.all([
         commCoreModule.processMessageStoreOperations([
           ...messageStoreMessagesOperations,
           ...messageStoreThreadsOperations,
         ]),
         commCoreModule.processThreadStoreOperations(threadOperations),
         commCoreModule.processDraftStoreOperations(draftOperations),
       ]);
     } catch (exception) {
       console.log(exception);
       return { ...state, cookie: null };
     }
 
     const inviteLinksStore =
       state.inviteLinksStore ?? defaultState.inviteLinksStore;
 
     return {
       ...state,
       entryStore: convertEntryStoreToNewIDSchema(state.entryStore),
       messageStore: convertMessageStoreToNewIDSchema(state.messageStore),
       calendarFilters: state.calendarFilters.map(
         convertCalendarFilterToNewIDSchema,
       ),
       connection: convertConnectionInfoToNewIDSchema(state.connection),
       watchedThreadIDs: state.watchedThreadIDs.map(
         id => `${ashoatKeyserverID}|${id}`,
       ),
       inviteLinksStore: convertInviteLinksStoreToNewIDSchema(inviteLinksStore),
     };
   },
   [44]: async (state: any) => {
     const { cookie, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: { keyserverInfos: { [ashoatKeyserverID]: { cookie } } },
     };
   },
   [45]: async (state: any) => {
     const { updatesCurrentAsOf, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             updatesCurrentAsOf,
           },
         },
       },
     };
   },
   [46]: async (state: AppState) => {
     const { currentAsOf } = state.messageStore;
 
     return {
       ...state,
       messageStore: {
         ...state.messageStore,
         currentAsOf: { [ashoatKeyserverID]: currentAsOf },
       },
     };
   },
   [47]: async (state: any) => {
     const { urlPrefix, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             urlPrefix,
           },
         },
       },
     };
   },
   [48]: async (state: any) => {
     const { connection, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             connection,
           },
         },
       },
     };
   },
   [49]: async (state: AppState) => {
     const { keyserverStore, ...rest } = state;
 
     const { connection, ...keyserverRest } =
       keyserverStore.keyserverInfos[ashoatKeyserverID];
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverRest,
           },
         },
       },
       connection,
     };
   },
   [50]: async (state: any) => {
     const { connection, ...rest } = state;
     const { actualizedCalendarQuery, ...connectionRest } = connection;
 
     return {
       ...rest,
       connection: connectionRest,
       actualizedCalendarQuery,
     };
   },
   [51]: async (state: any) => {
     const { lastCommunicatedPlatformDetails, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             lastCommunicatedPlatformDetails,
           },
         },
       },
     };
   },
   [52]: async (state: AppState) => ({
     ...state,
     integrityStore: {
       threadHashes: {},
       threadHashingStatus: 'data_not_loaded',
     },
   }),
   [53]: (state: any) => {
     if (!state.userStore.inconsistencyReports) {
       return state;
     }
     const reportStoreOperations = convertReportsToReplaceReportOps(
       state.userStore.inconsistencyReports,
     );
     const dbOperations: $ReadOnlyArray<ClientDBReportStoreOperation> =
       reportStoreOpsHandlers.convertOpsToClientDBOps(reportStoreOperations);
     try {
       commCoreModule.processReportStoreOperationsSync(dbOperations);
     } catch (exception) {
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
 
     const { inconsistencyReports, ...newUserStore } = state.userStore;
     const queuedReports = reportStoreOpsHandlers.processStoreOperations(
       state.reportStore.queuedReports,
       reportStoreOperations,
     );
     return {
       ...state,
       userStore: newUserStore,
       reportStore: {
         ...state.reportStore,
         queuedReports,
       },
     };
   },
   [54]: (state: any) => {
     let updatedMessageStoreThreads: MessageStoreThreads = {};
     for (const threadID: string in state.messageStore.threads) {
       const { lastNavigatedTo, lastPruned, ...rest } =
         state.messageStore.threads[threadID];
 
       updatedMessageStoreThreads = {
         ...updatedMessageStoreThreads,
         [threadID]: rest,
       };
     }
 
     return {
       ...state,
       messageStore: {
         ...state.messageStore,
         threads: updatedMessageStoreThreads,
       },
     };
   },
   [55]: async (state: AppState) =>
     __DEV__
       ? {
           ...state,
           keyserverStore: {
             ...state.keyserverStore,
             keyserverInfos: {
               ...state.keyserverStore.keyserverInfos,
               [ashoatKeyserverID]: {
                 ...state.keyserverStore.keyserverInfos[ashoatKeyserverID],
                 urlPrefix: defaultURLPrefix,
               },
             },
           },
         }
       : state,
   [56]: (state: any) => {
     const { deviceToken, keyserverStore, ...rest } = state;
 
     return {
       ...rest,
       keyserverStore: {
         ...keyserverStore,
         keyserverInfos: {
           ...keyserverStore.keyserverInfos,
           [ashoatKeyserverID]: {
             ...keyserverStore.keyserverInfos[ashoatKeyserverID],
             deviceToken,
           },
         },
       },
     };
   },
   [57]: async (state: any) => {
     const {
-      // eslint-disable-next-line no-unused-vars
       connection,
       keyserverStore: { keyserverInfos },
       ...rest
     } = state;
     const newKeyserverInfos: { [string]: KeyserverInfo } = {};
     for (const key in keyserverInfos) {
       newKeyserverInfos[key] = {
         ...keyserverInfos[key],
         connection: { ...defaultConnectionInfo },
       };
     }
     return {
       ...rest,
       keyserverStore: {
         ...state.keyserverStore,
         keyserverInfos: newKeyserverInfos,
       },
     };
   },
   [58]: async (state: AppState) => {
     const userStoreOperations: $ReadOnlyArray<UserStoreOperation> = [
       { type: 'remove_all_users' },
       ...convertUserInfosToReplaceUserOps(state.userStore.userInfos),
     ];
     const dbOperations: $ReadOnlyArray<ClientDBUserStoreOperation> =
       userStoreOpsHandlers.convertOpsToClientDBOps(userStoreOperations);
 
     try {
       await commCoreModule.processUserStoreOperations(dbOperations);
     } catch (exception) {
       if (isTaskCancelledError(exception)) {
         return state;
       }
       return { ...state, cookie: null };
     }
     return state;
   },
   [59]: (state: AppState) => {
     const clientDBThreadInfos = commCoreModule.getAllThreadsSync();
     const rawThreadInfos = clientDBThreadInfos.map(
       deprecatedConvertClientDBThreadInfoToRawThreadInfo,
     );
     const rawThreadInfosObject = rawThreadInfos.reduce(
       (
         acc: { [string]: LegacyRawThreadInfo },
         threadInfo: LegacyRawThreadInfo,
       ) => {
         acc[threadInfo.id] = threadInfo;
         return acc;
       },
       {},
     );
 
     const migratedRawThreadInfos =
       persistMigrationToRemoveSelectRolePermissions(rawThreadInfosObject);
 
     const migratedThreadInfosArray = Object.keys(migratedRawThreadInfos).map(
       id => migratedRawThreadInfos[id],
     );
     const convertedClientDBThreadInfos = migratedThreadInfosArray.map(
       convertRawThreadInfoToClientDBThreadInfo,
     );
     const operations: $ReadOnlyArray<ClientDBThreadStoreOperation> = [
       {
         type: 'remove_all',
       },
       ...convertedClientDBThreadInfos.map((thread: ClientDBThreadInfo) => ({
         type: 'replace',
         payload: thread,
       })),
     ];
 
     try {
       commCoreModule.processThreadStoreOperationsSync(operations);
     } catch (exception) {
       console.log(exception);
       return { ...state, cookie: null };
     }
 
     return state;
   },
   [60]: (state: AppState) =>
     updateClientDBThreadStoreThreadInfos(
       state,
       legacyUpdateRolesAndPermissions,
     ),
   [61]: (state: AppState) => {
     const minimallyEncodeThreadInfosFunc = (
       threadStoreInfos: RawThreadInfos,
     ): RawThreadInfos =>
       Object.keys(threadStoreInfos).reduce(
         (acc: { [string]: RawThreadInfo }, key: string) => {
           const threadInfo = threadStoreInfos[key];
           acc[threadInfo.id] = threadInfo.minimallyEncoded
             ? threadInfo
             : minimallyEncodeRawThreadInfo(threadInfo);
           return acc;
         },
         {},
       );
     return updateClientDBThreadStoreThreadInfos(
       state,
       minimallyEncodeThreadInfosFunc,
     );
   },
 };
 
 // After migration 31, we'll no longer want to persist `messageStore.messages`
 // via redux-persist. However, we DO want to continue persisting everything in
 // `messageStore` EXCEPT for `messages`. The `blacklist` property in
 // `persistConfig` allows us to specify top-level keys that shouldn't be
 // persisted. However, we aren't able to specify nested keys in `blacklist`.
 // As a result, if we want to prevent nested keys from being persisted we'll
 // need to use `createTransform(...)` to specify an `inbound` function that
 // allows us to modify the `state` object before it's passed through
 // `JSON.stringify(...)` and written to disk. We specify the keys for which
 // this transformation should be executed in the `whitelist` property of the
 // `config` object that's passed to `createTransform(...)`.
-// eslint-disable-next-line no-unused-vars
 type PersistedMessageStore = {
   +local: { +[id: string]: LocalMessageInfo },
   +currentAsOf: { +[keyserverID: string]: number },
 };
 const messageStoreMessagesBlocklistTransform: Transform = createTransform(
   (state: MessageStore): PersistedMessageStore => {
     const { messages, threads, ...messageStoreSansMessages } = state;
     return { ...messageStoreSansMessages };
   },
   (state: MessageStore): MessageStore => {
     // We typically expect `messageStore.messages` to be `undefined` because
     // messages are persisted in the SQLite `messages` table rather than via
     // `redux-persist`. In this case we want to set `messageStore.messages`
     // to {} so we don't run into issues with `messageStore.messages` being
     // `undefined` (https://phab.comm.dev/D5545).
     //
     // However, in the case that a user is upgrading from a client where
     // `persistConfig.version` < 31, we expect `messageStore.messages` to
     // contain messages stored via `redux-persist` that we need in order
     // to correctly populate the SQLite `messages` table in migration 31
     // (https://phab.comm.dev/D2600).
     //
     // However, because `messageStoreMessagesBlocklistTransform` modifies
     // `messageStore` before migrations are run, we need to make sure we aren't
     // inadvertently clearing `messageStore.messages` (by setting to {}) before
     // messages are stored in SQLite (https://linear.app/comm/issue/ENG-2377).
     return {
       ...state,
       threads: state.threads ?? {},
       messages: state.messages ?? {},
     };
   },
   { whitelist: ['messageStore'] },
 );
 
 type PersistedReportStore = $Diff<
   ReportStore,
   { +queuedReports: $ReadOnlyArray<ClientReportCreationRequest> },
 >;
 const reportStoreTransform: Transform = createTransform(
   (state: ReportStore): PersistedReportStore => {
     return { enabledReports: state.enabledReports };
   },
   (state: PersistedReportStore): ReportStore => {
     return { ...state, queuedReports: [] };
   },
   { whitelist: ['reportStore'] },
 );
 
 type PersistedKeyserverInfo = $Diff<
   KeyserverInfo,
   { +connection: ConnectionInfo },
 >;
 type PersistedKeyserverStore = {
   +keyserverInfos: { +[key: string]: PersistedKeyserverInfo },
 };
 const keyserverStoreTransform: Transform = createTransform(
   (state: KeyserverStore): PersistedKeyserverStore => {
     const keyserverInfos: { [string]: PersistedKeyserverInfo } = {};
     for (const key in state.keyserverInfos) {
       const { connection, ...rest } = state.keyserverInfos[key];
       keyserverInfos[key] = rest;
     }
     return {
       ...state,
       keyserverInfos,
     };
   },
   (state: PersistedKeyserverStore): KeyserverStore => {
     const keyserverInfos: { [string]: KeyserverInfo } = {};
     for (const key in state.keyserverInfos) {
       keyserverInfos[key] = {
         ...state.keyserverInfos[key],
         connection: { ...defaultConnectionInfo },
       };
     }
     return {
       ...state,
       keyserverInfos,
     };
   },
   { whitelist: ['keyserverStore'] },
 );
 
 const persistConfig = {
   key: 'root',
   storage: AsyncStorage,
   blacklist: [
     'loadingStatuses',
     'lifecycleState',
     'dimensions',
     'draftStore',
     'connectivity',
     'deviceOrientation',
     'frozen',
     'threadStore',
     'storeLoaded',
     'connection',
   ],
   debug: __DEV__,
   version: 61,
   transforms: [
     messageStoreMessagesBlocklistTransform,
     reportStoreTransform,
     keyserverStoreTransform,
   ],
   migrate: (createAsyncMigrate(migrations, { debug: __DEV__ }): any),
   timeout: ((__DEV__ ? 0 : undefined): number | void),
 };
 
 const codeVersion: number = commCoreModule.getCodeVersion();
 
 // This local exists to avoid a circular dependency where redux-setup needs to
 // import all the navigation and screen stuff, but some of those screens want to
 // access the persistor to purge its state.
 let storedPersistor = null;
 function setPersistor(persistor: *) {
   storedPersistor = persistor;
 }
 function getPersistor(): empty {
   invariant(storedPersistor, 'should be set');
   return storedPersistor;
 }
 
 export { persistConfig, codeVersion, setPersistor, getPersistor };
diff --git a/native/roles/change-roles-screen.react.js b/native/roles/change-roles-screen.react.js
index 1eb07204a..9d1729de9 100644
--- a/native/roles/change-roles-screen.react.js
+++ b/native/roles/change-roles-screen.react.js
@@ -1,303 +1,302 @@
 // @flow
 
 import { useActionSheet } from '@expo/react-native-action-sheet';
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, Platform, ActivityIndicator } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { changeThreadMemberRolesActionTypes } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js';
 import { roleIsAdminRole } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types.js';
 import { values } from 'lib/utils/objects.js';
 
 import ChangeRolesHeaderRightButton from './change-roles-header-right-button.react.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import type { ChatNavigationProp } from '../chat/chat.react';
 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';
 
 export type ChangeRolesScreenParams = {
   +threadInfo: ThreadInfo,
   +memberInfo: RelativeMemberInfo,
   +role: ?string,
 };
 
 type Props = {
   +navigation: ChatNavigationProp<'ChangeRolesScreen'>,
   +route: NavigationRoute<'ChangeRolesScreen'>,
 };
 
 const changeRolesLoadingStatusSelector = createLoadingStatusSelector(
   changeThreadMemberRolesActionTypes,
 );
 
 function ChangeRolesScreen(props: Props): React.Node {
   const { navigation, route } = props;
   const { threadInfo, memberInfo, role } = props.route.params;
   invariant(role, 'Role must be defined');
 
   const changeRolesLoadingStatus: LoadingStatus = useSelector(
     changeRolesLoadingStatusSelector,
   );
 
   const styles = useStyles(unboundStyles);
 
   const [selectedRole, setSelectedRole] = React.useState<string>(role);
   const roleOptions = React.useMemo(
     () =>
       values(threadInfo.roles).map(threadRole => ({
         id: threadRole.id,
         name: threadRole.name,
       })),
     [threadInfo.roles],
   );
   const selectedRoleName = React.useMemo(
     () => roleOptions.find(roleOption => roleOption.id === selectedRole)?.name,
     [roleOptions, selectedRole],
   );
 
   const onRoleChange = React.useCallback(
     (selectedIndex: ?number) => {
       if (
         selectedIndex === undefined ||
         selectedIndex === null ||
         selectedIndex === roleOptions.length
       ) {
         return;
       }
 
       const newRole = roleOptions[selectedIndex].id;
 
       setSelectedRole(newRole);
       navigation.setParams({
         threadInfo,
         memberInfo,
         role: newRole,
       });
     },
     [navigation, setSelectedRole, roleOptions, memberInfo, threadInfo],
   );
 
   const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
   const { showActionSheetWithOptions } = useActionSheet();
   const insets = useSafeAreaInsets();
 
   const showActionSheet = React.useCallback(() => {
     const options =
       Platform.OS === 'ios'
         ? [...roleOptions.map(roleOption => roleOption.name), 'Cancel']
         : [...roleOptions.map(roleOption => roleOption.name)];
 
     const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
 
     const containerStyle = {
       paddingBottom: insets.bottom,
     };
 
     showActionSheetWithOptions(
       {
         options,
         cancelButtonIndex,
         containerStyle,
         userInterfaceStyle: activeTheme ?? 'dark',
       },
       onRoleChange,
     );
   }, [
     roleOptions,
     onRoleChange,
     insets.bottom,
     activeTheme,
     showActionSheetWithOptions,
   ]);
 
   const otherUsersButNoOtherAdminsValue = useSelector(
     otherUsersButNoOtherAdmins(threadInfo.id),
   );
 
   const memberIsAdmin = React.useMemo(() => {
     invariant(memberInfo.role, 'Expected member role to be defined');
     return roleIsAdminRole(threadInfo.roles[memberInfo.role]);
   }, [threadInfo.roles, memberInfo.role]);
 
   const shouldRoleChangeBeDisabled = React.useMemo(
     () => otherUsersButNoOtherAdminsValue && memberIsAdmin,
     [otherUsersButNoOtherAdminsValue, memberIsAdmin],
   );
 
   const roleSelector = React.useMemo(() => {
     if (shouldRoleChangeBeDisabled) {
       return (
         <View style={styles.roleSelector}>
           <Text style={styles.disabledCurrentRole}>{selectedRoleName}</Text>
           <SWMansionIcon
             name="edit-1"
             size={20}
             style={styles.disabledPencilIcon}
           />
         </View>
       );
     }
 
     return (
       <TouchableOpacity onPress={showActionSheet} style={styles.roleSelector}>
         <Text style={styles.currentRole}>{selectedRoleName}</Text>
         <SWMansionIcon name="edit-1" size={20} style={styles.pencilIcon} />
       </TouchableOpacity>
     );
   }, [showActionSheet, styles, selectedRoleName, shouldRoleChangeBeDisabled]);
 
   const disabledRoleChangeMessage = React.useMemo(() => {
     if (!shouldRoleChangeBeDisabled) {
       return null;
     }
 
     return (
       <View style={styles.disabledWarningBackground}>
         <SWMansionIcon name="info-circle" size={24} style={styles.infoIcon} />
         <Text style={styles.disabledWarningText}>
           There must be at least one admin at any given time in a community.
         </Text>
       </View>
     );
   }, [
     shouldRoleChangeBeDisabled,
     styles.disabledWarningBackground,
     styles.infoIcon,
     styles.disabledWarningText,
   ]);
 
   React.useEffect(() => {
     navigation.setOptions({
-      // eslint-disable-next-line react/display-name
       headerRight: () => {
         if (changeRolesLoadingStatus === 'loading') {
           return (
             <ActivityIndicator
               size="small"
               color="white"
               style={styles.activityIndicator}
             />
           );
         }
         return (
           <ChangeRolesHeaderRightButton
             route={route}
             shouldRoleChangeBeDisabled={shouldRoleChangeBeDisabled}
           />
         );
       },
     });
   }, [
     changeRolesLoadingStatus,
     navigation,
     styles.activityIndicator,
     route,
     shouldRoleChangeBeDisabled,
   ]);
 
   return (
     <View>
       <View style={styles.descriptionBackground}>
         <Text style={styles.descriptionText}>
           Members can only be assigned one role at a time. Changing a
           member&rsquo;s role will replace their previously assigned role.
         </Text>
       </View>
       <View style={styles.memberInfo}>
         <UserAvatar userID={memberInfo.id} size="XL" />
         <Text style={styles.memberInfoUsername}>{memberInfo.username}</Text>
       </View>
       {roleSelector}
       {disabledRoleChangeMessage}
     </View>
   );
 }
 
 const unboundStyles = {
   descriptionBackground: {
     backgroundColor: 'panelForeground',
     marginBottom: 20,
   },
   descriptionText: {
     color: 'panelBackgroundLabel',
     padding: 16,
     fontSize: 14,
   },
   memberInfo: {
     backgroundColor: 'panelForeground',
     padding: 16,
     marginBottom: 30,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
   },
   memberInfoUsername: {
     color: 'panelForegroundLabel',
     marginTop: 8,
     fontSize: 18,
     fontWeight: '500',
   },
   roleSelectorLabel: {
     color: 'panelForegroundSecondaryLabel',
     marginLeft: 8,
     fontSize: 12,
   },
   roleSelector: {
     backgroundColor: 'panelForeground',
     marginTop: 8,
     padding: 16,
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   currentRole: {
     color: 'panelForegroundSecondaryLabel',
     fontSize: 16,
   },
   disabledCurrentRole: {
     color: 'disabledButton',
     fontSize: 16,
   },
   pencilIcon: {
     color: 'panelInputSecondaryForeground',
   },
   disabledPencilIcon: {
     color: 'disabledButton',
   },
   disabledWarningBackground: {
     backgroundColor: 'disabledButton',
     padding: 16,
     display: 'flex',
     marginTop: 20,
     flexDirection: 'row',
     justifyContent: 'center',
     width: '75%',
     alignSelf: 'center',
   },
   disabledWarningText: {
     color: 'panelForegroundSecondaryLabel',
     fontSize: 14,
     marginRight: 8,
     display: 'flex',
   },
   infoIcon: {
     color: 'panelForegroundSecondaryLabel',
     marginRight: 8,
     marginLeft: 8,
     marginBottom: 12,
   },
   activityIndicator: {
     paddingRight: 15,
   },
 };
 
 export default ChangeRolesScreen;
diff --git a/native/roles/create-roles-screen.react.js b/native/roles/create-roles-screen.react.js
index 3a92ae30e..6e27a9a81 100644
--- a/native/roles/create-roles-screen.react.js
+++ b/native/roles/create-roles-screen.react.js
@@ -1,291 +1,290 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { modifyCommunityRoleActionTypes } 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 UserSurfacedPermissionOption,
   type UserSurfacedPermission,
   userSurfacedPermissionOptions,
 } from 'lib/types/thread-permission-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import CreateRolesHeaderRightButton from './create-roles-header-right-button.react.js';
 import type { RolesNavigationProp } from './roles-navigator.react.js';
 import EnumSettingsOption from '../components/enum-settings-option.react.js';
 import SWMansionIcon from '../components/swmansion-icon.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 { useStyles } from '../themes/colors.js';
 
 export type CreateRolesScreenParams = {
   +threadInfo: ThreadInfo,
   +action: 'create_role' | 'edit_role',
   +existingRoleID?: string,
   +roleName: string,
   +rolePermissions: $ReadOnlySet<UserSurfacedPermission>,
 };
 
 type CreateRolesScreenProps = {
   +navigation: RolesNavigationProp<'CreateRolesScreen'>,
   +route: NavigationRoute<'CreateRolesScreen'>,
 };
 
 const createRolesLoadingStatusSelector = createLoadingStatusSelector(
   modifyCommunityRoleActionTypes,
 );
 
 function CreateRolesScreen(props: CreateRolesScreenProps): React.Node {
   const {
     threadInfo,
     action,
     existingRoleID,
     roleName: defaultRoleName,
     rolePermissions: defaultRolePermissions,
   } = props.route.params;
 
   const createRolesLoadingStatus: LoadingStatus = useSelector(
     createRolesLoadingStatusSelector,
   );
 
   const [customRoleName, setCustomRoleName] =
     React.useState<string>(defaultRoleName);
   const [selectedPermissions, setSelectedPermissions] = React.useState<
     $ReadOnlySet<UserSurfacedPermission>,
   >(defaultRolePermissions);
 
   const [roleCreationFailed, setRoleCreationFailed] =
     React.useState<boolean>(false);
 
   const styles = useStyles(unboundStyles);
 
   const errorStyles = React.useMemo(
     () =>
       roleCreationFailed
         ? [styles.errorContainer, styles.errorContainerVisible]
         : styles.errorContainer,
     [roleCreationFailed, styles.errorContainer, styles.errorContainerVisible],
   );
 
   const onClearPermissions = React.useCallback(() => {
     setSelectedPermissions(new Set());
   }, []);
 
   const isSelectedPermissionsEmpty = selectedPermissions.size === 0;
   const clearPermissionsText = React.useMemo(() => {
     const textStyle = isSelectedPermissionsEmpty
       ? styles.clearPermissionsTextDisabled
       : styles.clearPermissionsText;
 
     return (
       <TouchableOpacity
         onPress={onClearPermissions}
         disabled={isSelectedPermissionsEmpty}
       >
         <Text style={textStyle}>Clear permissions</Text>
       </TouchableOpacity>
     );
   }, [
     isSelectedPermissionsEmpty,
     onClearPermissions,
     styles.clearPermissionsText,
     styles.clearPermissionsTextDisabled,
   ]);
 
   const isUserSurfacedPermissionSelected = React.useCallback(
     (option: UserSurfacedPermissionOption) =>
       selectedPermissions.has(option.userSurfacedPermission),
     [selectedPermissions],
   );
 
   const onEnumValuePress = React.useCallback(
     (option: UserSurfacedPermissionOption) =>
       setSelectedPermissions(currentPermissions => {
         if (currentPermissions.has(option.userSurfacedPermission)) {
           const newPermissions = new Set(currentPermissions);
           newPermissions.delete(option.userSurfacedPermission);
           return newPermissions;
         } else {
           return new Set([
             ...currentPermissions,
             option.userSurfacedPermission,
           ]);
         }
       }),
     [],
   );
 
   React.useEffect(
     () =>
       props.navigation.setParams({
         threadInfo,
         action,
         existingRoleID,
         roleName: customRoleName,
         rolePermissions: selectedPermissions,
       }),
     [
       props.navigation,
       threadInfo,
       action,
       existingRoleID,
       customRoleName,
       selectedPermissions,
     ],
   );
 
   const permissionsList = React.useMemo(
     () =>
       [...userSurfacedPermissionOptions].map(permission => (
         <EnumSettingsOption
           key={permission.title}
           name={permission.title}
           description={permission.description}
           enumValue={isUserSurfacedPermissionSelected(permission)}
           onEnumValuePress={() => onEnumValuePress(permission)}
         />
       )),
     [isUserSurfacedPermissionSelected, onEnumValuePress],
   );
 
   const onChangeRoleNameInput = React.useCallback((roleName: string) => {
     setRoleCreationFailed(false);
     setCustomRoleName(roleName);
   }, []);
 
   React.useEffect(
     () =>
       props.navigation.setOptions({
-        // eslint-disable-next-line react/display-name
         headerRight: () => {
           if (createRolesLoadingStatus === 'loading') {
             return (
               <ActivityIndicator
                 size="small"
                 color="white"
                 style={styles.activityIndicator}
               />
             );
           }
 
           return (
             <CreateRolesHeaderRightButton
               route={props.route}
               setRoleCreationFailed={setRoleCreationFailed}
             />
           );
         },
       }),
     [
       createRolesLoadingStatus,
       props.navigation,
       styles.activityIndicator,
       props.route,
     ],
   );
 
   return (
     <View>
       <View style={styles.roleNameContainer}>
         <Text style={styles.roleNameText}>ROLE NAME</Text>
         <View style={styles.roleInput}>
           <TextInput
             style={styles.roleInputComponent}
             value={customRoleName}
             onChangeText={onChangeRoleNameInput}
             editable={true}
           />
           <SWMansionIcon name="edit-1" size={20} style={styles.pencilIcon} />
         </View>
         <View style={errorStyles}>
           <Text style={styles.errorText}>
             There is already a role with this name in the community
           </Text>
         </View>
       </View>
       <View style={styles.permissionsContainer}>
         <View style={styles.permissionsHeader}>
           <Text style={styles.permissionsText}>PERMISSIONS</Text>
           {clearPermissionsText}
         </View>
         <ScrollView style={styles.permissionsListContainer}>
           {permissionsList}
         </ScrollView>
       </View>
     </View>
   );
 }
 
 const unboundStyles = {
   roleNameContainer: {
     marginTop: 30,
   },
   roleNameText: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     marginBottom: 5,
     marginLeft: 10,
   },
   roleInput: {
     backgroundColor: 'panelForeground',
     padding: 12,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   roleInputComponent: {
     color: 'panelForegroundLabel',
     fontSize: 16,
   },
   pencilIcon: {
     color: 'panelInputSecondaryForeground',
   },
   errorContainer: {
     marginTop: 10,
     alignItems: 'center',
     opacity: 0,
   },
   errorContainerVisible: {
     opacity: 1,
   },
   errorText: {
     color: 'redText',
     fontSize: 14,
   },
   permissionsContainer: {
     marginTop: 20,
     paddingBottom: 220,
   },
   permissionsHeader: {
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   permissionsText: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     marginLeft: 10,
   },
   clearPermissionsText: {
     color: 'purpleLink',
     fontSize: 12,
     marginRight: 15,
   },
   clearPermissionsTextDisabled: {
     color: 'disabledButton',
     fontSize: 12,
     marginRight: 15,
   },
   permissionsListContainer: {
     backgroundColor: 'panelForeground',
     marginTop: 10,
   },
   activityIndicator: {
     paddingRight: 15,
   },
 };
 
 export default CreateRolesScreen;
diff --git a/native/roles/roles-navigator.react.js b/native/roles/roles-navigator.react.js
index eb2b059a8..8dbc8146f 100644
--- a/native/roles/roles-navigator.react.js
+++ b/native/roles/roles-navigator.react.js
@@ -1,96 +1,95 @@
 // @flow
 
 import type {
   StackNavigationProp,
   StackNavigationHelpers,
   StackHeaderLeftButtonProps,
 } from '@react-navigation/core';
 import { createStackNavigator } from '@react-navigation/stack';
 import * as React from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import CommunityRolesHeaderLeftButton from './community-roles-header-left-button.react.js';
 import CommunityRolesScreen from './community-roles-screen.react.js';
 import CreateRolesScreen from './create-roles-screen.react.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import {
   type ScreenParamList,
   type RolesParamList,
   CommunityRolesScreenRouteName,
   CreateRolesScreenRouteName,
 } from '../navigation/route-names.js';
 import { useStyles, useColors } from '../themes/colors.js';
 
 const safeAreaEdges = ['bottom'];
 
 export type RolesNavigationProp<RouteName: $Keys<RolesParamList>> =
   StackNavigationProp<ScreenParamList, RouteName>;
 
 const RolesStack = createStackNavigator<
   ScreenParamList,
   RolesParamList,
   StackNavigationHelpers<ScreenParamList>,
 >();
 
 const communityRolesScreenOptions = {
   headerTitle: 'Create role',
-  // eslint-disable-next-line react/display-name
   headerLeft: (headerLeftProps: StackHeaderLeftButtonProps) => (
     <CommunityRolesHeaderLeftButton {...headerLeftProps} />
   ),
 };
 
 const createRolesScreenOptions = {
   headerTitle: 'Create role',
 };
 
 type RolesNavigatorProps = {
   +navigation: RootNavigationProp<'RolesNavigator'>,
   ...
 };
 
 // eslint-disable-next-line no-unused-vars
 function RolesNavigator(props: RolesNavigatorProps): React.Node {
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const rolesScreenOptions = React.useMemo(
     () => ({
       headerBackTitleVisible: false,
       headerStyle: {
         backgroundColor: colors.tabBarBackground,
       },
       headerTintColor: colors.panelForegroundLabel,
       headerLeftContainerStyle: {
         paddingLeft: 12,
       },
     }),
     [colors.tabBarBackground, colors.panelForegroundLabel],
   );
 
   return (
     <SafeAreaView style={styles.container} edges={safeAreaEdges}>
       <RolesStack.Navigator screenOptions={rolesScreenOptions}>
         <RolesStack.Screen
           name={CommunityRolesScreenRouteName}
           component={CommunityRolesScreen}
           options={communityRolesScreenOptions}
         />
         <RolesStack.Screen
           name={CreateRolesScreenRouteName}
           component={CreateRolesScreen}
           options={createRolesScreenOptions}
         />
       </RolesStack.Navigator>
     </SafeAreaView>
   );
 }
 
 const unboundStyles = {
   container: {
     flex: 1,
     backgroundColor: 'modalBackground',
   },
 };
 
 export default RolesNavigator;
diff --git a/native/tooltip/tooltip.react.js b/native/tooltip/tooltip.react.js
index 6dc7ae008..d76da75fa 100644
--- a/native/tooltip/tooltip.react.js
+++ b/native/tooltip/tooltip.react.js
@@ -1,607 +1,605 @@
 // @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: $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 };
diff --git a/native/utils/animation-utils.js b/native/utils/animation-utils.js
index 76155c99c..705d06027 100644
--- a/native/utils/animation-utils.js
+++ b/native/utils/animation-utils.js
@@ -1,256 +1,254 @@
 // @flow
 
 import * as React from 'react';
 import { State as GestureState } from 'react-native-gesture-handler';
 import Animated, {
   EasingNode,
   type NodeParam,
   type SpringConfig,
   type TimingConfig,
 } from 'react-native-reanimated';
 
-/* eslint-disable import/no-named-as-default-member */
 const {
   Clock,
   Node,
   Value,
   block,
   cond,
   not,
   and,
   or,
   greaterThan,
   lessThan,
   eq,
   neq,
   add,
   sub,
   divide,
   set,
   max,
   startClock,
   stopClock,
   clockRunning,
   timing,
   spring,
   SpringUtils,
 } = Animated;
-/* eslint-enable import/no-named-as-default-member */
 
 function clamp(
   value: Node,
   minValue: Node | number,
   maxValue: Node | number,
 ): Node {
   return cond(
     greaterThan(value, maxValue),
     maxValue,
     cond(greaterThan(minValue, value), minValue, value),
   );
 }
 
 function delta(value: Node): Node {
   const prevValue = new Value(0);
   const deltaValue = new Value(0);
   return block([
     set(deltaValue, cond(eq(prevValue, 0), 0, sub(value, prevValue))),
     set(prevValue, value),
     deltaValue,
   ]);
 }
 
 function gestureJustStarted(state: Node): Node {
   const prevValue = new Value(-1);
   return cond(eq(prevValue, state), 0, [
     set(prevValue, state),
     eq(state, GestureState.ACTIVE),
   ]);
 }
 
 function gestureJustEnded(state: Node): Node {
   const prevValue = new Value(-1);
   return cond(eq(prevValue, state), 0, [
     set(prevValue, state),
     eq(state, GestureState.END),
   ]);
 }
 
 const defaultTimingConfig = {
   duration: 250,
   easing: EasingNode.out(EasingNode.ease),
 };
 
 function runTiming(
   clock: Clock,
   initialValue: Node | number,
   finalValue: Node | number,
   startStopClock: boolean = true,
   config?: Partial<TimingConfig>,
 ): Node {
   const state = {
     finished: new Value(0),
     position: new Value(0),
     frameTime: new Value(0),
     time: new Value(0),
   };
   const timingConfig = {
     ...defaultTimingConfig,
     ...config,
     toValue: new Value(0),
   };
   return block([
     cond(not(clockRunning(clock)), [
       set(state.finished, 0),
       set(state.frameTime, 0),
       set(state.time, 0),
       set(state.position, initialValue),
       set(timingConfig.toValue, finalValue),
       startStopClock ? startClock(clock) : undefined,
     ]),
     timing(clock, state, timingConfig),
     cond(state.finished, startStopClock ? stopClock(clock) : undefined),
     state.position,
   ]);
 }
 
 const defaultSpringConfig = SpringUtils.makeDefaultConfig();
 
 type SpringAnimationInitialState = Partial<{
   +velocity: Value | number,
 }>;
 function runSpring(
   clock: Clock,
   initialValue: Node | number,
   finalValue: Node | number,
   startStopClock: boolean = true,
   config?: Partial<SpringConfig>,
   initialState?: SpringAnimationInitialState,
 ): Node {
   const state = {
     finished: new Value(0),
     position: new Value(0),
     velocity: new Value(0),
     time: new Value(0),
   };
   const springConfig = {
     ...defaultSpringConfig,
     ...config,
     toValue: new Value(0),
   };
   return block([
     cond(not(clockRunning(clock)), [
       set(state.finished, 0),
       set(state.velocity, initialState?.velocity ?? 0),
       set(state.time, 0),
       set(state.position, initialValue),
       set(springConfig.toValue, finalValue),
       startStopClock ? startClock(clock) : undefined,
     ]),
     spring(clock, state, springConfig),
     cond(state.finished, startStopClock ? stopClock(clock) : undefined),
     state.position,
   ]);
 }
 
 // You provide a node that performs a "ratchet",
 // and this function will call it as keyboard height increases
 function ratchetAlongWithKeyboardHeight(
   keyboardHeight: Node,
   ratchetFunction: NodeParam,
 ): Node {
   const prevKeyboardHeightValue = new Value(-1);
   // In certain situations, iOS will send multiple keyboardShows in rapid
   // succession with increasing height values. Only the final value has any
   // semblance of reality. I've encountered this when using the native
   // password management integration
   const whenToUpdate = greaterThan(
     keyboardHeight,
     max(prevKeyboardHeightValue, 0),
   );
   const whenToReset = and(
     eq(keyboardHeight, 0),
     greaterThan(prevKeyboardHeightValue, 0),
   );
   return block([
     cond(
       lessThan(prevKeyboardHeightValue, 0),
       set(prevKeyboardHeightValue, keyboardHeight),
     ),
     cond(or(whenToUpdate, whenToReset), ratchetFunction),
     set(prevKeyboardHeightValue, keyboardHeight),
   ]);
 }
 
 function useReanimatedValueForBoolean(booleanValue: boolean): Value {
   const reanimatedValueRef = React.useRef<?Value>();
   if (!reanimatedValueRef.current) {
     reanimatedValueRef.current = new Value(booleanValue ? 1 : 0);
   }
   const val = reanimatedValueRef.current;
   React.useEffect(() => {
     reanimatedValueRef.current?.setValue(booleanValue ? 1 : 0);
   }, [booleanValue]);
   return val;
 }
 
 // Target can be either 0 or 1. Caller handles interpolating
 function animateTowards(
   target: Node,
   fullAnimationLength: number, // in ms
 ): Node {
   const curValue = new Value(-1);
   const prevTarget = new Value(-1);
   const clock = new Clock();
 
   const prevClockValue = new Value(0);
   const curDeltaClockValue = new Value(0);
   const deltaClockValue = [
     set(
       curDeltaClockValue,
       cond(eq(prevClockValue, 0), 0, sub(clock, prevClockValue)),
     ),
     set(prevClockValue, clock),
     curDeltaClockValue,
   ];
   const progressPerFrame = divide(deltaClockValue, fullAnimationLength);
 
   return block([
     [
       cond(eq(curValue, -1), set(curValue, target)),
       cond(eq(prevTarget, -1), set(prevTarget, target)),
     ],
     cond(neq(target, prevTarget), [stopClock(clock), set(prevTarget, target)]),
     cond(neq(curValue, target), [
       cond(not(clockRunning(clock)), [
         set(prevClockValue, 0),
         startClock(clock),
       ]),
       set(
         curValue,
         cond(
           eq(target, 1),
           add(curValue, progressPerFrame),
           sub(curValue, progressPerFrame),
         ),
       ),
     ]),
     [
       cond(greaterThan(curValue, 1), set(curValue, 1)),
       cond(lessThan(curValue, 0), set(curValue, 0)),
     ],
     cond(eq(curValue, target), [stopClock(clock)]),
     curValue,
   ]);
 }
 
 export {
   clamp,
   delta,
   gestureJustStarted,
   gestureJustEnded,
   runTiming,
   runSpring,
   ratchetAlongWithKeyboardHeight,
   useReanimatedValueForBoolean,
   animateTowards,
 };
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
index 5276d3954..d6b9427ef 100644
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -1,163 +1,159 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { type RobotextChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import {
   entityTextToReact,
   useENSNamesForEntityText,
 } from 'lib/utils/entity-text.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import InlineEngagement from './inline-engagement.react.js';
 import css from './robotext-message.css';
 import Markdown from '../markdown/markdown.react.js';
 import { linkRules } from '../markdown/rules.react.js';
 import { usePushUserProfileModal } from '../modals/user-profile/user-profile-utils.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useMessageTooltip } from '../tooltips/tooltip-action-utils.js';
 import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 const availableTooltipPositionsForRobotext = [
   tooltipPositions.LEFT,
   tooltipPositions.LEFT_TOP,
   tooltipPositions.LEFT_BOTTOM,
   tooltipPositions.RIGHT,
   tooltipPositions.RIGHT_TOP,
   tooltipPositions.RIGHT_BOTTOM,
 ];
 
 type Props = {
   +item: RobotextChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 function RobotextMessage(props: Props): React.Node {
   let inlineEngagement;
   const { item, threadInfo } = props;
   const { threadCreatedFromMessage, reactions } = item;
   if (threadCreatedFromMessage || Object.keys(reactions).length > 0) {
     inlineEngagement = (
       <div className={css.sidebarMarginTop}>
         <InlineEngagement
           messageInfo={item.messageInfo}
           threadInfo={threadInfo}
           sidebarThreadInfo={threadCreatedFromMessage}
           reactions={reactions}
           positioning="center"
         />
       </div>
     );
   }
 
   const { messageInfo, robotext } = item;
   const { threadID } = messageInfo;
   const robotextWithENSNames = useENSNamesForEntityText(robotext);
   invariant(
     robotextWithENSNames,
     'useENSNamesForEntityText only returns falsey when passed falsey',
   );
   const textParts = React.useMemo(() => {
     return entityTextToReact(robotextWithENSNames, threadID, {
-      // eslint-disable-next-line react/display-name
       renderText: ({ text }) => (
         <Markdown rules={linkRules(false)}>{text}</Markdown>
       ),
-      // eslint-disable-next-line react/display-name
       renderThread: ({ id, name }) => <ThreadEntity id={id} name={name} />,
-      // eslint-disable-next-line react/display-name
       renderUser: ({ userID, usernameText }) => (
         <UserEntity userID={userID} usernameText={usernameText} />
       ),
-      // eslint-disable-next-line react/display-name
       renderColor: ({ hex }) => <ColorEntity color={hex} />,
     });
   }, [robotextWithENSNames, threadID]);
 
   const { onMouseEnter, onMouseLeave } = useMessageTooltip({
     item,
     threadInfo,
     availablePositions: availableTooltipPositionsForRobotext,
   });
 
   return (
     <div className={css.robotextContainer}>
       <div
         className={css.innerRobotextContainer}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
         <span>{textParts}</span>
       </div>
       {inlineEngagement}
     </div>
   );
 }
 
 type BaseInnerThreadEntityProps = {
   +id: string,
   +name: string,
 };
 type InnerThreadEntityProps = {
   ...BaseInnerThreadEntityProps,
   +threadInfo: ThreadInfo,
   +dispatch: Dispatch,
 };
 class InnerThreadEntity extends React.PureComponent<InnerThreadEntityProps> {
   render(): React.Node {
     return <a onClick={this.onClickThread}>{this.props.name}</a>;
   }
 
   onClickThread = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const id = this.props.id;
     this.props.dispatch({
       type: updateNavInfoActionType,
       payload: {
         activeChatThreadID: id,
       },
     });
   };
 }
 const ThreadEntity = React.memo<BaseInnerThreadEntityProps>(
   function ConnectedInnerThreadEntity(props: BaseInnerThreadEntityProps) {
     const { id } = props;
     const threadInfo = useSelector(state => threadInfoSelector(state)[id]);
     const dispatch = useDispatch();
 
     return (
       <InnerThreadEntity
         {...props}
         threadInfo={threadInfo}
         dispatch={dispatch}
       />
     );
   },
 );
 
 type UserEntityProps = {
   +userID: string,
   +usernameText: string,
 };
 
 function UserEntity(props: UserEntityProps) {
   const { userID, usernameText } = props;
 
   const pushUserProfileModal = usePushUserProfileModal(userID);
 
   return <a onClick={pushUserProfileModal}>{usernameText}</a>;
 }
 
 function ColorEntity(props: { color: string }) {
   const colorStyle = { color: props.color };
   return <span style={colorStyle}>{props.color}</span>;
 }
 
 const MemoizedRobotextMessage: React.ComponentType<Props> =
   React.memo<Props>(RobotextMessage);
 
 export default MemoizedRobotextMessage;
diff --git a/web/markdown/rules.react.js b/web/markdown/rules.react.js
index 7a54359a0..4df9cb115 100644
--- a/web/markdown/rules.react.js
+++ b/web/markdown/rules.react.js
@@ -1,253 +1,248 @@
 // @flow
 
 import _memoize from 'lodash/memoize.js';
 import * as React from 'react';
 import * as SimpleMarkdown from 'simple-markdown';
 
 import * as SharedMarkdown from 'lib/shared/markdown.js';
 import { chatMentionRegex } from 'lib/shared/mention-utils.js';
 import type {
   ChatMentionCandidates,
   ThreadInfo,
 } from 'lib/types/thread-types.js';
 
 import MarkdownChatMention from './markdown-chat-mention.react.js';
 import MarkdownSpoiler from './markdown-spoiler.react.js';
 import MarkdownUserMention from './markdown-user-mention.react.js';
 
 export type MarkdownRules = {
   +simpleMarkdownRules: SharedMarkdown.ParserRules,
   +useDarkStyle: boolean,
 };
 
 const linkRules: boolean => MarkdownRules = _memoize(useDarkStyle => {
   const simpleMarkdownRules = {
     // We are using default simple-markdown rules
     // For more details, look at native/markdown/rules.react
     link: {
       ...SimpleMarkdown.defaultRules.link,
       match: () => null,
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <a
           href={SimpleMarkdown.sanitizeUrl(node.target)}
           key={state.key}
           title={node.title}
           target="_blank"
           rel="noopener noreferrer"
         >
           {output(node.content, state)}
         </a>
       ),
     },
     paragraph: {
       ...SimpleMarkdown.defaultRules.paragraph,
       match: SimpleMarkdown.blockRegex(SharedMarkdown.paragraphRegex),
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <React.Fragment key={state.key}>
           {output(node.content, state)}
         </React.Fragment>
       ),
     },
     text: SimpleMarkdown.defaultRules.text,
     url: {
       ...SimpleMarkdown.defaultRules.url,
       match: SimpleMarkdown.inlineRegex(SharedMarkdown.urlRegex),
     },
   };
   return {
     simpleMarkdownRules: simpleMarkdownRules,
     useDarkStyle,
   };
 });
 
 const markdownRules: boolean => MarkdownRules = _memoize(useDarkStyle => {
   const linkMarkdownRules = linkRules(useDarkStyle);
 
   const simpleMarkdownRules = {
     ...linkMarkdownRules.simpleMarkdownRules,
     autolink: SimpleMarkdown.defaultRules.autolink,
     link: {
       ...linkMarkdownRules.simpleMarkdownRules.link,
       match: SimpleMarkdown.defaultRules.link.match,
     },
     blockQuote: {
       ...SimpleMarkdown.defaultRules.blockQuote,
       // match end of blockQuote by either \n\n or end of string
       match: SharedMarkdown.matchBlockQuote(SharedMarkdown.blockQuoteRegex),
       parse: SharedMarkdown.parseBlockQuote,
     },
     spoiler: {
       order: SimpleMarkdown.defaultRules.paragraph.order - 1,
       match: SimpleMarkdown.inlineRegex(SharedMarkdown.spoilerRegex),
       parse(
         capture: SharedMarkdown.Capture,
         parse: SharedMarkdown.Parser,
         state: SharedMarkdown.State,
       ) {
         const content = capture[1];
         return {
           content: SimpleMarkdown.parseInline(parse, content, state),
         };
       },
-      // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <MarkdownSpoiler key={state.key} text={output(node.content, state)} />
       ),
     },
     inlineCode: SimpleMarkdown.defaultRules.inlineCode,
     em: SimpleMarkdown.defaultRules.em,
     strong: SimpleMarkdown.defaultRules.strong,
     del: SimpleMarkdown.defaultRules.del,
     u: SimpleMarkdown.defaultRules.u,
     heading: {
       ...SimpleMarkdown.defaultRules.heading,
       match: SimpleMarkdown.blockRegex(SharedMarkdown.headingRegex),
     },
     mailto: SimpleMarkdown.defaultRules.mailto,
     codeBlock: {
       ...SimpleMarkdown.defaultRules.codeBlock,
       match: SimpleMarkdown.blockRegex(SharedMarkdown.codeBlockRegex),
       parse: (capture: SharedMarkdown.Capture) => ({
         content: capture[0].replace(/^ {4}/gm, ''),
       }),
     },
     fence: {
       ...SimpleMarkdown.defaultRules.fence,
       match: SimpleMarkdown.blockRegex(SharedMarkdown.fenceRegex),
       parse: (capture: SharedMarkdown.Capture) => ({
         type: 'codeBlock',
         content: capture[2],
       }),
     },
     json: {
       order: SimpleMarkdown.defaultRules.paragraph.order - 1,
       match: (source: string, state: SharedMarkdown.State) => {
         if (state.inline) {
           return null;
         }
         return SharedMarkdown.jsonMatch(source);
       },
       parse: (capture: SharedMarkdown.Capture) => {
         const jsonCapture: SharedMarkdown.JSONCapture = (capture: any);
         return {
           type: 'codeBlock',
           content: SharedMarkdown.jsonPrint(jsonCapture),
         };
       },
     },
     list: {
       ...SimpleMarkdown.defaultRules.list,
       match: SharedMarkdown.matchList,
       parse: SharedMarkdown.parseList,
     },
     escape: SimpleMarkdown.defaultRules.escape,
   };
   return {
     ...linkMarkdownRules,
     simpleMarkdownRules,
     useDarkStyle,
   };
 });
 
 function useTextMessageRulesFunc(
   threadInfo: ThreadInfo,
   chatMentionCandidates: ChatMentionCandidates,
 ): boolean => MarkdownRules {
   const { members } = threadInfo;
   const membersMap = SharedMarkdown.useMemberMapForUserMentions(members);
 
   return React.useMemo(
     () =>
       _memoize<[boolean], MarkdownRules>((useDarkStyle: boolean) =>
         textMessageRules(chatMentionCandidates, useDarkStyle, membersMap),
       ),
     [chatMentionCandidates, membersMap],
   );
 }
 
 function textMessageRules(
   chatMentionCandidates: ChatMentionCandidates,
   useDarkStyle: boolean,
   membersMap: $ReadOnlyMap<string, string>,
 ): MarkdownRules {
   const baseRules = markdownRules(useDarkStyle);
 
   return {
     ...baseRules,
     simpleMarkdownRules: {
       ...baseRules.simpleMarkdownRules,
       userMention: {
         ...SimpleMarkdown.defaultRules.strong,
         match: SharedMarkdown.matchUserMentions(membersMap),
         parse: (capture: SharedMarkdown.Capture) =>
           SharedMarkdown.parseUserMentions(membersMap, capture),
-        // eslint-disable-next-line react/display-name
         react: (
           node: SharedMarkdown.SingleASTNode,
           output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
           state: SharedMarkdown.State,
         ) => (
           <MarkdownUserMention
             key={state.key}
             text={node.content}
             userID={node.userID}
           />
         ),
       },
       chatMention: {
         ...SimpleMarkdown.defaultRules.strong,
         match: SimpleMarkdown.inlineRegex(chatMentionRegex),
         parse: (capture: SharedMarkdown.Capture) =>
           SharedMarkdown.parseChatMention(chatMentionCandidates, capture),
-        // eslint-disable-next-line react/display-name
         react: (
           node: SharedMarkdown.SingleASTNode,
           output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
           state: SharedMarkdown.State,
         ) => (
           <MarkdownChatMention
             key={state.key}
             threadInfo={node.threadInfo}
             hasAccessToChat={node.hasAccessToChat}
             text={node.content}
           />
         ),
       },
     },
   };
 }
 
 let defaultTextMessageRules = null;
 const defaultMembersMap = new Map<string, string>();
 
 function getDefaultTextMessageRules(
   overrideDefaultChatMentionCandidates: ChatMentionCandidates = {},
 ): MarkdownRules {
   if (Object.keys(overrideDefaultChatMentionCandidates).length > 0) {
     return textMessageRules(
       overrideDefaultChatMentionCandidates,
       false,
       defaultMembersMap,
     );
   }
   if (!defaultTextMessageRules) {
     defaultTextMessageRules = textMessageRules({}, false, defaultMembersMap);
   }
   return defaultTextMessageRules;
 }
 
 export { linkRules, useTextMessageRulesFunc, getDefaultTextMessageRules };
diff --git a/web/router-history.js b/web/router-history.js
index 3c1b7e8f8..3384983b9 100644
--- a/web/router-history.js
+++ b/web/router-history.js
@@ -1,43 +1,42 @@
 // @flow
 
 import * as HistoryModule from 'history';
 import invariant from 'invariant';
 import type { RouterHistory, LocationShape } from 'react-router';
 
 const { createBrowserHistory } = HistoryModule;
 
 declare var baseURL: string;
 
 type LocationType = LocationShape;
 type HistoryObject = HistoryModule.History<LocationType> & RouterHistory;
 
-// eslint-disable-next-line no-undef
 const history: ?HistoryObject = process.env.BROWSER
   ? (createBrowserHistory({ basename: baseURL }): any)
   : null;
 
 type History = {
   +getHistoryObject: () => HistoryObject,
   +push: (location: string) => void,
   +replace: (location: string) => void,
 };
 
 const routerHistory: History = {
   getHistoryObject: () => {
     invariant(
       history,
       "can't use history.getHistoryObject() during server rendering!",
     );
     return history;
   },
   push: (location: string) => {
     invariant(history, "can't use history.push() during server rendering!");
     return history.push(location);
   },
   replace: (location: string) => {
     invariant(history, "can't use history.replace() during server rendering!");
     return history.replace(location);
   },
 };
 
 export default routerHistory;
diff --git a/web/webpack.config.cjs b/web/webpack.config.cjs
index 61bedc29f..c4f842bcf 100644
--- a/web/webpack.config.cjs
+++ b/web/webpack.config.cjs
@@ -1,226 +1,225 @@
 const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 
 const {
   createProdBrowserConfig,
   createDevBrowserConfig,
   createNodeServerRenderingConfig,
   createWebWorkersConfig,
 } = require('lib/webpack/shared.cjs');
 
 const babelConfig = require('./.babelrc.cjs');
 
 async function getConfig(configName) {
   const { getCommConfig } = await import(
-    // eslint-disable-next-line monorepo/no-relative-import
     '../keyserver/dist/lib/utils/comm-config.js'
   );
   return await getCommConfig(configName);
 }
 
 const baseBrowserConfig = {
   entry: {
     browser: ['./script.js'],
   },
   output: {
     filename: 'prod.[contenthash:12].build.js',
     path: path.join(__dirname, 'dist'),
   },
   resolve: {
     alias: {
       '../images': path.resolve('../keyserver/images'),
     },
     fallback: {
       crypto: false,
       fs: false,
       path: false,
     },
   },
 };
 
 const baseDevBrowserConfig = {
   ...baseBrowserConfig,
   output: {
     ...baseBrowserConfig.output,
     filename: 'dev.build.js',
     pathinfo: true,
     publicPath: 'http://localhost:8080/',
   },
   devServer: {
     port: 8080,
     headers: { 'Access-Control-Allow-Origin': '*' },
     allowedHosts: ['all'],
     host: '0.0.0.0',
     static: {
       directory: path.join(__dirname, 'dist'),
     },
   },
   plugins: [
     new CopyPlugin({
       patterns: [
         {
           from: 'node_modules/@commapp/olm/olm.wasm',
           to: path.join(__dirname, 'dist'),
         },
       ],
     }),
     new CopyPlugin({
       patterns: [
         {
           from:
             'node_modules/@commapp/opaque-ke-wasm' +
             '/pkg/comm_opaque2_wasm_bg.wasm',
           to: path.join(__dirname, 'dist', 'opaque-ke.wasm'),
         },
       ],
     }),
   ],
 };
 
 const baseProdBrowserConfig = {
   ...baseBrowserConfig,
   plugins: [
     new CopyPlugin({
       patterns: [
         {
           from: 'node_modules/@commapp/olm/olm.wasm',
           to: path.join(__dirname, 'dist', 'olm.[contenthash:12].wasm'),
         },
       ],
     }),
     new CopyPlugin({
       patterns: [
         {
           from:
             'node_modules/@commapp/opaque-ke-wasm' +
             '/pkg/comm_opaque2_wasm_bg.wasm',
           to: path.join(__dirname, 'dist', 'opaque-ke.[contenthash:12].wasm'),
         },
       ],
     }),
     new WebpackManifestPlugin({
       publicPath: '',
     }),
   ],
 };
 
 const baseNodeServerRenderingConfig = {
   externals: ['react', 'react-dom', 'react-redux'],
   entry: {
     keyserver: ['./loading.react.js'],
   },
   output: {
     filename: 'app.build.cjs',
     library: 'app',
     libraryTarget: 'commonjs2',
     path: path.join(__dirname, 'dist'),
   },
 };
 
 const baseWebWorkersConfig = {
   entry: {
     pushNotif: './push-notif/service-worker.js',
     database: './database/worker/db-worker.js',
   },
   output: {
     filename: '[name].build.js',
     path: path.join(__dirname, 'dist', 'webworkers'),
   },
   resolve: {
     fallback: {
       crypto: false,
       fs: false,
       path: false,
     },
   },
 };
 
 const devWebWorkersPlugins = [
   new CopyPlugin({
     patterns: [
       {
         from: 'database/_generated/comm_query_executor.wasm',
         to: path.join(__dirname, 'dist', 'webworkers'),
       },
     ],
   }),
   new CopyPlugin({
     patterns: [
       {
         from: 'node_modules/@commapp/olm/olm.wasm',
         to: path.join(__dirname, 'dist', 'webworkers'),
       },
     ],
   }),
 ];
 
 const prodWebWorkersPlugins = [
   new CopyPlugin({
     patterns: [
       {
         from: 'database/_generated/comm_query_executor.wasm',
         to: path.join(
           __dirname,
           'dist',
           'webworkers',
           'comm_query_executor.[contenthash:12].wasm',
         ),
       },
     ],
   }),
   new CopyPlugin({
     patterns: [
       {
         from: 'node_modules/@commapp/olm/olm.wasm',
         to: path.join(
           __dirname,
           'dist',
           'webworkers',
           'olm.[contenthash:12].wasm',
         ),
       },
     ],
   }),
   new WebpackManifestPlugin({
     publicPath: '',
   }),
 ];
 
 module.exports = async function (env) {
   const identityServiceConfig = await getConfig({
     folder: 'secrets',
     name: 'identity_service_config',
   });
   const identitySocketAddr = JSON.stringify(
     identityServiceConfig?.identitySocketAddr,
   );
   const envVars = { IDENTITY_SOCKET_ADDR: identitySocketAddr };
   const browserConfigPromise = env.prod
     ? createProdBrowserConfig(baseProdBrowserConfig, babelConfig, envVars)
     : createDevBrowserConfig(baseDevBrowserConfig, babelConfig, envVars);
   const nodeConfigPromise = createNodeServerRenderingConfig(
     baseNodeServerRenderingConfig,
     babelConfig,
   );
   const [browserConfig, nodeConfig] = await Promise.all([
     browserConfigPromise,
     nodeConfigPromise,
   ]);
 
   const nodeServerRenderingConfig = {
     ...nodeConfig,
     mode: env.prod ? 'production' : 'development',
   };
 
   const workersConfig = {
     ...baseWebWorkersConfig,
     plugins: env.prod ? prodWebWorkersPlugins : devWebWorkersPlugins,
   };
   const webWorkersConfig = createWebWorkersConfig(
     env,
     workersConfig,
     babelConfig,
   );
   return [browserConfig, nodeServerRenderingConfig, webWorkersConfig];
 };