diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js
--- a/native/navigation/root-navigator.react.js
+++ b/native/navigation/root-navigator.react.js
@@ -45,7 +45,7 @@
   CommunityCreationRouteName,
   RolesNavigatorRouteName,
   QRCodeSignInNavigatorRouteName,
-  UserProfileBottomSheetRouteName,
+  UserProfileBottomSheetNavigatorRouteName,
 } from './route-names.js';
 import LoggedOutModal from '../account/logged-out-modal.react.js';
 import RegistrationNavigator from '../account/registration/registration-navigator.react.js';
@@ -63,7 +63,7 @@
 import CustomServerModal from '../profile/custom-server-modal.react.js';
 import QRCodeSignInNavigator from '../qr-code/qr-code-sign-in-navigator.react.js';
 import RolesNavigator from '../roles/roles-navigator.react.js';
-import UserProfileBottomSheet from '../user-profile/user-profile-bottom-sheet.react.js';
+import UserProfileBottomSheetNavigator from '../user-profile/user-profile-bottom-sheet-navigator.react.js';
 
 enableScreens();
 
@@ -281,8 +281,8 @@
       />
       <Root.Screen name={RolesNavigatorRouteName} component={RolesNavigator} />
       <Root.Screen
-        name={UserProfileBottomSheetRouteName}
-        component={UserProfileBottomSheet}
+        name={UserProfileBottomSheetNavigatorRouteName}
+        component={UserProfileBottomSheetNavigator}
         options={modalOverlayScreenOptions}
       />
     </Root.Navigator>
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -134,6 +134,8 @@
 export const CreateRolesScreenRouteName = 'CreateRolesScreen';
 export const QRCodeSignInNavigatorRouteName = 'QRCodeSignInNavigator';
 export const QRCodeScreenRouteName = 'QRCodeScreen';
+export const UserProfileBottomSheetNavigatorRouteName =
+  'UserProfileBottomSheetNavigator';
 export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet';
 
 export type RootParamList = {
@@ -155,7 +157,7 @@
   +InviteLinkNavigator: void,
   +RolesNavigator: void,
   +QRCodeSignInNavigator: void,
-  +UserProfileBottomSheet: UserProfileBottomSheetParams,
+  +UserProfileBottomSheetNavigator: void,
 };
 
 export type MessageTooltipRouteNames =
@@ -264,7 +266,7 @@
   +QRCodeScreen: void,
 };
 
-export type BottomSheetParamList = {
+export type UserProfileBottomSheetParamList = {
   +UserProfileBottomSheet: UserProfileBottomSheetParams,
 };
 
@@ -281,7 +283,7 @@
   ...CommunityCreationParamList,
   ...RolesParamList,
   ...QRCodeSignInParamList,
-  ...BottomSheetParamList,
+  ...UserProfileBottomSheetParamList,
 };
 
 export type NavigationRoute<RouteName: string = $Keys<ScreenParamList>> =
diff --git a/native/user-profile/user-profile-bottom-sheet-navigator.react.js b/native/user-profile/user-profile-bottom-sheet-navigator.react.js
new file mode 100644
--- /dev/null
+++ b/native/user-profile/user-profile-bottom-sheet-navigator.react.js
@@ -0,0 +1,45 @@
+// @flow
+
+import * as React from 'react';
+
+import UserProfileBottomSheet from './user-profile-bottom-sheet.react.js';
+import { createOverlayNavigator } from '../navigation/overlay-navigator.react.js';
+import type {
+  OverlayNavigationProp,
+  OverlayNavigationHelpers,
+} from '../navigation/overlay-navigator.react.js';
+import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
+import {
+  UserProfileBottomSheetRouteName,
+  type ScreenParamList,
+  type UserProfileBottomSheetParamList,
+} from '../navigation/route-names.js';
+
+export type UserProfileBottomSheetNavigationProp<
+  RouteName: $Keys<UserProfileBottomSheetParamList>,
+> = OverlayNavigationProp<ScreenParamList, RouteName>;
+
+const UserProfileBottomSheetOverlayNavigator = createOverlayNavigator<
+  ScreenParamList,
+  UserProfileBottomSheetParamList,
+  OverlayNavigationHelpers<ScreenParamList>,
+>();
+
+type Props = {
+  +navigation: RootNavigationProp<'UserProfileBottomSheet'>,
+  ...
+};
+
+// eslint-disable-next-line no-unused-vars
+function UserProfileBottomSheetNavigator(props: Props): React.Node {
+  return (
+    <UserProfileBottomSheetOverlayNavigator.Navigator>
+      <UserProfileBottomSheetOverlayNavigator.Screen
+        name={UserProfileBottomSheetRouteName}
+        component={UserProfileBottomSheet}
+      />
+    </UserProfileBottomSheetOverlayNavigator.Navigator>
+  );
+}
+
+export default UserProfileBottomSheetNavigator;
diff --git a/native/user-profile/user-profile-bottom-sheet.react.js b/native/user-profile/user-profile-bottom-sheet.react.js
--- a/native/user-profile/user-profile-bottom-sheet.react.js
+++ b/native/user-profile/user-profile-bottom-sheet.react.js
@@ -27,7 +27,7 @@
     },
   } = props;
 
-  const { goBackOnce } = navigation;
+  const { goBack } = navigation;
 
   const userInfo: ?UserInfo = useSelector(
     state => state.userStore.userInfos[userID],
@@ -35,12 +35,8 @@
 
   const bottomSheetRef = React.useRef();
 
-  const onClosed = React.useCallback(() => {
-    goBackOnce();
-  }, [goBackOnce]);
-
   return (
-    <BottomSheet ref={bottomSheetRef} onClosed={onClosed}>
+    <BottomSheet ref={bottomSheetRef} onClosed={goBack}>
       <UserProfile userInfo={userInfo} />
     </BottomSheet>
   );