jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
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
+21
-13
+21
-13
src/view/com/modals/EditProfile.tsx
+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>