diff --git a/native/components/user-profile-relationship-button.react.js b/native/components/user-profile-relationship-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/user-profile-relationship-button.react.js
@@ -0,0 +1,122 @@
+// @flow
+
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+import { useRelationshipPrompt } from 'lib/hooks/relationship-prompt.js';
+import { userRelationshipStatus } from 'lib/types/relationship-types.js';
+import type { ThreadInfo } from 'lib/types/thread-types.js';
+import type { UserInfo } from 'lib/types/user-types';
+
+import RelationshipButton from './relationship-button.react.js';
+import { useStyles } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
+
+const onErrorCallback = () => {
+  Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }]);
+};
+
+type Props = {
+  +threadInfo: ThreadInfo,
+  +pendingPersonalThreadUserInfo?: UserInfo,
+};
+
+function UserProfileRelationshipButton(props: Props): React.Node {
+  const { threadInfo, pendingPersonalThreadUserInfo } = props;
+
+  const {
+    otherUserInfo,
+    callbacks: { friendUser, unfriendUser },
+  } = useRelationshipPrompt(
+    threadInfo,
+    onErrorCallback,
+    pendingPersonalThreadUserInfo,
+  );
+
+  const styles = useStyles(unboundStyles);
+
+  const userProfileRelationshipButton = React.useMemo(() => {
+    if (
+      !otherUserInfo ||
+      !otherUserInfo.username ||
+      otherUserInfo.relationshipStatus === userRelationshipStatus.FRIEND
+    ) {
+      return null;
+    }
+
+    if (
+      otherUserInfo.relationshipStatus ===
+      userRelationshipStatus.REQUEST_RECEIVED
+    ) {
+      return (
+        <View style={styles.incomingFriendRequestContainer}>
+          <Text style={styles.incomingFriendRequestLabel}>
+            Incoming friend request
+          </Text>
+          <View style={styles.incomingFriendRequestButtonsContainer}>
+            <View style={styles.acceptFriendRequestButtonContainer}>
+              <RelationshipButton type="accept" onPress={friendUser} />
+            </View>
+            <View style={styles.rejectFriendRequestButtonContainer}>
+              <RelationshipButton type="reject" onPress={unfriendUser} />
+            </View>
+          </View>
+        </View>
+      );
+    }
+
+    if (
+      otherUserInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT
+    ) {
+      return (
+        <View style={styles.singleButtonContainer}>
+          <RelationshipButton type="withdraw" onPress={unfriendUser} />
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.singleButtonContainer}>
+        <RelationshipButton type="add" onPress={friendUser} />
+      </View>
+    );
+  }, [
+    friendUser,
+    otherUserInfo,
+    styles.acceptFriendRequestButtonContainer,
+    styles.incomingFriendRequestButtonsContainer,
+    styles.incomingFriendRequestContainer,
+    styles.incomingFriendRequestLabel,
+    styles.rejectFriendRequestButtonContainer,
+    styles.singleButtonContainer,
+    unfriendUser,
+  ]);
+
+  return userProfileRelationshipButton;
+}
+
+const unboundStyles = {
+  singleButtonContainer: {
+    marginTop: 16,
+  },
+  incomingFriendRequestContainer: {
+    marginTop: 24,
+  },
+  incomingFriendRequestLabel: {
+    color: 'modalForegroundLabel',
+  },
+  incomingFriendRequestButtonsContainer: {
+    flexDirection: 'row',
+    marginTop: 8,
+  },
+  acceptFriendRequestButtonContainer: {
+    flex: 1,
+    marginRight: 4,
+  },
+  rejectFriendRequestButtonContainer: {
+    flex: 1,
+    marginLeft: 4,
+  },
+};
+
+export default UserProfileRelationshipButton;
diff --git a/native/components/user-profile.react.js b/native/components/user-profile.react.js
--- a/native/components/user-profile.react.js
+++ b/native/components/user-profile.react.js
@@ -12,6 +12,7 @@
 
 import SWMansionIcon from './swmansion-icon.react.js';
 import UserProfileMessageButton from './user-profile-message-button.react.js';
+import UserProfileRelationshipButton from './user-profile-relationship-button.react.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import SingleLine from '../components/single-line.react.js';
 import { useStyles } from '../themes/colors.js';
@@ -86,6 +87,23 @@
     );
   }, [userInfo?.relationshipStatus, userProfileThreadInfo]);
 
+  const relationshipButton = React.useMemo(() => {
+    if (
+      !userProfileThreadInfo ||
+      relationshipBlockedInEitherDirection(userInfo?.relationshipStatus)
+    ) {
+      return null;
+    }
+
+    const { threadInfo, pendingPersonalThreadUserInfo } = userProfileThreadInfo;
+    return (
+      <UserProfileRelationshipButton
+        threadInfo={threadInfo}
+        pendingPersonalThreadUserInfo={pendingPersonalThreadUserInfo}
+      />
+    );
+  }, [userInfo?.relationshipStatus, userProfileThreadInfo]);
+
   return (
     <View style={styles.container}>
       <SWMansionIcon name="menu-vertical" size={24} style={styles.moreIcon} />
@@ -97,6 +115,7 @@
         </View>
       </View>
       {messageButton}
+      {relationshipButton}
     </View>
   );
 }