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 @@ -1,9 +1,11 @@ // @flow +import Clipboard from '@react-native-clipboard/clipboard'; import * as React from 'react'; -import { View, Text } from 'react-native'; +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'; @@ -16,8 +18,48 @@ function UserProfile(props: Props): React.Node { const { userInfo } = props; + const [usernameCopied, setUsernameCopied] = React.useState(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 ( + + + Username copied! + + ); + } + + return ( + + + Copy username + + ); + }, [ + onPressCopyUsername, + styles.copyUsernameContainer, + styles.copyUsernameIcon, + styles.copyUsernameText, + usernameCopied, + ]); + return ( @@ -25,14 +67,7 @@ {userInfo.username} - - - Copy username - + {copyUsernameButton}