UI/UX improvements in Edit profile screen (#1767)

* Remove cropped area in Edit profile screen iOS

* Hide cancel button when saving changes in EditProfile

* Disable fadeOut animation cancel button for web in EditProfile screen

Since react-native-reanimated is not configured for web support (https://docs.swmansion.com/react-native-reanimated/docs/2.x/fundamentals/web-support/), we are enabling fade out animation for iOS and android solely

src/view/com/modals/EditProfile.tsx

@@ -25,6 +25,11 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {cleanError, isNetworkError} from 'lib/strings/errors'
+import Animated, {FadeOut} from 'react-native-reanimated'
+import {isWeb} from 'platform/detection'
+
+const AnimatedTouchableOpacity =
+  Animated.createAnimatedComponent(TouchableOpacity)
 
 export const snapPoints = ['fullscreen']
 
@@ -144,7 +149,7 @@ export function Component({
   ])
 
   return (
-    <KeyboardAvoidingView behavior="height">
+    <KeyboardAvoidingView style={s.flex1} behavior="height">
       <ScrollView style={[pal.view]} testID="editProfileModal">
         <Text style={[styles.title, pal.text]}>Edit my profile</Text>
         <View style={styles.photos}>
@@ -219,7 +224,9 @@ export function Component({
               </LinearGradient>
             </TouchableOpacity>
           )}
-          <TouchableOpacity
+          {!isProcessing && (
+            <AnimatedTouchableOpacity
+              exiting={!isWeb ? FadeOut : undefined}
               testID="editProfileCancelBtn"
               style={s.mt5}
               onPress={onPressCancel}
@@ -230,7 +237,8 @@ export function Component({
               <View style={[styles.btn]}>
                 <Text style={[s.black, s.bold, pal.text]}>Cancel</Text>
               </View>
-          </TouchableOpacity>
+            </AnimatedTouchableOpacity>
+          )}
         </View>
       </ScrollView>
     </KeyboardAvoidingView>