From b5f36dc7a3a7a6f238666a0d66e48bfd94c6c664 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tar=C4=B1k?= <61876765+tarikfp@users.noreply.github.com> Date: Tue, 31 Oct 2023 07:01:25 +0300 Subject: [PATCH] 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 | 34 ++++++++++++++++++----------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 58d0857a..dfd5305f 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 ( - + Edit my profile @@ -219,18 +224,21 @@ export function Component({ )} - - - Cancel - - + {!isProcessing && ( + + + Cancel + + + )}