animate picture selection/removal

src/screens/Onboarding/StepProfile/SelectImageButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, StyleSheet} from 'react-native'
+import {LayoutAnimation, Pressable, StyleSheet} from 'react-native'
 import {Camera_Stroke2_Corner0_Rounded as Camera} from '#/components/icons/Camera'
 import {useSetAvatar} from '#/screens/Onboarding/StepProfile/index'
 import {useTheme} from '#/alf'
@@ -22,33 +22,25 @@ export function SelectImageButton() {
     const items = await openPicker({
       aspect: [1, 1],
     })
-    const item = items[0]
+    let image = items[0]
-    if (!item) return
+    if (!image) return
 
     // TODO we need an alf modal for the cropper
-    if (isWeb) {
+    if (!isWeb) {
-      const compressedImage = await compressIfNeeded(item)
+      image = await openCropper({
-
+        mediaType: 'photo',
-      setAvatar(prev => ({
+        cropperCircleOverlay: true,
-        ...prev,
+        height: image.height,
-        image: compressedImage,
+        width: image.width,
-      }))
+        path: image.path,
-      return
+      })
     }
+    image = await compressIfNeeded(image)
 
-    const croppedImage = await openCropper({
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-      mediaType: 'photo',
-      cropperCircleOverlay: true,
-      height: item.height,
-      width: item.width,
-      path: item.path,
-    })
-
-    const compressedImage = await compressIfNeeded(croppedImage)
-
     setAvatar(prev => ({
       ...prev,
-      image: compressedImage,
+      image,
     }))
   }, [requestPhotoAccessIfNeeded, setAvatar])
 

src/screens/Onboarding/StepProfile/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {
   FlatList,
   FlatListProps,
+  LayoutAnimation,
   ListRenderItemInfo,
   Pressable,
   StyleSheet,
@@ -110,8 +111,12 @@ export function StepProfile() {
               <View style={[a.align_center, a.pb_5xl]}>
                 <AvatarCircle />
               </View>
-              <Items type="emojis" />
+              {!avatar.image && (
-              <Items type="colors" />
+                <>
+                  <Items type="emojis" />
+                  <Items type="colors" />
+                </>
+              )}
             </View>
 
             <OnboardingControls.Portal>
@@ -143,6 +148,7 @@ function AvatarCircle() {
   const Icon = avatar.placeholder.component
 
   const onPressRemoveAvatar = React.useCallback(() => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
     setAvatar(prev => ({
       ...prev,
       image: undefined,