animate search

src/view/screens/Search/Search.tsx

@@ -12,6 +12,14 @@ import {
 } from 'react-native'
 import {ScrollView as RNGHScrollView} from 'react-native-gesture-handler'
 import RNPickerSelect from 'react-native-picker-select'
+import Animated, {
+  LayoutAnimationConfig,
+  LinearTransition,
+  SlideInLeft,
+  SlideInRight,
+  SlideOutLeft,
+  SlideOutRight,
+} from 'react-native-reanimated'
 import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
 import {
   FontAwesomeIcon,
@@ -63,6 +71,7 @@ import {atoms as a, useBreakpoints, useTheme as useThemeNew, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {SearchInput} from '#/components/forms/SearchInput'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import * as Layout from '#/components/Layout'
@@ -844,7 +853,10 @@ export function SearchScreen(
     [selectedProfiles],
   )
 
+  const {state: isFocused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+
   const onSearchInputFocus = React.useCallback(() => {
+    onFocus()
     if (isWeb) {
       // Prevent a jump on iPad by ensuring that
       // the initial focused render has no result list.
@@ -854,7 +866,7 @@ export function SearchScreen(
     } else {
       setShowAutocomplete(true)
     }
-  }, [setShowAutocomplete])
+  }, [setShowAutocomplete, onFocus])
 
   return (
     <Layout.Screen testID="searchScreen">
@@ -872,32 +884,42 @@ export function SearchScreen(
           }),
         ]}
         sideBorders={gtMobile}>
+        <LayoutAnimationConfig skipEntering skipExiting>
           <View style={[a.flex_row, a.gap_sm]}>
-          {!gtMobile && (
+            {!gtMobile && !isFocused && (
+              <Animated.View
+                layout={LinearTransition}
+                entering={SlideInLeft}
+                exiting={SlideOutLeft}>
                 <Button
                   testID="viewHeaderBackOrMenuBtn"
                   onPress={onPressMenu}
                   hitSlop={HITSLOP_10}
                   label={_(msg`Menu`)}
-              accessibilityHint={_(msg`Access navigation links and settings`)}
+                  accessibilityHint={_(
+                    msg`Access navigation links and settings`,
+                  )}
                   size="large"
                   variant="solid"
                   color="secondary"
                   shape="square">
                   <ButtonIcon icon={Menu} size="lg" />
                 </Button>
+              </Animated.View>
             )}
-          <View style={[a.flex_1]}>
+            <Animated.View style={[a.flex_1]} layout={LinearTransition}>
               <SearchInput
                 ref={textInput}
                 value={searchText}
                 onFocus={onSearchInputFocus}
+                onBlur={onBlur}
                 onChangeText={onChangeText}
                 onClearText={onPressClearQuery}
                 onSubmitEditing={onSubmit}
               />
-          </View>
+            </Animated.View>
             {showAutocomplete && (
+              <Animated.View entering={SlideInRight} exiting={SlideOutRight}>
                 <Button
                   label={_(msg`Cancel search`)}
                   size="large"
@@ -910,8 +932,10 @@ export function SearchScreen(
                     <Trans>Cancel</Trans>
                   </ButtonText>
                 </Button>
+              </Animated.View>
             )}
           </View>
+        </LayoutAnimationConfig>
 
         {showFilters && (
           <View