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,7 +1,8 @@ // @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'; @@ -16,8 +17,47 @@ function UserProfile(props: Props): React.Node { const { userInfo } = props; + const [usernameCopied, setUsernameCopied] = React.useState(false); + const styles = useStyles(unboundStyles); + const onPressCopyUsername = React.useCallback(() => { + Clipboard.setString(userInfo.username); + setUsernameCopied(true); + setTimeout(() => setUsernameCopied(false), 3000); + }, [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 +65,7 @@ {userInfo.username} - - - Copy username - + {copyUsernameButton}