diff --git a/native/components/user-profile-message-button.react.js b/native/components/user-profile-message-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/user-profile-message-button.react.js
@@ -0,0 +1,64 @@
+// @flow
+
+import { useBottomSheetModal } from '@gorhom/bottom-sheet';
+import * as React from 'react';
+import { Text } from 'react-native';
+
+import type { ThreadInfo } from 'lib/types/thread-types.js';
+import type { UserInfo } from 'lib/types/user-types';
+
+import Button from './button.react.js';
+import SWMansionIcon from './swmansion-icon.react.js';
+import { useNavigateToThread } from '../chat/message-list-types.js';
+import { useStyles } from '../themes/colors.js';
+
+type Props = {
+ +threadInfo: ThreadInfo,
+ +pendingPersonalThreadUserInfo?: UserInfo,
+};
+
+function UserProfileMessageButton(props: Props): React.Node {
+ const { threadInfo, pendingPersonalThreadUserInfo } = props;
+
+ const { dismiss } = useBottomSheetModal();
+
+ const styles = useStyles(unboundStyles);
+
+ const navigateToThread = useNavigateToThread();
+
+ const onPressMessage = React.useCallback(() => {
+ dismiss();
+ navigateToThread({
+ threadInfo,
+ pendingPersonalThreadUserInfo,
+ });
+ }, [dismiss, navigateToThread, pendingPersonalThreadUserInfo, threadInfo]);
+
+ return (
+
+ );
+}
+
+const unboundStyles = {
+ messageButtonContainer: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'purpleButton',
+ paddingVertical: 8,
+ marginTop: 16,
+ borderRadius: 8,
+ },
+ messageButtonIcon: {
+ color: 'floatingButtonLabel',
+ paddingRight: 8,
+ },
+ messageButtonText: {
+ color: 'floatingButtonLabel',
+ },
+};
+
+export default UserProfileMessageButton;
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
@@ -4,11 +4,13 @@
import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
+import { useUserProfileThreadInfo } from 'lib/shared/thread-utils.js';
import { stringForUserExplicit } from 'lib/shared/user-utils.js';
import type { UserInfo } from 'lib/types/user-types';
import sleep from 'lib/utils/sleep.js';
import SWMansionIcon from './swmansion-icon.react.js';
+import UserProfileMessageButton from './user-profile-message-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';
@@ -20,6 +22,8 @@
function UserProfile(props: Props): React.Node {
const { userInfo } = props;
+ const userProfileThreadInfo = useUserProfileThreadInfo(userInfo);
+
const usernameText = stringForUserExplicit(userInfo);
const [usernameCopied, setUsernameCopied] = React.useState(false);
@@ -64,6 +68,20 @@
usernameCopied,
]);
+ const messageButton = React.useMemo(() => {
+ if (!userProfileThreadInfo) {
+ return null;
+ }
+
+ const { threadInfo, pendingPersonalThreadUserInfo } = userProfileThreadInfo;
+ return (
+
+ );
+ }, [userProfileThreadInfo]);
+
return (
@@ -74,6 +92,7 @@
{copyUsernameButton}
+ {messageButton}
);
}
@@ -113,6 +132,22 @@
color: 'purpleLink',
fontSize: 12,
},
+ messageButtonContainer: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'purpleButton',
+ paddingVertical: 8,
+ marginTop: 16,
+ borderRadius: 8,
+ },
+ messageButtonIcon: {
+ color: 'floatingButtonLabel',
+ paddingRight: 8,
+ },
+ messageButtonText: {
+ color: 'floatingButtonLabel',
+ },
};
export default UserProfile;