animate cancel button in

src/view/screens/Search/Search.tsx

@@ -1,4 +1,4 @@
-import React, {useLayoutEffect} from 'react'
+import React, {useEffect, useLayoutEffect} from 'react'
 import {
   ActivityIndicator,
   Image,
@@ -16,6 +16,9 @@ import Animated, {
   FadeOut,
   LayoutAnimationConfig,
   LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
 } from 'react-native-reanimated'
 import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
 import {
@@ -833,6 +836,26 @@ export function SearchScreen(
     }
   }, [setShowAutocomplete])
 
+  const cancelWidth = useSharedValue(70)
+  const showCancelBtnAnimation = useSharedValue(0)
+
+  useEffect(() => {
+    if (showAutocomplete) {
+      showCancelBtnAnimation.set(withTiming(1))
+    } else {
+      showCancelBtnAnimation.set(withTiming(0))
+    }
+  }, [showAutocomplete, showCancelBtnAnimation])
+
+  const animatedInputContainerStyle = useAnimatedStyle(() => ({
+    marginRight: showCancelBtnAnimation.get() * cancelWidth.get(),
+  }))
+
+  const animatedCancelBtnStyle = useAnimatedStyle(() => ({
+    opacity: showCancelBtnAnimation.get(),
+    right: cancelWidth.get() * -1,
+  }))
+
   return (
     <Layout.Screen testID="searchScreen">
       <View
@@ -852,8 +875,8 @@ export function SearchScreen(
           <LayoutAnimationConfig skipEntering skipExiting>
             {!gtMobile && !showAutocomplete && (
               <Animated.View
-                entering={FadeIn.delay(100).duration(200)}
+                entering={native(FadeIn.delay(100).duration(200))}
-                exiting={FadeOut.duration(200)}
+                exiting={native(FadeOut.duration(200))}
                 // HACK: shift up search input. we can't remove the top padding
                 // on the search input because it messes up the layout animation
                 // if we add it only when the header is hidden
@@ -881,10 +904,11 @@ export function SearchScreen(
             )}
           </LayoutAnimationConfig>
           <Animated.View
-            style={[a.px_md, a.pt_sm, a.pb_sm, a.gap_sm]}
+            style={[a.px_md, a.pt_sm, a.pb_sm, a.overflow_hidden]}
             layout={native(LinearTransition)}>
-            <View style={[a.flex_row, a.gap_xs]}>
+            <Animated.View
-              <View style={[a.flex_1]}>
+              style={[a.gap_sm, a.relative, animatedInputContainerStyle]}>
+              <View style={[a.w_full]}>
                 <SearchInput
                   ref={textInput}
                   value={searchText}
@@ -896,8 +920,16 @@ export function SearchScreen(
                   hitSlop={{...HITSLOP_20, top: 0}}
                 />
               </View>
-              {showAutocomplete && (
+              <Animated.View
-                <Animated.View entering={FadeIn} exiting={FadeOut}>
+                style={[
+                  a.absolute,
+                  {top: 0, bottom: 0},
+                  a.pl_xs,
+                  animatedCancelBtnStyle,
+                  !showAutocomplete && a.pointer_events_none,
+                ]}
+                onLayout={evt => cancelWidth.set(evt.nativeEvent.layout.width)}
+                aria-hidden={!showAutocomplete}>
                 <Button
                   label={_(msg`Cancel search`)}
                   size="large"
@@ -911,8 +943,6 @@ export function SearchScreen(
                   </ButtonText>
                 </Button>
               </Animated.View>
-              )}
-            </View>
 
               {showFilters && gtMobile && (
                 <View
@@ -931,6 +961,7 @@ export function SearchScreen(
                 </View>
               )}
             </Animated.View>
+          </Animated.View>
         </Layout.Center>
       </View>