fix typescript errors

src/components/Search/SearchAutocompleteInput.tsx

@@ -123,24 +123,21 @@ function SearchAutocompleteInput(
     const emailListSharedValue = useSharedValue(emailList);
 
     const offlineMessage: string = isOffline && shouldShowOfflineMessage ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '';
-    const focusedSharedValue = useSharedValue(false);
 
+    // we are handling focused/unfocused style on shared value instead of using state to avoid re-rendering. Otherwise layput animation in Animated.View will lag.
+    const focusedSharedValue = useSharedValue(false);
     const unfocusedStyle = useMemo(() => {
-        return Object.entries(wrapperFocusedStyle ?? {}).reduce<ViewStyle>((acc, styleValue) => {
-            const key = styleValue[0] as keyof ViewStyle;
-            if (!wrapperStyle || !wrapperStyle?.[key]) {
-                acc[key] = undefined;
-                return acc;
+        const style: Partial<ViewStyle> = {};
+        Object.keys(wrapperFocusedStyle ?? {}).forEach((styleKey) => {
+            if (!wrapperStyle || !wrapperStyle?.[styleKey as keyof ViewStyle]) {
+                style[styleKey as keyof ViewStyle] = undefined;
+                return;
             }
-            const acc2 = {
-                ...acc,
-                [key]: wrapperStyle[key],
-            };
-            return acc2;
-        }, {});
+            style[styleKey as keyof ViewStyle] = wrapperStyle[styleKey as keyof ViewStyle] as undefined;
+        });
+        return style;
     }, [wrapperFocusedStyle, wrapperStyle]);
-
-    const focusedAnimatedStyle = useAnimatedStyle(() => {
+    const wrapperAnimatedStyle = useAnimatedStyle(() => {
         return focusedSharedValue.get() ? wrapperFocusedStyle : unfocusedStyle;
     });
 
@@ -193,7 +190,7 @@ function SearchAutocompleteInput(
     return (
         <View style={[outerWrapperStyle]}>
             <Animated.View
-                style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, focusedAnimatedStyle]}
+                style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, wrapperAnimatedStyle]}
                 layout={LinearTransition}
             >
                 <View

src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

@@ -3,7 +3,7 @@ import isEqual from 'lodash/isEqual';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Animated, {runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';