diff --git a/native/avatars/edit-thread-avatar-provider.react.js b/lib/components/base-edit-thread-avatar-provider.react.js
similarity index 90%
rename from native/avatars/edit-thread-avatar-provider.react.js
rename to lib/components/base-edit-thread-avatar-provider.react.js
index 5001c3062..85408911a 100644
--- a/native/avatars/edit-thread-avatar-provider.react.js
+++ b/lib/components/base-edit-thread-avatar-provider.react.js
@@ -1,197 +1,196 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   changeThreadSettings,
   changeThreadSettingsActionTypes,
-} from 'lib/actions/thread-actions.js';
-import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+} from '../actions/thread-actions.js';
+import { createLoadingStatusSelector } from '../selectors/loading-selectors.js';
 import type {
   UpdateUserAvatarRequest,
   ImageAvatarDBContent,
-} from 'lib/types/avatar-types.js';
-import type { LoadingStatus } from 'lib/types/loading-types.js';
+} from '../types/avatar-types.js';
+import type { LoadingStatus } from '../types/loading-types.js';
 import type {
   MediaLibrarySelection,
   NativeMediaSelection,
-} from 'lib/types/media-types.js';
-import type { UpdateThreadRequest } from 'lib/types/thread-types.js';
+} from '../types/media-types.js';
+import type { UpdateThreadRequest } from '../types/thread-types.js';
 import {
   useDispatchActionPromise,
   useServerCall,
-} from 'lib/utils/action-utils.js';
-
-import { useSelector } from '../redux/redux-utils.js';
+} from '../utils/action-utils.js';
+import { useSelector } from '../utils/redux-utils.js';
 
 export type EditThreadAvatarContextType = {
   +threadAvatarSaveInProgress: boolean,
   +selectFromGalleryAndUpdateThreadAvatar: (threadID: string) => Promise<void>,
   +updateImageThreadAvatar: (
     selection: NativeMediaSelection,
     threadID: string,
   ) => Promise<void>,
   +setThreadAvatar: (
     threadID: string,
     avatarRequest: UpdateUserAvatarRequest,
   ) => Promise<void>,
 };
 
 const EditThreadAvatarContext: React.Context<?EditThreadAvatarContextType> =
   React.createContext<?EditThreadAvatarContextType>();
 
 type Props = {
   +displayFailureAlert: () => mixed,
   +selectFromGallery: () => Promise<?MediaLibrarySelection>,
   +useUploadSelectedMedia: (
     setProcessingOrUploadInProgress?: (inProgress: boolean) => mixed,
   ) => (selection: NativeMediaSelection) => Promise<?ImageAvatarDBContent>,
   +activeThreadID: string,
   +children: React.Node,
 };
-function EditThreadAvatarProvider(props: Props): React.Node {
+function BaseEditThreadAvatarProvider(props: Props): React.Node {
   const {
     displayFailureAlert,
     selectFromGallery,
     useUploadSelectedMedia,
     activeThreadID,
     children,
   } = props;
 
   const updateThreadAvatarLoadingStatus: LoadingStatus = useSelector(
     createLoadingStatusSelector(
       changeThreadSettingsActionTypes,
       `${changeThreadSettingsActionTypes.started}:${activeThreadID}:avatar`,
     ),
   );
 
   const dispatchActionPromise = useDispatchActionPromise();
   const changeThreadSettingsCall = useServerCall(changeThreadSettings);
 
   const [
     threadAvatarMediaUploadInProgress,
     setThreadAvatarMediaUploadInProgress,
   ] = React.useState<$ReadOnlySet<string>>(new Set<string>());
 
   const updateThreadAvatarMediaUploadInProgress = React.useCallback(
     (inProgress: boolean) =>
       setThreadAvatarMediaUploadInProgress(prevState => {
         const updatedSet = new Set(prevState);
         if (inProgress) {
           updatedSet.add(activeThreadID);
         } else {
           updatedSet.delete(activeThreadID);
         }
         return updatedSet;
       }),
     [activeThreadID],
   );
 
   const threadAvatarSaveInProgress =
     threadAvatarMediaUploadInProgress.has(activeThreadID) ||
     updateThreadAvatarLoadingStatus === 'loading';
 
   const uploadSelectedMedia = useUploadSelectedMedia(
     updateThreadAvatarMediaUploadInProgress,
   );
 
   const updateImageThreadAvatar = React.useCallback(
     async (selection: NativeMediaSelection, threadID: string) => {
       const imageAvatarUpdateRequest = await uploadSelectedMedia(selection);
 
       if (!imageAvatarUpdateRequest) {
         return;
       }
 
       const updateThreadRequest: UpdateThreadRequest = {
         threadID,
         changes: {
           avatar: imageAvatarUpdateRequest,
         },
       };
 
       const action = changeThreadSettingsActionTypes.started;
       dispatchActionPromise(
         changeThreadSettingsActionTypes,
         (async () => {
           updateThreadAvatarMediaUploadInProgress(false);
           try {
             return await changeThreadSettingsCall(updateThreadRequest);
           } catch (e) {
             displayFailureAlert();
             throw e;
           }
         })(),
         {
           customKeyName: `${action}:${threadID}:avatar`,
         },
       );
     },
     [
       changeThreadSettingsCall,
       dispatchActionPromise,
       displayFailureAlert,
       updateThreadAvatarMediaUploadInProgress,
       uploadSelectedMedia,
     ],
   );
 
   const selectFromGalleryAndUpdateThreadAvatar = React.useCallback(
     async (threadID: string) => {
       const selection: ?MediaLibrarySelection = await selectFromGallery();
       if (!selection) {
         return;
       }
       await updateImageThreadAvatar(selection, threadID);
     },
     [selectFromGallery, updateImageThreadAvatar],
   );
 
   const setThreadAvatar = React.useCallback(
     async (threadID: string, avatarRequest: UpdateUserAvatarRequest) => {
       const updateThreadRequest: UpdateThreadRequest = {
         threadID,
         changes: {
           avatar: avatarRequest,
         },
       };
       const action = changeThreadSettingsActionTypes.started;
       const promise = (async () => {
         try {
           return await changeThreadSettingsCall(updateThreadRequest);
         } catch (e) {
           displayFailureAlert();
           throw e;
         }
       })();
       dispatchActionPromise(changeThreadSettingsActionTypes, promise, {
         customKeyName: `${action}:${threadID}:avatar`,
       });
       await promise;
     },
     [changeThreadSettingsCall, dispatchActionPromise, displayFailureAlert],
   );
 
   const context = React.useMemo(
     () => ({
       threadAvatarSaveInProgress,
       selectFromGalleryAndUpdateThreadAvatar,
       updateImageThreadAvatar,
       setThreadAvatar,
     }),
     [
       threadAvatarSaveInProgress,
       selectFromGalleryAndUpdateThreadAvatar,
       updateImageThreadAvatar,
       setThreadAvatar,
     ],
   );
 
   return (
     <EditThreadAvatarContext.Provider value={context}>
       {children}
     </EditThreadAvatarContext.Provider>
   );
 }
 
-export { EditThreadAvatarContext, EditThreadAvatarProvider };
+export { EditThreadAvatarContext, BaseEditThreadAvatarProvider };
diff --git a/native/avatars/edit-thread-avatar.react.js b/native/avatars/edit-thread-avatar.react.js
index 46ddef763..bcbca2f89 100644
--- a/native/avatars/edit-thread-avatar.react.js
+++ b/native/avatars/edit-thread-avatar.react.js
@@ -1,116 +1,116 @@
 // @flow
 
 import { useNavigation } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 
+import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
 import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
 
 import { useShowAvatarActionSheet } from './avatar-hooks.js';
 import EditAvatarBadge from './edit-avatar-badge.react.js';
-import { EditThreadAvatarContext } from './edit-thread-avatar-provider.react.js';
 import ThreadAvatar from './thread-avatar.react.js';
 import {
   EmojiThreadAvatarCreationRouteName,
   ThreadAvatarCameraModalRouteName,
 } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
 
 type Props = {
   +threadInfo: RawThreadInfo | ThreadInfo,
   +disabled?: boolean,
 };
 function EditThreadAvatar(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const { threadInfo, disabled } = props;
 
   const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
   invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set');
   const {
     threadAvatarSaveInProgress,
     selectFromGalleryAndUpdateThreadAvatar,
     setThreadAvatar,
   } = editThreadAvatarContext;
 
   const { navigate } = useNavigation();
 
   const navigateToThreadEmojiAvatarCreation = React.useCallback(() => {
     navigate<'EmojiThreadAvatarCreation'>({
       name: EmojiThreadAvatarCreationRouteName,
       params: {
         threadInfo,
       },
     });
   }, [navigate, threadInfo]);
 
   const selectFromGallery = React.useCallback(
     () => selectFromGalleryAndUpdateThreadAvatar(threadInfo.id),
     [selectFromGalleryAndUpdateThreadAvatar, threadInfo.id],
   );
 
   const navigateToCamera = React.useCallback(() => {
     navigate<'ThreadAvatarCameraModal'>({
       name: ThreadAvatarCameraModalRouteName,
       params: { threadID: threadInfo.id },
     });
   }, [navigate, threadInfo.id]);
 
   const removeAvatar = React.useCallback(
     () => setThreadAvatar(threadInfo.id, { type: 'remove' }),
     [setThreadAvatar, threadInfo.id],
   );
 
   const actionSheetConfig = React.useMemo(() => {
     const configOptions = [
       { id: 'emoji', onPress: navigateToThreadEmojiAvatarCreation },
       { id: 'image', onPress: selectFromGallery },
       { id: 'camera', onPress: navigateToCamera },
     ];
 
     if (threadInfo.avatar) {
       configOptions.push({ id: 'remove', onPress: removeAvatar });
     }
 
     return configOptions;
   }, [
     navigateToCamera,
     navigateToThreadEmojiAvatarCreation,
     removeAvatar,
     selectFromGallery,
     threadInfo.avatar,
   ]);
 
   const showAvatarActionSheet = useShowAvatarActionSheet(actionSheetConfig);
 
   let spinner;
   if (threadAvatarSaveInProgress) {
     spinner = (
       <View style={styles.spinnerContainer}>
         <ActivityIndicator color="white" size="large" />
       </View>
     );
   }
 
   return (
     <TouchableOpacity onPress={showAvatarActionSheet} disabled={disabled}>
       <ThreadAvatar threadInfo={threadInfo} size="profile" />
       {spinner}
       {!disabled ? <EditAvatarBadge /> : null}
     </TouchableOpacity>
   );
 }
 
 const unboundStyles = {
   spinnerContainer: {
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center',
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
   },
 };
 
 export default EditThreadAvatar;
diff --git a/native/avatars/native-edit-thread-avatar-provider.react.js b/native/avatars/native-edit-thread-avatar-provider.react.js
index 89f9f609c..9e55240c6 100644
--- a/native/avatars/native-edit-thread-avatar-provider.react.js
+++ b/native/avatars/native-edit-thread-avatar-provider.react.js
@@ -1,43 +1,44 @@
 // @flow
 
 import * as React from 'react';
 import { Alert } from 'react-native';
 
+import { BaseEditThreadAvatarProvider } from 'lib/components/base-edit-thread-avatar-provider.react.js';
+
 import { selectFromGallery, useUploadSelectedMedia } from './avatar-hooks.js';
-import { EditThreadAvatarProvider } from './edit-thread-avatar-provider.react.js';
 import { activeThreadSelector } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 
 const displayAvatarUpdateFailureAlert = () =>
   Alert.alert(
     'Couldn’t save avatar',
     'Please try again later',
     [{ text: 'OK' }],
     { cancelable: true },
   );
 
 type Props = {
   +children: React.Node,
 };
 function NativeEditThreadAvatarProvider(props: Props): React.Node {
   const { children } = props;
 
   const navContext = React.useContext(NavContext);
   const activeThreadID = React.useMemo(
     () => activeThreadSelector(navContext) ?? '',
     [navContext],
   );
 
   return (
-    <EditThreadAvatarProvider
+    <BaseEditThreadAvatarProvider
       displayFailureAlert={displayAvatarUpdateFailureAlert}
       selectFromGallery={selectFromGallery}
       useUploadSelectedMedia={useUploadSelectedMedia}
       activeThreadID={activeThreadID}
     >
       {children}
-    </EditThreadAvatarProvider>
+    </BaseEditThreadAvatarProvider>
   );
 }
 
 export default NativeEditThreadAvatarProvider;
diff --git a/native/chat/settings/emoji-thread-avatar-creation.react.js b/native/chat/settings/emoji-thread-avatar-creation.react.js
index 546d42214..9bd4d08c7 100644
--- a/native/chat/settings/emoji-thread-avatar-creation.react.js
+++ b/native/chat/settings/emoji-thread-avatar-creation.react.js
@@ -1,57 +1,57 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
+import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
 import { savedEmojiAvatarSelectorForThread } from 'lib/selectors/thread-selectors.js';
 import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
 
-import { EditThreadAvatarContext } from '../../avatars/edit-thread-avatar-provider.react.js';
 import EmojiAvatarCreation from '../../avatars/emoji-avatar-creation.react.js';
 import type { ChatNavigationProp } from '../../chat/chat.react.js';
 import { displayActionResultModal } from '../../navigation/action-result-modal.js';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 
 export type EmojiThreadAvatarCreationParams = {
   +threadInfo: RawThreadInfo | ThreadInfo,
 };
 
 type Props = {
   +navigation: ChatNavigationProp<'EmojiThreadAvatarCreation'>,
   +route: NavigationRoute<'EmojiThreadAvatarCreation'>,
 };
 
 function EmojiThreadAvatarCreation(props: Props): React.Node {
   const { id: threadID, containingThreadID } = props.route.params.threadInfo;
 
   const selector = savedEmojiAvatarSelectorForThread(
     threadID,
     containingThreadID,
   );
   const savedEmojiAvatarFunc = useSelector(selector);
 
   const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
   invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set');
 
   const { setThreadAvatar, threadAvatarSaveInProgress } =
     editThreadAvatarContext;
   const setAvatar = React.useCallback(
     async avatarRequest => {
       const result = await setThreadAvatar(threadID, avatarRequest);
       displayActionResultModal('Avatar updated!');
       return result;
     },
     [setThreadAvatar, threadID],
   );
 
   return (
     <EmojiAvatarCreation
       saveAvatarCall={setAvatar}
       saveAvatarCallLoading={threadAvatarSaveInProgress}
       savedEmojiAvatarFunc={savedEmojiAvatarFunc}
     />
   );
 }
 
 export default EmojiThreadAvatarCreation;
diff --git a/native/media/thread-avatar-camera-modal.react.js b/native/media/thread-avatar-camera-modal.react.js
index a3e6392e1..3a875852a 100644
--- a/native/media/thread-avatar-camera-modal.react.js
+++ b/native/media/thread-avatar-camera-modal.react.js
@@ -1,40 +1,40 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
+import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
 import type { PhotoCapture } from 'lib/types/media-types.js';
 
-import { EditThreadAvatarContext } from '../avatars/edit-thread-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';
 
 export type ThreadAvatarCameraModalParams = {
   +threadID: string,
 };
 
 type Props = {
   +navigation: AppNavigationProp<'ThreadAvatarCameraModal'>,
   +route: NavigationRoute<'ThreadAvatarCameraModal'>,
 };
 
 function ThreadAvatarCameraModal(props: Props): React.Node {
   const { navigation, route } = props;
   const { threadID } = route.params;
 
   const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
   invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set');
   const { updateImageThreadAvatar } = editThreadAvatarContext;
 
   const sendPhoto = React.useCallback(
     (capture: PhotoCapture) => {
       updateImageThreadAvatar(capture, threadID);
     },
     [threadID, updateImageThreadAvatar],
   );
 
   return <CameraModal handlePhotoCapture={sendPhoto} navigation={navigation} />;
 }
 
 export default ThreadAvatarCameraModal;