diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/onboarding/TaggInput.tsx | 5 | ||||
| -rw-r--r-- | src/screens/profile/EditProfile.tsx | 98 |
2 files changed, 60 insertions, 43 deletions
diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx index fe11d4f0..12d99325 100644 --- a/src/components/onboarding/TaggInput.tsx +++ b/src/components/onboarding/TaggInput.tsx @@ -6,7 +6,6 @@ interface TaggInputProps extends TextInputProps { valid?: boolean; invalidWarning?: string; attemptedSubmit?: boolean; - width?: number | string; } /** * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop. @@ -15,7 +14,7 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => { return ( <View style={styles.container}> <TextInput - style={[{width: props.width}, styles.input]} + style={styles.input} placeholderTextColor="#ddd" clearButtonMode="while-editing" ref={ref} @@ -35,11 +34,11 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => { const styles = StyleSheet.create({ container: { - width: '100%', alignItems: 'center', marginVertical: 11, }, input: { + width: '100%', minWidth: '60%', height: 40, fontSize: 16, diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx index 97c58177..22c83985 100644 --- a/src/screens/profile/EditProfile.tsx +++ b/src/screens/profile/EditProfile.tsx @@ -23,6 +23,7 @@ import { TaggDropDown, BirthDatePicker, TabsGradient, + SocialIcon, } from '../../components'; import ImagePicker from 'react-native-image-crop-picker'; import { @@ -70,7 +71,6 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => { if (needsUpdate) { dispatch(loadUserData({userId, username})); } - }, [dispatch, needsUpdate, userId, username]); const [isCustomGender, setIsCustomGender] = React.useState<boolean>( @@ -428,7 +428,6 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => { invalidWarning={ 'Website must be a valid link to your website' } - width={280} value={form.website} /> <TaggBigInput @@ -492,46 +491,54 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => { /> )} {snapchat !== '' && ( - <TaggInput - accessibilityHint="Snapchat Username" - accessibilityLabel="Snapchat Username Input Field." - attemptedSubmit={form.attemptedSubmit} - autoCapitalize="none" - autoCompleteType="off" - autoCorrect={false} - blurOnSubmit={false} - enablesReturnKeyAutomatically={true} - invalidWarning={'Please enter something!'} - onChangeText={handleSnapchatUpdate} - onSubmitEditing={Keyboard.dismiss} - placeholder="Snapchat Username" - returnKeyType="done" - textContentType="none" - valid={form.isValidSnapchat} - value={form.snapchat && form.snapchat} - width={280} - /> + <View style={styles.row}> + <SocialIcon social={'Snapchat'} style={styles.icon} /> + <View style={styles.taggInput}> + <TaggInput + accessibilityHint="Snapchat Username" + accessibilityLabel="Snapchat Username Input Field." + attemptedSubmit={form.attemptedSubmit} + autoCapitalize="none" + autoCompleteType="off" + autoCorrect={false} + blurOnSubmit={false} + enablesReturnKeyAutomatically={true} + invalidWarning={'Please enter something!'} + onChangeText={handleSnapchatUpdate} + onSubmitEditing={Keyboard.dismiss} + placeholder="Username" + returnKeyType="done" + textContentType="none" + valid={form.isValidSnapchat} + value={form.snapchat && form.snapchat} + /> + </View> + </View> )} {tiktok !== '' && ( - <TaggInput - accessibilityHint="TikTok Username" - accessibilityLabel="TikTok Username Input Field." - attemptedSubmit={form.attemptedSubmit} - autoCapitalize="none" - autoCompleteType="off" - autoCorrect={false} - blurOnSubmit={false} - enablesReturnKeyAutomatically={true} - invalidWarning={'Please enter something!'} - onChangeText={handleTikTokUpdate} - onSubmitEditing={Keyboard.dismiss} - placeholder="TikTok Username" - returnKeyType="done" - textContentType="none" - valid={form.isValidTiktok} - value={form.tiktok} - width={280} - /> + <View style={styles.row}> + <SocialIcon social={'TikTok'} style={styles.icon} /> + <View style={styles.taggInput}> + <TaggInput + accessibilityHint="TikTok Username" + accessibilityLabel="TikTok Username Input Field." + attemptedSubmit={form.attemptedSubmit} + autoCapitalize="none" + autoCompleteType="off" + autoCorrect={false} + blurOnSubmit={false} + enablesReturnKeyAutomatically={true} + invalidWarning={'Please enter something!'} + onChangeText={handleTikTokUpdate} + onSubmitEditing={Keyboard.dismiss} + placeholder="Username" + returnKeyType="done" + textContentType="none" + valid={form.isValidTiktok} + value={form.tiktok} + /> + </View> + </View> )} </View> </View> @@ -625,6 +632,17 @@ const styles = StyleSheet.create({ borderRadius: 20, paddingLeft: 13, }, + row: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + icon: { + aspectRatio: 1, + flex: 1, + }, + taggInput: {flex: 6.5, marginLeft: '3%'}, }); export default EditProfile; |