zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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
zio/stable
Tarık 2023-10-31 07:01:25 +03:00 committed by GitHub
parent b2d4771b5f
commit b5f36dc7a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/view/com/modals/EditProfile.tsx
View File

@ -25,6 +25,11 @@ import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext' import {useTheme} from 'lib/ThemeContext'
import {useAnalytics} from 'lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics'
import {cleanError, isNetworkError} from 'lib/strings/errors' 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'] export const snapPoints = ['fullscreen']
@ -144,7 +149,7 @@ export function Component({
]) ])
return ( return (
<KeyboardAvoidingView behavior="height"> <KeyboardAvoidingView style={s.flex1} behavior="height">
<ScrollView style={[pal.view]} testID="editProfileModal"> <ScrollView style={[pal.view]} testID="editProfileModal">
<Text style={[styles.title, pal.text]}>Edit my profile</Text> <Text style={[styles.title, pal.text]}>Edit my profile</Text>
<View style={styles.photos}> <View style={styles.photos}>
@ -219,18 +224,21 @@ export function Component({
</LinearGradient> </LinearGradient>
</TouchableOpacity> </TouchableOpacity>
)} )}
<TouchableOpacity {!isProcessing && (
testID="editProfileCancelBtn" <AnimatedTouchableOpacity
style={s.mt5} exiting={!isWeb ? FadeOut : undefined}
onPress={onPressCancel} testID="editProfileCancelBtn"
accessibilityRole="button" style={s.mt5}
accessibilityLabel="Cancel profile editing" onPress={onPressCancel}
accessibilityHint="" accessibilityRole="button"
onAccessibilityEscape={onPressCancel}> accessibilityLabel="Cancel profile editing"
<View style={[styles.btn]}> accessibilityHint=""
<Text style={[s.black, s.bold, pal.text]}>Cancel</Text> onAccessibilityEscape={onPressCancel}>
</View> <View style={[styles.btn]}>
</TouchableOpacity> <Text style={[s.black, s.bold, pal.text]}>Cancel</Text>
</View>
</AnimatedTouchableOpacity>
)}
</View> </View>
</ScrollView> </ScrollView>
</KeyboardAvoidingView> </KeyboardAvoidingView>