animate header properly

src/view/screens/Search/Search.tsx

@@ -12,7 +12,9 @@ import {
 import {ScrollView as RNGHScrollView} from 'react-native-gesture-handler'
 import RNPickerSelect from 'react-native-picker-select'
 import Animated, {
-  FadingTransition,
+  FadeIn,
+  FadeOut,
+  LayoutAnimationConfig,
   LinearTransition,
 } from 'react-native-reanimated'
 import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
@@ -847,9 +849,11 @@ export function SearchScreen(
           }),
         ]}>
         <Layout.Center style={t.atoms.bg}>
+          <LayoutAnimationConfig skipEntering skipExiting>
             {!gtMobile && !showAutocomplete && (
               <Animated.View
-              layout={native(FadingTransition)}
+                entering={FadeIn.delay(100).duration(200)}
+                exiting={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
@@ -875,10 +879,11 @@ export function SearchScreen(
                 </Layout.Header.Outer>
               </Animated.View>
             )}
+          </LayoutAnimationConfig>
           <Animated.View
             style={[a.px_md, a.pt_md, a.pb_sm, a.gap_sm]}
             layout={native(LinearTransition)}>
-            <View style={[a.flex_row, a.gap_sm]}>
+            <View style={[a.flex_row, a.gap_xs]}>
               <View style={[a.flex_1]}>
                 <SearchInput
                   ref={textInput}
@@ -892,6 +897,7 @@ export function SearchScreen(
                 />
               </View>
               {showAutocomplete && (
+                <Animated.View entering={FadeIn} exiting={FadeOut}>
                   <Button
                     label={_(msg`Cancel search`)}
                     size="large"
@@ -904,6 +910,7 @@ export function SearchScreen(
                       <Trans>Cancel</Trans>
                     </ButtonText>
                   </Button>
+                </Animated.View>
               )}
             </View>