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

1 files changed, 21 insertions, 13 deletions

diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx
index 58d0857ad..dfd5305f5 100644
--- a/src/view/com/modals/EditProfile.tsx
+++ b/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,18 +224,21 @@ export function Component({
               </LinearGradient>
             </TouchableOpacity>
           )}
-          <TouchableOpacity
-            testID="editProfileCancelBtn"
-            style={s.mt5}
-            onPress={onPressCancel}
-            accessibilityRole="button"
-            accessibilityLabel="Cancel profile editing"
-            accessibilityHint=""
-            onAccessibilityEscape={onPressCancel}>
-            <View style={[styles.btn]}>
-              <Text style={[s.black, s.bold, pal.text]}>Cancel</Text>
-            </View>
-          </TouchableOpacity>
+          {!isProcessing && (
+            <AnimatedTouchableOpacity
+              exiting={!isWeb ? FadeOut : undefined}
+              testID="editProfileCancelBtn"
+              style={s.mt5}
+              onPress={onPressCancel}
+              accessibilityRole="button"
+              accessibilityLabel="Cancel profile editing"
+              accessibilityHint=""
+              onAccessibilityEscape={onPressCancel}>
+              <View style={[styles.btn]}>
+                <Text style={[s.black, s.bold, pal.text]}>Cancel</Text>
+              </View>
+            </AnimatedTouchableOpacity>
+          )}
         </View>
       </ScrollView>
     </KeyboardAvoidingView>