diff --git a/native/staff/staff-context.provider.react.js b/lib/components/staff-provider.react.js
similarity index 93%
rename from native/staff/staff-context.provider.react.js
rename to lib/components/staff-provider.react.js
index 33312c82b..0438d83fc 100644
--- a/native/staff/staff-context.provider.react.js
+++ b/lib/components/staff-provider.react.js
@@ -1,45 +1,45 @@
 // @flow
 
 import * as React from 'react';
 
-import { useIsCurrentUserStaff } from 'lib/shared/staff-utils.js';
+import { useIsCurrentUserStaff } from '../shared/staff-utils.js';
 
 export type StaffContextType = {
   +staffUserHasBeenLoggedIn: boolean,
 };
 
 const StaffContext: React.Context<StaffContextType> =
   React.createContext<StaffContextType>({
     staffUserHasBeenLoggedIn: false,
   });
 
 type Props = {
   +children: React.Node,
 };
 function StaffContextProvider(props: Props): React.Node {
   const [staffUserHasBeenLoggedIn, setStaffUserHasBeenLoggedIn] =
     React.useState(false);
 
   const isCurrentUserStaff = useIsCurrentUserStaff();
 
   React.useEffect(() => {
     if (isCurrentUserStaff) {
       setStaffUserHasBeenLoggedIn(true);
     }
   }, [isCurrentUserStaff]);
 
   const staffContextValue: StaffContextType = React.useMemo(
     () => ({ staffUserHasBeenLoggedIn }),
     [staffUserHasBeenLoggedIn],
   );
 
   return (
     <StaffContext.Provider value={staffContextValue}>
       {props.children}
     </StaffContext.Provider>
   );
 }
 
 const useStaffContext = (): StaffContextType => React.useContext(StaffContext);
 
 export { StaffContextProvider, useStaffContext };
diff --git a/native/account/logged-out-staff-info.react.js b/native/account/logged-out-staff-info.react.js
index 3faef34ad..eba1cec92 100644
--- a/native/account/logged-out-staff-info.react.js
+++ b/native/account/logged-out-staff-info.react.js
@@ -1,119 +1,120 @@
 // @flow
 
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
+import { useStaffContext } from 'lib/components/staff-provider.react.js';
+
 import SWMansionIcon from '../components/swmansion-icon.react.js';
-import { useStaffContext } from '../staff/staff-context.provider.react.js';
 import { useStyles, useColors } from '../themes/colors.js';
 import { isStaffRelease, useStaffCanSee } from '../utils/staff-utils.js';
 
 function LoggedOutStaffInfo(): React.Node {
   const staffCanSee = useStaffCanSee();
   const { staffUserHasBeenLoggedIn } = useStaffContext();
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const checkIcon = React.useMemo(
     () => (
       <SWMansionIcon
         name="check-circle"
         size={20}
         color={colors.vibrantGreenButton}
       />
     ),
     [colors.vibrantGreenButton],
   );
   const crossIcon = React.useMemo(
     () => (
       <SWMansionIcon
         name="cross-circle"
         size={20}
         color={colors.vibrantRedButton}
       />
     ),
     [colors.vibrantRedButton],
   );
 
   const isDevBuildStyle = React.useMemo(() => {
     return [
       styles.infoText,
       __DEV__ ? styles.infoTextTrue : styles.infoTextFalse,
     ];
   }, [styles.infoText, styles.infoTextFalse, styles.infoTextTrue]);
 
   const isStaffReleaseStyle = React.useMemo(() => {
     return [
       styles.infoText,
       isStaffRelease ? styles.infoTextTrue : styles.infoTextFalse,
     ];
   }, [styles.infoText, styles.infoTextFalse, styles.infoTextTrue]);
 
   const hasStaffUserLoggedInStyle = React.useMemo(() => {
     return [
       styles.infoText,
       staffUserHasBeenLoggedIn ? styles.infoTextTrue : styles.infoTextFalse,
     ];
   }, [
     staffUserHasBeenLoggedIn,
     styles.infoText,
     styles.infoTextFalse,
     styles.infoTextTrue,
   ]);
 
   let loggedOutStaffInfo = null;
   if (staffCanSee || staffUserHasBeenLoggedIn) {
     loggedOutStaffInfo = (
       <View style={styles.infoBadge}>
         <View style={styles.cell}>
           {__DEV__ ? checkIcon : crossIcon}
           <Text style={isDevBuildStyle}>__DEV__</Text>
         </View>
         <View style={styles.cell}>
           {isStaffRelease ? checkIcon : crossIcon}
           <Text style={isStaffReleaseStyle}>isStaffRelease</Text>
         </View>
         <View style={styles.cell}>
           {staffUserHasBeenLoggedIn ? checkIcon : crossIcon}
           <Text style={hasStaffUserLoggedInStyle}>
             staffUserHasBeenLoggedIn
           </Text>
         </View>
       </View>
     );
   }
 
   return loggedOutStaffInfo;
 }
 
 const unboundStyles = {
   cell: {
     flexDirection: 'row',
     alignItems: 'center',
   },
   infoBadge: {
     backgroundColor: 'codeBackground',
     borderRadius: 6,
     justifyContent: 'flex-start',
     marginBottom: 10,
     marginTop: 10,
     marginLeft: 4,
     marginRight: 4,
     padding: 8,
   },
   infoText: {
     fontFamily: 'OpenSans-Semibold',
     fontSize: 14,
     lineHeight: 24,
     paddingLeft: 4,
     textAlign: 'left',
   },
   infoTextFalse: {
     color: 'vibrantRedButton',
   },
   infoTextTrue: {
     color: 'vibrantGreenButton',
   },
 };
 
 export default LoggedOutStaffInfo;
diff --git a/native/data/sqlite-data-handler.js b/native/data/sqlite-data-handler.js
index c25f1a36f..d71258c08 100644
--- a/native/data/sqlite-data-handler.js
+++ b/native/data/sqlite-data-handler.js
@@ -1,235 +1,235 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { setClientDBStoreActionType } from 'lib/actions/client-db-store-actions.js';
 import { MediaCacheContext } from 'lib/components/media-cache-provider.react.js';
+import { useStaffContext } from 'lib/components/staff-provider.react.js';
 import { resolveKeyserverSessionInvalidation } from 'lib/keyserver-conn/recovery-utils.js';
 import { reportStoreOpsHandlers } from 'lib/ops/report-store-ops.js';
 import { threadStoreOpsHandlers } from 'lib/ops/thread-store-ops.js';
 import { userStoreOpsHandlers } from 'lib/ops/user-store-ops.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,
   type LogInActionSource,
 } from 'lib/types/account-types.js';
 import { getMessageForException } from 'lib/utils/errors.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { ashoatKeyserverID } from 'lib/utils/validation-utils.js';
 
 import { filesystemMediaCache } from '../media/media-cache.js';
 import { commCoreModule } from '../native-modules.js';
 import { setStoreLoadedActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
-import { useStaffContext } from '../staff/staff-context.provider.react.js';
 import Alert from '../utils/alert.js';
 import { nativeNotificationsSessionCreator } from '../utils/crypto-utils.js';
 import { isTaskCancelledError } from '../utils/error-handling.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 async function clearSensitiveData() {
   await commCoreModule.clearSensitiveData();
   try {
     await filesystemMediaCache.clearCache();
   } catch {
     throw new Error('clear_media_cache_failed');
   }
 }
 
 function SQLiteDataHandler(): React.Node {
   const storeLoaded = useSelector(state => state.storeLoaded);
 
   const dispatch = useDispatch();
   const rehydrateConcluded = useSelector(
     state => !!(state._persist && state._persist.rehydrated),
   );
   const cookie = useSelector(cookieSelector(ashoatKeyserverID));
   const urlPrefix = useSelector(urlPrefixSelector(ashoatKeyserverID));
   invariant(urlPrefix, "missing urlPrefix for ashoat's keyserver");
   const staffCanSee = useStaffCanSee();
   const { staffUserHasBeenLoggedIn } = useStaffContext();
   const loggedIn = useSelector(isLoggedIn);
   const currentLoggedInUserID = useSelector(state =>
     state.currentUserInfo?.anonymous ? undefined : state.currentUserInfo?.id,
   );
   const mediaCacheContext = React.useContext(MediaCacheContext);
   const getInitialNotificationsEncryptedMessage =
     useInitialNotificationsEncryptedMessage(nativeNotificationsSessionCreator);
 
   const callFetchNewCookieFromNativeCredentials = React.useCallback(
     async (source: LogInActionSource) => {
       try {
         await resolveKeyserverSessionInvalidation(
           dispatch,
           cookie,
           urlPrefix,
           source,
           ashoatKeyserverID,
           getInitialNotificationsEncryptedMessage,
         );
         dispatch({ type: setStoreLoadedActionType });
       } catch (fetchCookieException) {
         if (staffCanSee) {
           Alert.alert(
             `Error fetching new cookie from native credentials: ${
               getMessageForException(fetchCookieException) ??
               '{no exception message}'
             }. Please kill the app.`,
           );
         } else {
           commCoreModule.terminate();
         }
       }
     },
     [
       cookie,
       dispatch,
       staffCanSee,
       urlPrefix,
       getInitialNotificationsEncryptedMessage,
     ],
   );
 
   const callClearSensitiveData = React.useCallback(
     async (triggeredBy: string) => {
       await clearSensitiveData();
       console.log(`SQLite database deletion was triggered by ${triggeredBy}`);
     },
     [],
   );
 
   const handleSensitiveData = React.useCallback(async () => {
     try {
       const databaseCurrentUserInfoID = await commCoreModule.getCurrentUserID();
       if (
         databaseCurrentUserInfoID &&
         databaseCurrentUserInfoID !== currentLoggedInUserID
       ) {
         await callClearSensitiveData('change in logged-in user credentials');
       }
       if (currentLoggedInUserID) {
         await commCoreModule.setCurrentUserID(currentLoggedInUserID);
       }
     } catch (e) {
       if (isTaskCancelledError(e)) {
         return;
       }
       if (__DEV__) {
         throw e;
       }
       console.log(e);
       if (e.message !== 'clear_media_cache_failed') {
         commCoreModule.terminate();
       }
     }
   }, [callClearSensitiveData, currentLoggedInUserID]);
 
   React.useEffect(() => {
     if (!rehydrateConcluded) {
       return;
     }
 
     const databaseNeedsDeletion = commCoreModule.checkIfDatabaseNeedsDeletion();
     if (databaseNeedsDeletion) {
       void (async () => {
         try {
           await callClearSensitiveData('detecting corrupted database');
         } catch (e) {
           if (__DEV__) {
             throw e;
           }
           console.log(e);
           if (e.message !== 'clear_media_cache_failed') {
             commCoreModule.terminate();
           }
         }
         await callFetchNewCookieFromNativeCredentials(
           logInActionSources.corruptedDatabaseDeletion,
         );
       })();
       return;
     }
 
     const sensitiveDataHandled = handleSensitiveData();
     if (storeLoaded) {
       return;
     }
     if (!loggedIn) {
       dispatch({ type: setStoreLoadedActionType });
       return;
     }
     void (async () => {
       await Promise.all([
         sensitiveDataHandled,
         mediaCacheContext?.evictCache(),
       ]);
       try {
         const {
           threads,
           messages,
           drafts,
           messageStoreThreads,
           reports,
           users,
         } = await commCoreModule.getClientDBStore();
         const threadInfosFromDB =
           threadStoreOpsHandlers.translateClientDBData(threads);
         const reportsFromDb =
           reportStoreOpsHandlers.translateClientDBData(reports);
         const usersFromDb = userStoreOpsHandlers.translateClientDBData(users);
 
         dispatch({
           type: setClientDBStoreActionType,
           payload: {
             drafts,
             messages,
             threadStore: { threadInfos: threadInfosFromDB },
             currentUserID: currentLoggedInUserID,
             messageStoreThreads,
             reports: reportsFromDb,
             users: usersFromDb,
           },
         });
       } catch (setStoreException) {
         if (isTaskCancelledError(setStoreException)) {
           dispatch({ type: setStoreLoadedActionType });
           return;
         }
         if (staffCanSee) {
           Alert.alert(
             'Error setting threadStore or messageStore',
             getMessageForException(setStoreException) ??
               '{no exception message}',
           );
         }
         await callFetchNewCookieFromNativeCredentials(
           logInActionSources.sqliteLoadFailure,
         );
       }
     })();
   }, [
     currentLoggedInUserID,
     handleSensitiveData,
     loggedIn,
     cookie,
     dispatch,
     rehydrateConcluded,
     staffCanSee,
     storeLoaded,
     urlPrefix,
     staffUserHasBeenLoggedIn,
     callFetchNewCookieFromNativeCredentials,
     callClearSensitiveData,
     mediaCacheContext,
   ]);
 
   return null;
 }
 
 export { SQLiteDataHandler, clearSensitiveData };
diff --git a/native/profile/build-info.react.js b/native/profile/build-info.react.js
index a85c31705..dd0a2c505 100644
--- a/native/profile/build-info.react.js
+++ b/native/profile/build-info.react.js
@@ -1,122 +1,122 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
+import { useStaffContext } from 'lib/components/staff-provider.react.js';
 import { useIsCurrentUserStaff } from 'lib/shared/staff-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { persistConfig, codeVersion } from '../redux/persist.js';
-import { useStaffContext } from '../staff/staff-context.provider.react.js';
 import { useStyles } from '../themes/colors.js';
 import { isStaffRelease, useStaffCanSee } from '../utils/staff-utils.js';
 
 type Props = {
   +navigation: ProfileNavigationProp<'BuildInfo'>,
   +route: NavigationRoute<'BuildInfo'>,
 };
 // eslint-disable-next-line no-unused-vars
 function BuildInfo(props: Props): React.Node {
   const isCurrentUserStaff = useIsCurrentUserStaff();
   const { staffUserHasBeenLoggedIn } = useStaffContext();
   const styles = useStyles(unboundStyles);
   const staffCanSee = useStaffCanSee();
 
   let staffCanSeeRows;
   if (staffCanSee || staffUserHasBeenLoggedIn) {
     staffCanSeeRows = (
       <>
         <View style={styles.row}>
           <Text style={styles.label}>__DEV__</Text>
           <Text style={styles.text}>{__DEV__ ? 'TRUE' : 'FALSE'}</Text>
         </View>
         <View style={styles.row}>
           <Text style={styles.label}>Staff Release</Text>
           <Text style={styles.text}>{isStaffRelease ? 'TRUE' : 'FALSE'}</Text>
         </View>
         <View style={styles.row}>
           <Text style={styles.label}>isCurrentUserStaff</Text>
           <Text style={styles.text}>
             {isCurrentUserStaff ? 'TRUE' : 'FALSE'}
           </Text>
         </View>
         <View style={styles.row}>
           <Text style={styles.label}>hasStaffUserLoggedIn</Text>
           <Text style={styles.text}>
             {staffUserHasBeenLoggedIn ? 'TRUE' : 'FALSE'}
           </Text>
         </View>
       </>
     );
   }
 
   return (
     <ScrollView
       contentContainerStyle={styles.scrollViewContentContainer}
       style={styles.scrollView}
     >
       <View style={styles.section}>
         <View style={styles.row}>
           <Text style={styles.label}>Code version</Text>
           <Text style={styles.text}>{codeVersion}</Text>
         </View>
         <View style={styles.row}>
           <Text style={styles.label}>State version</Text>
           <Text style={styles.text}>{persistConfig.version}</Text>
         </View>
         {staffCanSeeRows}
       </View>
       <View style={styles.section}>
         <View style={styles.row}>
           <Text style={styles.thanksText}>Thank you for using Comm!</Text>
         </View>
       </View>
     </ScrollView>
   );
 }
 
 const unboundStyles = {
   label: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     paddingRight: 12,
   },
   releaseText: {
     color: 'orange',
     fontSize: 16,
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingVertical: 6,
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     paddingHorizontal: 24,
     paddingVertical: 6,
   },
   text: {
     color: 'panelForegroundLabel',
     fontSize: 16,
   },
   thanksText: {
     color: 'panelForegroundLabel',
     flex: 1,
     fontSize: 16,
     textAlign: 'center',
   },
 };
 
 export default BuildInfo;
diff --git a/native/root.react.js b/native/root.react.js
index 59824f53e..3ed651212 100644
--- a/native/root.react.js
+++ b/native/root.react.js
@@ -1,389 +1,389 @@
 // @flow
 
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import type {
   PossiblyStaleNavigationState,
   UnsafeContainerActionEvent,
   GenericNavigationAction,
 } from '@react-navigation/core';
 import { useReduxDevToolsExtension } from '@react-navigation/devtools';
 import { NavigationContainer } from '@react-navigation/native';
 import * as SplashScreen from 'expo-splash-screen';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform, UIManager, StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Orientation from 'react-native-orientation-locker';
 import {
   SafeAreaProvider,
   initialWindowMetrics,
 } from 'react-native-safe-area-context';
 import { Provider } from 'react-redux';
 import { PersistGate as ReduxPersistGate } from 'redux-persist/es/integration/react.js';
 
 import { ChatMentionContextProvider } from 'lib/components/chat-mention-provider.react.js';
 import { EditUserAvatarProvider } from 'lib/components/edit-user-avatar-provider.react.js';
 import { ENSCacheProvider } from 'lib/components/ens-cache-provider.react.js';
 import IntegrityHandler from 'lib/components/integrity-handler.react.js';
 import KeyserverConnectionsHandler from 'lib/components/keyserver-connections-handler.js';
 import { MediaCacheProvider } from 'lib/components/media-cache-provider.react.js';
+import { StaffContextProvider } from 'lib/components/staff-provider.react.js';
 import { CallKeyserverEndpointProvider } from 'lib/keyserver-conn/call-keyserver-endpoint-provider.react.js';
 import { TunnelbrokerProvider } from 'lib/tunnelbroker/tunnelbroker-context.js';
 import { actionLogger } from 'lib/utils/action-logger.js';
 
 import { OlmSessionCreatorProvider } from './account/account-hooks.js';
 import { RegistrationContextProvider } from './account/registration/registration-context-provider.react.js';
 import NativeEditThreadAvatarProvider from './avatars/native-edit-thread-avatar-provider.react.js';
 import BackupHandler from './backup/backup-handler.js';
 import { BottomSheetProvider } from './bottom-sheet/bottom-sheet-provider.react.js';
 import ChatContextProvider from './chat/chat-context-provider.react.js';
 import MessageEditingContextProvider from './chat/message-editing-context-provider.react.js';
 import AccessTokenHandler from './components/access-token-handler.react.js';
 import { FeatureFlagsProvider } from './components/feature-flags-provider.react.js';
 import PersistedStateGate from './components/persisted-state-gate.js';
 import PrekeysHandler from './components/prekeys-handler.react.js';
 import VersionSupportedChecker from './components/version-supported.react.js';
 import ConnectedStatusBar from './connected-status-bar.react.js';
 import { SQLiteDataHandler } from './data/sqlite-data-handler.js';
 import ErrorBoundary from './error-boundary.react.js';
 import { peerToPeerMessageHandler } from './handlers/peer-to-peer-message-handler.js';
 import IdentityServiceContextProvider from './identity-service/identity-service-context-provider.react.js';
 import InputStateContainer from './input/input-state-container.react.js';
 import LifecycleHandler from './lifecycle/lifecycle-handler.react.js';
 import MarkdownContextProvider from './markdown/markdown-context-provider.react.js';
 import { filesystemMediaCache } from './media/media-cache.js';
 import { DeepLinksContextProvider } from './navigation/deep-links-context-provider.react.js';
 import { defaultNavigationState } from './navigation/default-state.js';
 import { setGlobalNavContext } from './navigation/icky-global.js';
 import KeyserverReachabilityHandler from './navigation/keyserver-reachability-handler.js';
 import {
   NavContext,
   type NavContextType,
 } from './navigation/navigation-context.js';
 import NavigationHandler from './navigation/navigation-handler.react.js';
 import { validNavState } from './navigation/navigation-utils.js';
 import OrientationHandler from './navigation/orientation-handler.react.js';
 import { navStateAsyncStorageKey } from './navigation/persistance.js';
 import RootNavigator from './navigation/root-navigator.react.js';
 import ConnectivityUpdater from './redux/connectivity-updater.react.js';
 import { DimensionsUpdater } from './redux/dimensions-updater.react.js';
 import { getPersistor } from './redux/persist.js';
 import { store } from './redux/redux-setup.js';
 import { useSelector } from './redux/redux-utils.js';
 import { RootContext } from './root-context.js';
 import { MessageSearchProvider } from './search/search-provider.react.js';
 import Socket from './socket.react.js';
-import { StaffContextProvider } from './staff/staff-context.provider.react.js';
 import { useLoadCommFonts } from './themes/fonts.js';
 import { DarkTheme, LightTheme } from './themes/navigation.js';
 import ThemeHandler from './themes/theme-handler.react.js';
 import { provider } from './utils/ethers-utils.js';
 import { useTunnelbrokerInitMessage } from './utils/tunnelbroker-utils.js';
 
 // Add custom items to expo-dev-menu
 import './dev-menu.js';
 import './types/message-types-validator.js';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
     UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
 const navInitAction = Object.freeze({ type: 'NAV/@@INIT' });
 const navUnknownAction = Object.freeze({ type: 'NAV/@@UNKNOWN' });
 
 SplashScreen.preventAutoHideAsync().catch(console.log);
 
 function Root() {
   const navStateRef = React.useRef<?PossiblyStaleNavigationState>();
   const navDispatchRef =
     React.useRef<?(
       action:
         | GenericNavigationAction
         | (PossiblyStaleNavigationState => GenericNavigationAction),
     ) => void>();
   const navStateInitializedRef = React.useRef(false);
 
   // We call this here to start the loading process
   // We gate the UI on the fonts loading in AppNavigator
   useLoadCommFonts();
 
   const [navContext, setNavContext] = React.useState<?NavContextType>(null);
   const updateNavContext = React.useCallback(() => {
     if (
       !navStateRef.current ||
       !navDispatchRef.current ||
       !navStateInitializedRef.current
     ) {
       return;
     }
     const updatedNavContext = {
       state: navStateRef.current,
       dispatch: navDispatchRef.current,
     };
     setNavContext(updatedNavContext);
     setGlobalNavContext(updatedNavContext);
   }, []);
 
   const [initialState, setInitialState] = React.useState(
     __DEV__ ? undefined : defaultNavigationState,
   );
 
   React.useEffect(() => {
     Orientation.lockToPortrait();
     void (async () => {
       let loadedState = initialState;
       if (__DEV__) {
         try {
           const navStateString = await AsyncStorage.getItem(
             navStateAsyncStorageKey,
           );
           if (navStateString) {
             const savedState = JSON.parse(navStateString);
             if (validNavState(savedState)) {
               loadedState = savedState;
             }
           }
         } catch {}
       }
       if (!loadedState) {
         loadedState = defaultNavigationState;
       }
       if (loadedState !== initialState) {
         setInitialState(loadedState);
       }
       navStateRef.current = loadedState;
       updateNavContext();
       actionLogger.addOtherAction('navState', navInitAction, null, loadedState);
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [updateNavContext]);
 
   const setNavStateInitialized = React.useCallback(() => {
     navStateInitializedRef.current = true;
     updateNavContext();
   }, [updateNavContext]);
 
   const [rootContext, setRootContext] = React.useState(() => ({
     setNavStateInitialized,
   }));
 
   const detectUnsupervisedBackgroundRef = React.useCallback(
     (detectUnsupervisedBackground: ?(alreadyClosed: boolean) => boolean) => {
       setRootContext(prevRootContext => ({
         ...prevRootContext,
         detectUnsupervisedBackground,
       }));
     },
     [],
   );
 
   const frozen = useSelector(state => state.frozen);
   const queuedActionsRef = React.useRef<Array<GenericNavigationAction>>([]);
   const onNavigationStateChange = React.useCallback(
     (state: ?PossiblyStaleNavigationState) => {
       invariant(state, 'nav state should be non-null');
       const prevState = navStateRef.current;
       navStateRef.current = state;
       updateNavContext();
 
       const queuedActions = queuedActionsRef.current;
       queuedActionsRef.current = [];
       if (queuedActions.length === 0) {
         queuedActions.push(navUnknownAction);
       }
       for (const action of queuedActions) {
         actionLogger.addOtherAction('navState', action, prevState, state);
       }
 
       if (!__DEV__ || frozen) {
         return;
       }
 
       void (async () => {
         try {
           await AsyncStorage.setItem(
             navStateAsyncStorageKey,
             JSON.stringify(state),
           );
         } catch (e) {
           console.log('AsyncStorage threw while trying to persist navState', e);
         }
       })();
     },
     [updateNavContext, frozen],
   );
 
   const navContainerRef =
     React.useRef<?React.ElementRef<typeof NavigationContainer>>();
   const containerRef = React.useCallback(
     (navContainer: ?React.ElementRef<typeof NavigationContainer>) => {
       navContainerRef.current = navContainer;
       if (navContainer && !navDispatchRef.current) {
         navDispatchRef.current = navContainer.dispatch;
         updateNavContext();
       }
     },
     [updateNavContext],
   );
   useReduxDevToolsExtension(navContainerRef);
 
   const navContainer = navContainerRef.current;
   React.useEffect(() => {
     if (!navContainer) {
       return undefined;
     }
     return navContainer.addListener(
       '__unsafe_action__',
       (event: { +data: UnsafeContainerActionEvent, ... }) => {
         const { action, noop } = event.data;
         const navState = navStateRef.current;
         if (noop) {
           actionLogger.addOtherAction('navState', action, navState, navState);
           return;
         }
         queuedActionsRef.current.push({
           ...action,
           type: `NAV/${action.type}`,
         });
       },
     );
   }, [navContainer]);
 
   const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
   const theme = (() => {
     if (activeTheme === 'light') {
       return LightTheme;
     } else if (activeTheme === 'dark') {
       return DarkTheme;
     }
     return undefined;
   })();
 
   const tunnelbrokerInitMessage = useTunnelbrokerInitMessage();
 
   const gated: React.Node = (
     <>
       <LifecycleHandler />
       <KeyserverReachabilityHandler />
       <DimensionsUpdater />
       <ConnectivityUpdater />
       <ThemeHandler />
       <OrientationHandler />
       <BackupHandler />
       <IntegrityHandler />
       <AccessTokenHandler />
     </>
   );
   let navigation;
   if (initialState) {
     navigation = (
       <NavigationContainer
         initialState={initialState}
         onStateChange={onNavigationStateChange}
         theme={theme}
         ref={containerRef}
       >
         <BottomSheetModalProvider>
           <ChatContextProvider>
             <DeepLinksContextProvider>
               <ChatMentionContextProvider>
                 <RootNavigator />
               </ChatMentionContextProvider>
             </DeepLinksContextProvider>
           </ChatContextProvider>
           <NavigationHandler />
         </BottomSheetModalProvider>
       </NavigationContainer>
     );
   }
   return (
     <GestureHandlerRootView style={styles.app}>
       <CallKeyserverEndpointProvider>
         <StaffContextProvider>
           <IdentityServiceContextProvider>
             <OlmSessionCreatorProvider>
               <TunnelbrokerProvider
                 initMessage={tunnelbrokerInitMessage}
                 peerToPeerMessageHandler={peerToPeerMessageHandler}
               >
                 <FeatureFlagsProvider>
                   <NavContext.Provider value={navContext}>
                     <RootContext.Provider value={rootContext}>
                       <InputStateContainer>
                         <MessageEditingContextProvider>
                           <SafeAreaProvider
                             initialMetrics={initialWindowMetrics}
                           >
                             <ActionSheetProvider>
                               <ENSCacheProvider provider={provider}>
                                 <MediaCacheProvider
                                   persistence={filesystemMediaCache}
                                 >
                                   <EditUserAvatarProvider>
                                     <NativeEditThreadAvatarProvider>
                                       <MarkdownContextProvider>
                                         <MessageSearchProvider>
                                           <BottomSheetProvider>
                                             <RegistrationContextProvider>
                                               <SQLiteDataHandler />
                                               <ConnectedStatusBar />
                                               <ReduxPersistGate
                                                 persistor={getPersistor()}
                                               >
                                                 {gated}
                                               </ReduxPersistGate>
                                               <PersistedStateGate>
                                                 <KeyserverConnectionsHandler
                                                   socketComponent={Socket}
                                                   detectUnsupervisedBackgroundRef={
                                                     detectUnsupervisedBackgroundRef
                                                   }
                                                 />
                                                 <VersionSupportedChecker />
                                                 <PrekeysHandler />
                                               </PersistedStateGate>
                                               {navigation}
                                             </RegistrationContextProvider>
                                           </BottomSheetProvider>
                                         </MessageSearchProvider>
                                       </MarkdownContextProvider>
                                     </NativeEditThreadAvatarProvider>
                                   </EditUserAvatarProvider>
                                 </MediaCacheProvider>
                               </ENSCacheProvider>
                             </ActionSheetProvider>
                           </SafeAreaProvider>
                         </MessageEditingContextProvider>
                       </InputStateContainer>
                     </RootContext.Provider>
                   </NavContext.Provider>
                 </FeatureFlagsProvider>
               </TunnelbrokerProvider>
             </OlmSessionCreatorProvider>
           </IdentityServiceContextProvider>
         </StaffContextProvider>
       </CallKeyserverEndpointProvider>
     </GestureHandlerRootView>
   );
 }
 
 const styles = StyleSheet.create({
   app: {
     flex: 1,
   },
 });
 
 function AppRoot(): React.Node {
   return (
     <Provider store={store}>
       <ErrorBoundary>
         <Root />
       </ErrorBoundary>
     </Provider>
   );
 }
 
 export default AppRoot;