diff --git a/lib/components/edit-user-avatar-provider.react.js b/lib/components/base-edit-user-avatar-provider.react.js
similarity index 97%
rename from lib/components/edit-user-avatar-provider.react.js
rename to lib/components/base-edit-user-avatar-provider.react.js
index d2abf7f34..915605ea6 100644
--- a/lib/components/edit-user-avatar-provider.react.js
+++ b/lib/components/base-edit-user-avatar-provider.react.js
@@ -1,191 +1,191 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   updateUserAvatar,
   updateUserAvatarActionTypes,
 } from '../actions/user-actions.js';
 import { createLoadingStatusSelector } from '../selectors/loading-selectors.js';
 import type {
   ImageAvatarDBContent,
   UpdateUserAvatarRequest,
 } from '../types/avatar-types.js';
 import type { LoadingStatus } from '../types/loading-types.js';
 import type {
   MediaLibrarySelection,
   NativeMediaSelection,
 } from '../types/media-types.js';
 import {
   useDispatchActionPromise,
   useServerCall,
 } from '../utils/action-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 export type UserAvatarSelection =
   | { +needsUpload: true, +mediaSelection: NativeMediaSelection }
   | { +needsUpload: false, +updateUserAvatarRequest: UpdateUserAvatarRequest };
 type RegistrationMode =
   | { +registrationMode: 'off' }
   | {
       +registrationMode: 'on',
       +successCallback: UserAvatarSelection => mixed,
     };
 const registrationModeOff = { registrationMode: 'off' };
 
 export type EditUserAvatarContextType = {
   +userAvatarSaveInProgress: boolean,
   +selectFromGalleryAndUpdateUserAvatar: () => Promise<void>,
   +updateImageUserAvatar: (selection: NativeMediaSelection) => Promise<void>,
   +setUserAvatar: (avatarRequest: UpdateUserAvatarRequest) => Promise<void>,
   +setRegistrationMode: (registrationMode: RegistrationMode) => void,
   +getRegistrationModeEnabled: () => boolean,
 };
 
 const EditUserAvatarContext: React.Context<?EditUserAvatarContextType> =
   React.createContext<?EditUserAvatarContextType>();
 
 const updateUserAvatarLoadingStatusSelector = createLoadingStatusSelector(
   updateUserAvatarActionTypes,
 );
 
 type Props = {
   +displayFailureAlert: () => mixed,
   +selectFromGallery: () => Promise<?MediaLibrarySelection>,
   +useUploadSelectedMedia: (
     setProcessingOrUploadInProgress?: (inProgress: boolean) => mixed,
   ) => (selection: NativeMediaSelection) => Promise<?ImageAvatarDBContent>,
   +children: React.Node,
 };
-function EditUserAvatarProvider(props: Props): React.Node {
+function BaseEditUserAvatarProvider(props: Props): React.Node {
   const {
     displayFailureAlert,
     selectFromGallery,
     useUploadSelectedMedia,
     children,
   } = props;
 
   const registrationModeRef =
     React.useRef<RegistrationMode>(registrationModeOff);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const updateUserAvatarCall = useServerCall(updateUserAvatar);
 
   const [userAvatarMediaUploadInProgress, setUserAvatarMediaUploadInProgress] =
     React.useState(false);
 
   const updateUserAvatarLoadingStatus: LoadingStatus = useSelector(
     updateUserAvatarLoadingStatusSelector,
   );
 
   const userAvatarSaveInProgress =
     userAvatarMediaUploadInProgress ||
     updateUserAvatarLoadingStatus === 'loading';
 
   const uploadSelectedMedia = useUploadSelectedMedia(
     setUserAvatarMediaUploadInProgress,
   );
 
   const updateImageUserAvatar = React.useCallback(
     async (selection: NativeMediaSelection) => {
       if (registrationModeRef.current.registrationMode === 'on') {
         registrationModeRef.current.successCallback({
           needsUpload: true,
           mediaSelection: selection,
         });
         return;
       }
 
       const imageAvatarUpdateRequest = await uploadSelectedMedia(selection);
       if (!imageAvatarUpdateRequest) {
         return;
       }
 
       const promise = (async () => {
         setUserAvatarMediaUploadInProgress(false);
         try {
           return await updateUserAvatarCall(imageAvatarUpdateRequest);
         } catch (e) {
           displayFailureAlert();
           throw e;
         }
       })();
       dispatchActionPromise(updateUserAvatarActionTypes, promise);
       await promise;
     },
     [
       uploadSelectedMedia,
       dispatchActionPromise,
       updateUserAvatarCall,
       displayFailureAlert,
     ],
   );
 
   const selectFromGalleryAndUpdateUserAvatar = React.useCallback(async () => {
     const selection = await selectFromGallery();
     if (!selection) {
       return;
     }
     await updateImageUserAvatar(selection);
   }, [selectFromGallery, updateImageUserAvatar]);
 
   const setUserAvatar = React.useCallback(
     async (request: UpdateUserAvatarRequest) => {
       const regMode = registrationModeRef.current;
       if (regMode.registrationMode === 'on') {
         regMode.successCallback({
           needsUpload: false,
           updateUserAvatarRequest: request,
         });
         return;
       }
 
       const promise = (async () => {
         try {
           return await updateUserAvatarCall(request);
         } catch (e) {
           displayFailureAlert();
           throw e;
         }
       })();
       dispatchActionPromise(updateUserAvatarActionTypes, promise);
       await promise;
     },
     [dispatchActionPromise, updateUserAvatarCall, displayFailureAlert],
   );
 
   const setRegistrationMode = React.useCallback((mode: RegistrationMode) => {
     registrationModeRef.current = mode;
   }, []);
   const getRegistrationModeEnabled = React.useCallback(
     () => registrationModeRef.current.registrationMode === 'on',
     [],
   );
 
   const context = React.useMemo(
     () => ({
       userAvatarSaveInProgress,
       selectFromGalleryAndUpdateUserAvatar,
       updateImageUserAvatar,
       setUserAvatar,
       setRegistrationMode,
       getRegistrationModeEnabled,
     }),
     [
       userAvatarSaveInProgress,
       selectFromGalleryAndUpdateUserAvatar,
       updateImageUserAvatar,
       setUserAvatar,
       setRegistrationMode,
       getRegistrationModeEnabled,
     ],
   );
 
   return (
     <EditUserAvatarContext.Provider value={context}>
       {children}
     </EditUserAvatarContext.Provider>
   );
 }
 
-export { EditUserAvatarContext, EditUserAvatarProvider };
+export { EditUserAvatarContext, BaseEditUserAvatarProvider };
diff --git a/native/account/registration/avatar-selection.react.js b/native/account/registration/avatar-selection.react.js
index d230475bc..0b692110a 100644
--- a/native/account/registration/avatar-selection.react.js
+++ b/native/account/registration/avatar-selection.react.js
@@ -1,203 +1,203 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import {
   EditUserAvatarContext,
   type UserAvatarSelection,
-} from 'lib/components/edit-user-avatar-provider.react.js';
+} from 'lib/components/base-edit-user-avatar-provider.react.js';
 
 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,
   type AccountSelection,
   type AvatarData,
   ensAvatarSelection,
 } from './registration-types.js';
 import EditUserAvatar from '../../avatars/edit-user-avatar.react.js';
 import { useCurrentLeafRouteName } from '../../navigation/nav-selectors.js';
 import {
   type NavigationRoute,
   RegistrationTermsRouteName,
   AvatarSelectionRouteName,
   EmojiAvatarSelectionRouteName,
   RegistrationUserAvatarCameraModalRouteName,
 } from '../../navigation/route-names.js';
 import { useStyles } from '../../themes/colors.js';
 
 export type AvatarSelectionParams = {
   +userSelections: {
     +coolOrNerdMode: CoolOrNerdMode,
     +keyserverURL: string,
     +accountSelection: AccountSelection,
   },
 };
 
 type Props = {
   +navigation: RegistrationNavigationProp<'AvatarSelection'>,
   +route: NavigationRoute<'AvatarSelection'>,
 };
 function AvatarSelection(props: Props): React.Node {
   const { userSelections } = props.route.params;
   const { accountSelection } = userSelections;
   const usernameOrETHAddress =
     accountSelection.accountType === 'username'
       ? accountSelection.username
       : accountSelection.address;
 
   const registrationContext = React.useContext(RegistrationContext);
   invariant(registrationContext, 'registrationContext should be set');
   const { cachedSelections, setCachedSelections } = registrationContext;
 
   const editUserAvatarContext = React.useContext(EditUserAvatarContext);
   invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
   const { setRegistrationMode } = editUserAvatarContext;
 
   const prefetchedAvatarURI =
     accountSelection.accountType === 'ethereum'
       ? accountSelection.avatarURI
       : undefined;
 
   let initialAvatarData = cachedSelections.avatarData;
   if (!initialAvatarData && prefetchedAvatarURI) {
     initialAvatarData = ensAvatarSelection;
   }
 
   const [avatarData, setAvatarData] =
     React.useState<?AvatarData>(initialAvatarData);
 
   const setClientAvatarFromSelection = React.useCallback(
     (selection: UserAvatarSelection) => {
       if (selection.needsUpload) {
         const newAvatarData = {
           ...selection,
           clientAvatar: {
             type: 'image',
             uri: selection.mediaSelection.uri,
           },
         };
         setAvatarData(newAvatarData);
         setCachedSelections(oldUserSelections => ({
           ...oldUserSelections,
           avatarData: newAvatarData,
         }));
       } else if (selection.updateUserAvatarRequest.type !== 'remove') {
         const clientRequest = selection.updateUserAvatarRequest;
         invariant(
           clientRequest.type !== 'image',
           'image avatars need to be uploaded',
         );
         const newAvatarData = {
           ...selection,
           clientAvatar: clientRequest,
         };
         setAvatarData(newAvatarData);
         setCachedSelections(oldUserSelections => ({
           ...oldUserSelections,
           avatarData: newAvatarData,
         }));
       } else {
         setAvatarData(undefined);
         setCachedSelections(oldUserSelections => ({
           ...oldUserSelections,
           avatarData: undefined,
         }));
       }
     },
     [setCachedSelections],
   );
 
   const currentRouteName = useCurrentLeafRouteName();
   const avatarSelectionHappening =
     currentRouteName === AvatarSelectionRouteName ||
     currentRouteName === EmojiAvatarSelectionRouteName ||
     currentRouteName === RegistrationUserAvatarCameraModalRouteName;
   React.useEffect(() => {
     if (!avatarSelectionHappening) {
       return undefined;
     }
     setRegistrationMode({
       registrationMode: 'on',
       successCallback: setClientAvatarFromSelection,
     });
     return () => {
       setRegistrationMode({ registrationMode: 'off' });
     };
   }, [
     avatarSelectionHappening,
     setRegistrationMode,
     setClientAvatarFromSelection,
   ]);
 
   const { navigate } = props.navigation;
   const onProceed = React.useCallback(async () => {
     const newUserSelections = {
       ...userSelections,
       avatarData,
     };
     navigate<'RegistrationTerms'>({
       name: RegistrationTermsRouteName,
       params: { userSelections: newUserSelections },
     });
   }, [userSelections, avatarData, navigate]);
 
   const clientAvatar = avatarData?.clientAvatar;
   const userInfoOverride = React.useMemo(
     () => ({
       username: usernameOrETHAddress,
       avatar: clientAvatar,
     }),
     [usernameOrETHAddress, clientAvatar],
   );
 
   const styles = useStyles(unboundStyles);
   return (
     <RegistrationContainer>
       <RegistrationContentContainer style={styles.scrollViewContentContainer}>
         <Text style={styles.header}>Pick an avatar</Text>
         <View style={styles.stagedAvatarSection}>
           <View style={styles.editUserAvatar}>
             <EditUserAvatar
               userInfo={userInfoOverride}
               prefetchedAvatarURI={prefetchedAvatarURI}
             />
           </View>
         </View>
       </RegistrationContentContainer>
       <RegistrationButtonContainer>
         <RegistrationButton onPress={onProceed} label="Next" />
       </RegistrationButtonContainer>
     </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
   scrollViewContentContainer: {
     paddingHorizontal: 0,
   },
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
     paddingBottom: 16,
     paddingHorizontal: 16,
   },
   stagedAvatarSection: {
     marginTop: 16,
     backgroundColor: 'panelForeground',
     paddingVertical: 24,
     alignItems: 'center',
   },
   editUserAvatar: {
     alignItems: 'center',
     justifyContent: 'center',
   },
 };
 
 export default AvatarSelection;
diff --git a/native/account/registration/emoji-avatar-selection.react.js b/native/account/registration/emoji-avatar-selection.react.js
index e94c4cca0..703cfa672 100644
--- a/native/account/registration/emoji-avatar-selection.react.js
+++ b/native/account/registration/emoji-avatar-selection.react.js
@@ -1,74 +1,74 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text } from 'react-native';
 
-import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
+import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
 import { getDefaultAvatar } from 'lib/shared/avatar-utils.js';
 
 import RegistrationContainer from './registration-container.react.js';
 import RegistrationContentContainer from './registration-content-container.react.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import EmojiAvatarCreation from '../../avatars/emoji-avatar-creation.react.js';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useStyles } from '../../themes/colors.js';
 
 export type EmojiAvatarSelectionParams = {
   +usernameOrEthAddress: string,
 };
 
 type Props = {
   +navigation: RegistrationNavigationProp<'EmojiAvatarSelection'>,
   +route: NavigationRoute<'EmojiAvatarSelection'>,
 };
 function EmojiAvatarSelection(props: Props): React.Node {
   const editUserAvatarContext = React.useContext(EditUserAvatarContext);
   invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
 
   const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;
 
   const { usernameOrEthAddress } = props.route.params;
   const savedEmojiAvatarFunc = React.useCallback(
     () => getDefaultAvatar(usernameOrEthAddress),
     [usernameOrEthAddress],
   );
 
   const { goBack } = props.navigation;
   const onSuccess = React.useCallback(
     avatarRequest => {
       goBack();
       return setUserAvatar(avatarRequest);
     },
     [goBack, setUserAvatar],
   );
 
   const styles = useStyles(unboundStyles);
   return (
     <RegistrationContainer>
       <RegistrationContentContainer style={styles.scrollViewContentContainer}>
         <Text style={styles.header}>Select an emoji</Text>
         <EmojiAvatarCreation
           saveAvatarCall={onSuccess}
           saveAvatarCallLoading={userAvatarSaveInProgress}
           savedEmojiAvatarFunc={savedEmojiAvatarFunc}
         />
       </RegistrationContentContainer>
     </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
   scrollViewContentContainer: {
     flexGrow: 1,
     paddingHorizontal: 0,
   },
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
     paddingBottom: 16,
     paddingHorizontal: 16,
   },
 };
 
 export default EmojiAvatarSelection;
diff --git a/native/account/registration/registration-server-call.js b/native/account/registration/registration-server-call.js
index 8d9ec7781..d30625069 100644
--- a/native/account/registration/registration-server-call.js
+++ b/native/account/registration/registration-server-call.js
@@ -1,236 +1,236 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Alert, Platform } from 'react-native';
 import { useDispatch } from 'react-redux';
 
 import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
 import { registerActionTypes, register } from 'lib/actions/user-actions.js';
-import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
+import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
 import type { LogInStartingPayload } from 'lib/types/account-types.js';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { setURLPrefix } from 'lib/utils/url-utils.js';
 
 import type {
   RegistrationServerCallInput,
   UsernameAccountSelection,
   AvatarData,
 } from './registration-types.js';
 import { useUploadSelectedMedia } from '../../avatars/avatar-hooks.js';
 import { NavContext } from '../../navigation/navigation-context.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { nativeLogInExtraInfoSelector } from '../../selectors/account-selectors.js';
 import { setNativeCredentials } from '../native-credentials.js';
 import { useSIWEServerCall } from '../siwe-hooks.js';
 
 // We can't just do everything in one async callback, since the server calls
 // would get bound to Redux state from before the registration. The registration
 // flow has multiple steps where critical Redux state is changed, where
 // subsequent steps depend on accessing the updated Redux state.
 
 // To address this, we break the registration process up into multiple steps.
 // When each step completes we update the currentStep state, and we have Redux
 // selectors that trigger useEffects for subsequent steps when relevant data
 // starts to appear in Redux.
 
 type CurrentStep =
   | { +step: 'inactive' }
   | {
       +step: 'waiting_for_registration_call',
       +avatarData: ?AvatarData,
       +resolve: () => void,
       +reject: Error => void,
     };
 
 const inactiveStep = { step: 'inactive' };
 
 function useRegistrationServerCall(): RegistrationServerCallInput => Promise<void> {
   const [currentStep, setCurrentStep] =
     React.useState<CurrentStep>(inactiveStep);
 
   // STEP 1: ACCOUNT REGISTRATION
 
   const navContext = React.useContext(NavContext);
   const logInExtraInfo = useSelector(state =>
     nativeLogInExtraInfoSelector({
       redux: state,
       navContext,
     }),
   );
 
   const dispatchActionPromise = useDispatchActionPromise();
   const callRegister = useServerCall(register);
 
   const registerUsernameAccount = React.useCallback(
     async (
       accountSelection: UsernameAccountSelection,
       keyserverURL: string,
     ) => {
       const extraInfo = await logInExtraInfo();
       const registerPromise = (async () => {
         try {
           const result = await callRegister(
             {
               ...extraInfo,
               username: accountSelection.username,
               password: accountSelection.password,
             },
             {
               urlPrefixOverride: keyserverURL,
             },
           );
           await setNativeCredentials({
             username: result.currentUserInfo.username,
             password: accountSelection.password,
           });
           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.',
             );
           } else if (e.message === 'username_taken') {
             Alert.alert(
               'Username taken',
               'An account with that username already exists',
             );
           } else if (e.message === 'client_version_unsupported') {
             const app = Platform.select({
               ios: 'App Store',
               android: 'Play Store',
             });
             Alert.alert(
               'App out of date',
               'Your app version is pretty old, and the server doesn’t know how ' +
                 `to speak to it anymore. Please use the ${app} app to update!`,
             );
           } else {
             Alert.alert('Unknown error', 'Uhh... try again?');
           }
           throw e;
         }
       })();
       dispatchActionPromise(
         registerActionTypes,
         registerPromise,
         undefined,
         ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
       );
       await registerPromise;
     },
     [logInExtraInfo, callRegister, dispatchActionPromise],
   );
 
   const siweServerCallParams = React.useMemo(() => {
     const onServerCallFailure = () => {
       Alert.alert('Unknown error', 'Uhh... try again?');
     };
     return { onFailure: onServerCallFailure };
   }, []);
   const siweServerCall = useSIWEServerCall(siweServerCallParams);
 
   const dispatch = useDispatch();
   const returnedFunc = React.useCallback(
     (input: RegistrationServerCallInput) =>
       new Promise(
         // eslint-disable-next-line no-async-promise-executor
         async (resolve, reject) => {
           try {
             if (currentStep.step !== 'inactive') {
               return;
             }
             const { accountSelection, avatarData, keyserverURL } = input;
             if (accountSelection.accountType === 'username') {
               await registerUsernameAccount(accountSelection, keyserverURL);
             } else {
               await siweServerCall(accountSelection, {
                 urlPrefixOverride: keyserverURL,
               });
             }
             dispatch({
               type: setURLPrefix,
               payload: keyserverURL,
             });
             setCurrentStep({
               step: 'waiting_for_registration_call',
               avatarData,
               resolve,
               reject,
             });
           } catch (e) {
             reject(e);
           }
         },
       ),
     [currentStep, registerUsernameAccount, siweServerCall, dispatch],
   );
 
   // STEP 2: SETTING AVATAR
 
   const uploadSelectedMedia = useUploadSelectedMedia();
 
   const editUserAvatarContext = React.useContext(EditUserAvatarContext);
   invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
   const { setUserAvatar } = editUserAvatarContext;
 
   const hasCurrentUserInfo = useSelector(
     state => !!state.currentUserInfo && !state.currentUserInfo.anonymous,
   );
 
   const avatarBeingSetRef = React.useRef(false);
   React.useEffect(() => {
     if (
       !hasCurrentUserInfo ||
       currentStep.step !== 'waiting_for_registration_call' ||
       avatarBeingSetRef.current
     ) {
       return;
     }
     avatarBeingSetRef.current = true;
     const { avatarData, resolve } = currentStep;
     (async () => {
       try {
         if (!avatarData) {
           return;
         }
         let updateUserAvatarRequest;
         if (!avatarData.needsUpload) {
           ({ updateUserAvatarRequest } = avatarData);
         } else {
           const { mediaSelection } = avatarData;
           updateUserAvatarRequest = await uploadSelectedMedia(mediaSelection);
           if (!updateUserAvatarRequest) {
             return;
           }
         }
         await setUserAvatar(updateUserAvatarRequest);
       } finally {
         dispatch({
           type: setDataLoadedActionType,
           payload: {
             dataLoaded: true,
           },
         });
         setCurrentStep(inactiveStep);
         avatarBeingSetRef.current = false;
         resolve();
       }
     })();
   }, [
     currentStep,
     hasCurrentUserInfo,
     uploadSelectedMedia,
     setUserAvatar,
     dispatch,
   ]);
 
   return returnedFunc;
 }
 
 export { useRegistrationServerCall };
diff --git a/native/avatars/edit-user-avatar.react.js b/native/avatars/edit-user-avatar.react.js
index 67de1f75d..d62a79452 100644
--- a/native/avatars/edit-user-avatar.react.js
+++ b/native/avatars/edit-user-avatar.react.js
@@ -1,152 +1,152 @@
 // @flow
 
 import { useNavigation } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 
-import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
+import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
 import { useENSAvatar } from 'lib/hooks/ens-cache.js';
 import { getETHAddressForUserInfo } from 'lib/shared/account-utils.js';
 import type { GenericUserInfoWithAvatar } from 'lib/types/avatar-types.js';
 
 import { useShowAvatarActionSheet } from './avatar-hooks.js';
 import EditAvatarBadge from './edit-avatar-badge.react.js';
 import UserAvatar from './user-avatar.react.js';
 import {
   EmojiUserAvatarCreationRouteName,
   UserAvatarCameraModalRouteName,
   EmojiAvatarSelectionRouteName,
   RegistrationUserAvatarCameraModalRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 
 type Props =
   | { +userID: ?string, +disabled?: boolean }
   | {
       +userInfo: ?GenericUserInfoWithAvatar,
       +disabled?: boolean,
       +prefetchedAvatarURI: ?string,
     };
 function EditUserAvatar(props: Props): React.Node {
   const editUserAvatarContext = React.useContext(EditUserAvatarContext);
   invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
   const {
     userAvatarSaveInProgress,
     selectFromGalleryAndUpdateUserAvatar,
     setUserAvatar,
     getRegistrationModeEnabled,
   } = editUserAvatarContext;
 
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   const userInfoProp = props.userInfo;
   const userInfo: ?GenericUserInfoWithAvatar = userInfoProp ?? currentUserInfo;
 
   const ethAddress = React.useMemo(
     () => getETHAddressForUserInfo(userInfo),
     [userInfo],
   );
   const fetchedENSAvatarURI = useENSAvatar(ethAddress);
   const ensAvatarURI = fetchedENSAvatarURI ?? props.prefetchedAvatarURI;
 
   const { navigate } = useNavigation();
 
   const usernameOrEthAddress = userInfo?.username;
   const navigateToEmojiSelection = React.useCallback(() => {
     if (!getRegistrationModeEnabled()) {
       navigate(EmojiUserAvatarCreationRouteName);
       return;
     }
     navigate<'EmojiAvatarSelection'>({
       name: EmojiAvatarSelectionRouteName,
       params: { usernameOrEthAddress },
     });
   }, [navigate, getRegistrationModeEnabled, usernameOrEthAddress]);
 
   const navigateToCamera = React.useCallback(() => {
     navigate(
       getRegistrationModeEnabled()
         ? RegistrationUserAvatarCameraModalRouteName
         : UserAvatarCameraModalRouteName,
     );
   }, [navigate, getRegistrationModeEnabled]);
 
   const setENSUserAvatar = React.useCallback(() => {
     setUserAvatar({ type: 'ens' });
   }, [setUserAvatar]);
 
   const removeUserAvatar = React.useCallback(() => {
     setUserAvatar({ type: 'remove' });
   }, [setUserAvatar]);
 
   const hasCurrentAvatar = !!userInfo?.avatar;
   const actionSheetConfig = React.useMemo(() => {
     const configOptions = [
       { id: 'emoji', onPress: navigateToEmojiSelection },
       { id: 'image', onPress: selectFromGalleryAndUpdateUserAvatar },
       { id: 'camera', onPress: navigateToCamera },
     ];
 
     if (ensAvatarURI) {
       configOptions.push({ id: 'ens', onPress: setENSUserAvatar });
     }
 
     if (hasCurrentAvatar) {
       configOptions.push({ id: 'remove', onPress: removeUserAvatar });
     }
 
     return configOptions;
   }, [
     hasCurrentAvatar,
     ensAvatarURI,
     navigateToCamera,
     navigateToEmojiSelection,
     removeUserAvatar,
     setENSUserAvatar,
     selectFromGalleryAndUpdateUserAvatar,
   ]);
 
   const showAvatarActionSheet = useShowAvatarActionSheet(actionSheetConfig);
 
   const styles = useStyles(unboundStyles);
 
   let spinner;
   if (userAvatarSaveInProgress) {
     spinner = (
       <View style={styles.spinnerContainer}>
         <ActivityIndicator color="white" size="large" />
       </View>
     );
   }
 
   const { userID } = props;
   const userAvatar = userID ? (
     <UserAvatar userID={userID} size="profile" />
   ) : (
     <UserAvatar userInfo={userInfo} size="profile" />
   );
 
   const { disabled } = props;
   return (
     <TouchableOpacity onPress={showAvatarActionSheet} disabled={disabled}>
       {userAvatar}
       {spinner}
       {!disabled ? <EditAvatarBadge /> : null}
     </TouchableOpacity>
   );
 }
 
 const unboundStyles = {
   spinnerContainer: {
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
   },
 };
 
 export default EditUserAvatar;
diff --git a/native/avatars/native-edit-user-avatar-provider.react.js b/native/avatars/native-edit-user-avatar-provider.react.js
new file mode 100644
index 000000000..94e49f523
--- /dev/null
+++ b/native/avatars/native-edit-user-avatar-provider.react.js
@@ -0,0 +1,34 @@
+// @flow
+
+import * as React from 'react';
+import { Alert } from 'react-native';
+
+import { BaseEditUserAvatarProvider } from 'lib/components/base-edit-user-avatar-provider.react.js';
+
+import { selectFromGallery, useUploadSelectedMedia } from './avatar-hooks.js';
+
+const displayAvatarUpdateFailureAlert = () =>
+  Alert.alert(
+    'Couldn’t save avatar',
+    'Please try again later',
+    [{ text: 'OK' }],
+    { cancelable: true },
+  );
+
+type Props = {
+  +children: React.Node,
+};
+function NativeEditUserAvatarProvider(props: Props): React.Node {
+  const { children } = props;
+  return (
+    <BaseEditUserAvatarProvider
+      displayFailureAlert={displayAvatarUpdateFailureAlert}
+      selectFromGallery={selectFromGallery}
+      useUploadSelectedMedia={useUploadSelectedMedia}
+    >
+      {children}
+    </BaseEditUserAvatarProvider>
+  );
+}
+
+export default NativeEditUserAvatarProvider;
diff --git a/native/media/registration-user-avatar-camera-modal.react.js b/native/media/registration-user-avatar-camera-modal.react.js
index efa9fbe3d..9e24a3f88 100644
--- a/native/media/registration-user-avatar-camera-modal.react.js
+++ b/native/media/registration-user-avatar-camera-modal.react.js
@@ -1,32 +1,32 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
-import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
+import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
 
 import type { RegistrationNavigationProp } from '../account/registration/registration-navigator.react.js';
 import CameraModal from '../media/camera-modal.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 
 type Props = {
   +navigation: RegistrationNavigationProp<'RegistrationUserAvatarCameraModal'>,
   +route: NavigationRoute<'RegistrationUserAvatarCameraModal'>,
 };
 
 function RegistrationUserAvatarCameraModal(props: Props): React.Node {
   const { navigation } = props;
 
   const editUserAvatarContext = React.useContext(EditUserAvatarContext);
   invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
   const { updateImageUserAvatar } = editUserAvatarContext;
 
   return (
     <CameraModal
       handlePhotoCapture={updateImageUserAvatar}
       navigation={navigation}
     />
   );
 }
 
 export default RegistrationUserAvatarCameraModal;
diff --git a/native/media/user-avatar-camera-modal.react.js b/native/media/user-avatar-camera-modal.react.js
index 9e3d5f49d..16ce65949 100644
--- a/native/media/user-avatar-camera-modal.react.js
+++ b/native/media/user-avatar-camera-modal.react.js
@@ -1,32 +1,32 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
-import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
+import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
 
 import CameraModal from '../media/camera-modal.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 
 type Props = {
   +navigation: AppNavigationProp<'UserAvatarCameraModal'>,
   +route: NavigationRoute<'UserAvatarCameraModal'>,
 };
 
 function UserAvatarCameraModal(props: Props): React.Node {
   const { navigation } = props;
 
   const editUserAvatarContext = React.useContext(EditUserAvatarContext);
   invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
   const { updateImageUserAvatar } = editUserAvatarContext;
 
   return (
     <CameraModal
       handlePhotoCapture={updateImageUserAvatar}
       navigation={navigation}
     />
   );
 }
 
 export default UserAvatarCameraModal;
diff --git a/native/profile/emoji-user-avatar-creation.react.js b/native/profile/emoji-user-avatar-creation.react.js
index ecd7a16d2..8330e8236 100644
--- a/native/profile/emoji-user-avatar-creation.react.js
+++ b/native/profile/emoji-user-avatar-creation.react.js
@@ -1,41 +1,41 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
-import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
+import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
 import { savedEmojiAvatarSelectorForCurrentUser } from 'lib/selectors/user-selectors.js';
 
 import EmojiAvatarCreation from '../avatars/emoji-avatar-creation.react.js';
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 // eslint-disable-next-line no-unused-vars
 function EmojiUserAvatarCreation(props: { ... }): React.Node {
   const editUserAvatarContext = React.useContext(EditUserAvatarContext);
   invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
 
   const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;
   const setAvatar = React.useCallback(
     async avatarRequest => {
       const result = await setUserAvatar(avatarRequest);
       displayActionResultModal('Avatar updated!');
       return result;
     },
     [setUserAvatar],
   );
 
   const savedEmojiAvatarFunc = useSelector(
     savedEmojiAvatarSelectorForCurrentUser,
   );
 
   return (
     <EmojiAvatarCreation
       saveAvatarCall={setAvatar}
       saveAvatarCallLoading={userAvatarSaveInProgress}
       savedEmojiAvatarFunc={savedEmojiAvatarFunc}
     />
   );
 }
 
 export default EmojiUserAvatarCreation;
diff --git a/native/root.react.js b/native/root.react.js
index 8f8bb178b..56136230c 100644
--- a/native/root.react.js
+++ b/native/root.react.js
@@ -1,338 +1,322 @@
 // @flow
 
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useReduxDevToolsExtension } from '@react-navigation/devtools';
 import { NavigationContainer } from '@react-navigation/native';
 import type { PossiblyStaleNavigationState } from '@react-navigation/native';
 import * as SplashScreen from 'expo-splash-screen';
 import invariant from 'invariant';
 import * as React from 'react';
-import { Platform, UIManager, StyleSheet, Alert } from 'react-native';
+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 { EditUserAvatarProvider } from 'lib/components/edit-user-avatar-provider.react.js';
 import { ENSCacheProvider } from 'lib/components/ens-cache-provider.react.js';
 import { MediaCacheProvider } from 'lib/components/media-cache-provider.react.js';
 import { actionLogger } from 'lib/utils/action-logger.js';
 
 import { RegistrationContextProvider } from './account/registration/registration-context-provider.react.js';
-import {
-  selectFromGallery,
-  useUploadSelectedMedia,
-} from './avatars/avatar-hooks.js';
 import { EditThreadAvatarProvider } from './avatars/edit-thread-avatar-provider.react.js';
+import NativeEditUserAvatarProvider from './avatars/native-edit-user-avatar-provider.react.js';
 import ChatContextProvider from './chat/chat-context-provider.react.js';
 import { FeatureFlagsProvider } from './components/feature-flags-provider.react.js';
 import PersistedStateGate from './components/persisted-state-gate.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 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 { defaultNavigationState } from './navigation/default-state.js';
 import DisconnectedBarVisibilityHandler from './navigation/disconnected-bar-visibility-handler.react.js';
 import { setGlobalNavContext } from './navigation/icky-global.js';
 import { NavContext } 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';
 
 // 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);
 
-const displayAvatarUpdateFailureAlert = () =>
-  Alert.alert(
-    'Couldn’t save avatar',
-    'Please try again later',
-    [{ text: 'OK' }],
-    { cancelable: true },
-  );
-
 function Root() {
   const navStateRef = React.useRef();
   const navDispatchRef = React.useRef();
   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(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();
     (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([]);
   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;
       }
 
       (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();
   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 => {
       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 gated: React.Node = (
     <>
       <LifecycleHandler />
       <DisconnectedBarVisibilityHandler />
       <DimensionsUpdater />
       <ConnectivityUpdater />
       <ThemeHandler />
       <OrientationHandler />
     </>
   );
   let navigation;
   if (initialState) {
     navigation = (
       <NavigationContainer
         initialState={initialState}
         onStateChange={onNavigationStateChange}
         theme={theme}
         ref={containerRef}
       >
         <RootNavigator />
         <NavigationHandler />
       </NavigationContainer>
     );
   }
   return (
     <GestureHandlerRootView style={styles.app}>
       <StaffContextProvider>
         <FeatureFlagsProvider>
           <NavContext.Provider value={navContext}>
             <RootContext.Provider value={rootContext}>
               <InputStateContainer>
                 <SafeAreaProvider initialMetrics={initialWindowMetrics}>
                   <ActionSheetProvider>
                     <ENSCacheProvider provider={provider}>
                       <MediaCacheProvider persistence={filesystemMediaCache}>
-                        <EditUserAvatarProvider
-                          displayFailureAlert={displayAvatarUpdateFailureAlert}
-                          selectFromGallery={selectFromGallery}
-                          useUploadSelectedMedia={useUploadSelectedMedia}
-                        >
+                        <NativeEditUserAvatarProvider>
                           <EditThreadAvatarProvider>
                             <MarkdownContextProvider>
                               <ChatContextProvider>
                                 <MessageSearchProvider>
                                   <RegistrationContextProvider>
                                     <SQLiteDataHandler />
                                     <ConnectedStatusBar />
                                     <ReduxPersistGate
                                       persistor={getPersistor()}
                                     >
                                       {gated}
                                     </ReduxPersistGate>
                                     <PersistedStateGate>
                                       <Socket
                                         detectUnsupervisedBackgroundRef={
                                           detectUnsupervisedBackgroundRef
                                         }
                                       />
                                     </PersistedStateGate>
                                     {navigation}
                                   </RegistrationContextProvider>
                                 </MessageSearchProvider>
                               </ChatContextProvider>
                             </MarkdownContextProvider>
                           </EditThreadAvatarProvider>
-                        </EditUserAvatarProvider>
+                        </NativeEditUserAvatarProvider>
                       </MediaCacheProvider>
                     </ENSCacheProvider>
                   </ActionSheetProvider>
                 </SafeAreaProvider>
               </InputStateContainer>
             </RootContext.Provider>
           </NavContext.Provider>
         </FeatureFlagsProvider>
       </StaffContextProvider>
     </GestureHandlerRootView>
   );
 }
 
 const styles = StyleSheet.create({
   app: {
     flex: 1,
   },
 });
 
 function AppRoot(): React.Node {
   return (
     <Provider store={store}>
       <ErrorBoundary>
         <Root />
       </ErrorBoundary>
     </Provider>
   );
 }
 export default AppRoot;