Merge pull request #238 from tbhatia2299/TMA-544-Header-and-Profile-Picture-Glitching

TMA-544-Header-and-Profile-Picture-Glitching

1 files changed, 26 insertions, 21 deletions

diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 26ad93a7..c173c8e3 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -1,38 +1,34 @@
-import React from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
-import moment from 'moment';
 import {StackNavigationProp} from '@react-navigation/stack';
+import moment from 'moment';
+import React, {useMemo} from 'react';
 import {
-  Text,
+  Alert,
+  Image,
   StatusBar,
   StyleSheet,
-  Image,
+  Text,
   TouchableOpacity,
-  Alert,
   View,
 } from 'react-native';
+import ImagePicker from 'react-native-image-crop-picker';
+import Animated from 'react-native-reanimated';
 import {
   Background,
+  BirthDatePicker,
   TaggBigInput,
-  TaggInput,
   TaggDropDown,
-  BirthDatePicker,
+  TaggInput,
 } from '../../components';
-import {OnboardingStackParams} from '../../routes/onboarding';
-import ImagePicker from 'react-native-image-crop-picker';
 import {
-  EDIT_PROFILE_ENDPOINT,
-  websiteRegex,
   bioRegex,
-  genderRegex,
   CLASS_YEAR_LIST,
+  EDIT_PROFILE_ENDPOINT,
+  genderRegex,
   TAGG_PURPLE,
+  websiteRegex,
 } from '../../constants';
-import AsyncStorage from '@react-native-community/async-storage';
-import {BackgroundGradientType} from '../../types';
-import {PickerSelectProps} from 'react-native-picker-select';
-import Animated from 'react-native-reanimated';
-import {SCREEN_WIDTH} from '../../utils';
 import {
   ERROR_DOUBLE_CHECK_CONNECTION,
   ERROR_PROFILE_CREATION_SHORT,
@@ -41,6 +37,9 @@ import {
   ERROR_UPLOAD_LARGE_PROFILE_PIC,
   ERROR_UPLOAD_SMALL_PROFILE_PIC,
 } from '../../constants/strings';
+import {OnboardingStackParams} from '../../routes/onboarding';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
 
 type ProfileOnboardingScreenRouteProp = RouteProp<
   OnboardingStackParams,
@@ -383,6 +382,15 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
     }
   };
 
+  const profilePics = useMemo(() => {
+    return (
+      <View style={styles.profile}>
+        <LargeProfilePic />
+        <SmallProfilePic />
+      </View>
+    );
+  }, [form.largePic, form.smallPic]);
+
   return (
     <Animated.ScrollView bounces={false}>
       <Background
@@ -390,10 +398,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
         gradientType={BackgroundGradientType.Light}
         style={styles.container}>
         <StatusBar barStyle="light-content" />
-        <View style={styles.profile}>
-          <LargeProfilePic />
-          <SmallProfilePic />
-        </View>
+        {profilePics}
         <View style={styles.contentContainer}>
           <TaggInput
             accessibilityHint="Enter a website."