Bluesky app fork with some witchin' additions 💫

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

authored by

Tarık and committed by
GitHub
b5f36dc7 b2d4771b

+21 -13
+21 -13
src/view/com/modals/EditProfile.tsx
··· 25 25 import {useTheme} from 'lib/ThemeContext' 26 26 import {useAnalytics} from 'lib/analytics/analytics' 27 27 import {cleanError, isNetworkError} from 'lib/strings/errors' 28 + import Animated, {FadeOut} from 'react-native-reanimated' 29 + import {isWeb} from 'platform/detection' 30 + 31 + const AnimatedTouchableOpacity = 32 + Animated.createAnimatedComponent(TouchableOpacity) 28 33 29 34 export const snapPoints = ['fullscreen'] 30 35 ··· 144 149 ]) 145 150 146 151 return ( 147 - <KeyboardAvoidingView behavior="height"> 152 + <KeyboardAvoidingView style={s.flex1} behavior="height"> 148 153 <ScrollView style={[pal.view]} testID="editProfileModal"> 149 154 <Text style={[styles.title, pal.text]}>Edit my profile</Text> 150 155 <View style={styles.photos}> ··· 219 224 </LinearGradient> 220 225 </TouchableOpacity> 221 226 )} 222 - <TouchableOpacity 223 - testID="editProfileCancelBtn" 224 - style={s.mt5} 225 - onPress={onPressCancel} 226 - accessibilityRole="button" 227 - accessibilityLabel="Cancel profile editing" 228 - accessibilityHint="" 229 - onAccessibilityEscape={onPressCancel}> 230 - <View style={[styles.btn]}> 231 - <Text style={[s.black, s.bold, pal.text]}>Cancel</Text> 232 - </View> 233 - </TouchableOpacity> 227 + {!isProcessing && ( 228 + <AnimatedTouchableOpacity 229 + exiting={!isWeb ? FadeOut : undefined} 230 + testID="editProfileCancelBtn" 231 + style={s.mt5} 232 + onPress={onPressCancel} 233 + accessibilityRole="button" 234 + accessibilityLabel="Cancel profile editing" 235 + accessibilityHint="" 236 + onAccessibilityEscape={onPressCancel}> 237 + <View style={[styles.btn]}> 238 + <Text style={[s.black, s.bold, pal.text]}>Cancel</Text> 239 + </View> 240 + </AnimatedTouchableOpacity> 241 + )} 234 242 </View> 235 243 </ScrollView> 236 244 </KeyboardAvoidingView>