diff --git a/native/bottom-sheets/bottom-sheet.react.js b/native/bottom-sheets/bottom-sheet.react.js
new file mode 100644
index 000000000..f805e70de
--- /dev/null
+++ b/native/bottom-sheets/bottom-sheet.react.js
@@ -0,0 +1,57 @@
+// @flow
+
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import * as React from 'react';
+
+import { useStyles } from '../themes/colors.js';
+
+type Props = {
+  +children: React.Node,
+};
+
+function ForwardedBottomSheet(
+  props: Props,
+  ref: React.Ref<typeof BottomSheetModal>,
+): React.Node {
+  const { children } = props;
+
+  const styles = useStyles(unboundStyles);
+
+  const snapPoints = React.useMemo(() => ['25%', '50%'], []);
+
+  return (
+    <BottomSheetModal
+      ref={ref}
+      backgroundStyle={styles.background}
+      snapPoints={snapPoints}
+      handleIndicatorStyle={styles.handleIndicator}
+    >
+      {children}
+    </BottomSheetModal>
+  );
+}
+
+const unboundStyles = {
+  background: {
+    backgroundColor: 'modalForeground',
+  },
+  handleIndicator: {
+    backgroundColor: 'modalKnob',
+    width: 64,
+  },
+};
+
+const BottomSheet: React.AbstractComponent<
+  Props,
+  React.ElementRef<typeof BottomSheetModal>,
+> = React.forwardRef<Props, React.ElementRef<typeof BottomSheetModal>>(
+  ForwardedBottomSheet,
+);
+BottomSheet.displayName = 'BottomSheet';
+
+const MemoizedBottomSheet: typeof BottomSheet = React.memo<
+  Props,
+  React.ElementRef<typeof BottomSheetModal>,
+>(BottomSheet);
+
+export default MemoizedBottomSheet;
diff --git a/native/components/user-profile.react.js b/native/components/user-profile.react.js
index 3719235ba..13b68df10 100644
--- a/native/components/user-profile.react.js
+++ b/native/components/user-profile.react.js
@@ -1,113 +1,112 @@
 // @flow
 
 import Clipboard from '@react-native-clipboard/clipboard';
 import * as React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 
 import type { AccountUserInfo } from 'lib/types/user-types';
 import sleep from 'lib/utils/sleep.js';
 
 import SWMansionIcon from './swmansion-icon.react.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import { useStyles } from '../themes/colors.js';
 
 type Props = {
   +userInfo: AccountUserInfo,
 };
 
 function UserProfile(props: Props): React.Node {
   const { userInfo } = props;
 
   const [usernameCopied, setUsernameCopied] = React.useState<boolean>(false);
 
   const styles = useStyles(unboundStyles);
 
   const onPressCopyUsername = React.useCallback(async () => {
     Clipboard.setString(userInfo.username);
     setUsernameCopied(true);
     await sleep(3000);
     setUsernameCopied(false);
   }, [userInfo.username]);
 
   const copyUsernameButton = React.useMemo(() => {
     if (usernameCopied) {
       return (
         <View style={styles.copyUsernameContainer}>
           <SWMansionIcon
             name="check"
             style={styles.copyUsernameIcon}
             size={16}
           />
           <Text style={styles.copyUsernameText}>Username copied!</Text>
         </View>
       );
     }
 
     return (
       <TouchableOpacity
         style={styles.copyUsernameContainer}
         onPress={onPressCopyUsername}
       >
         <SWMansionIcon name="copy" style={styles.copyUsernameIcon} size={16} />
         <Text style={styles.copyUsernameText}>Copy username</Text>
       </TouchableOpacity>
     );
   }, [
     onPressCopyUsername,
     styles.copyUsernameContainer,
     styles.copyUsernameIcon,
     styles.copyUsernameText,
     usernameCopied,
   ]);
 
   return (
     <View style={styles.container}>
       <SWMansionIcon name="menu-vertical" size={24} style={styles.moreIcon} />
       <View style={styles.userInfoContainer}>
         <UserAvatar size="profile" userID={userInfo.id} />
         <View style={styles.usernameContainer}>
           <Text style={styles.usernameText}>{userInfo.username}</Text>
           {copyUsernameButton}
         </View>
       </View>
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
-    backgroundColor: 'modalForeground',
     paddingHorizontal: 16,
   },
   moreIcon: {
     color: 'modalButtonLabel',
     alignSelf: 'flex-end',
   },
   userInfoContainer: {
     flexDirection: 'row',
   },
   usernameContainer: {
     justifyContent: 'center',
     paddingLeft: 16,
   },
   usernameText: {
     color: 'modalForegroundLabel',
     fontSize: 18,
     fontWeight: '500',
   },
   copyUsernameContainer: {
     flexDirection: 'row',
     justifyContent: 'center',
     paddingTop: 8,
   },
   copyUsernameIcon: {
     color: 'purpleLink',
     marginRight: 4,
   },
   copyUsernameText: {
     color: 'purpleLink',
     fontSize: 12,
   },
 };
 
 export default UserProfile;