Add search input to mobile search page(with fixed performance)

patches/react-native-reanimated+3.16.4+004+fix-transform-animation-gitter.patch

@@ -0,0 +1,20 @@
+diff --git a/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp b/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp
+index 673ebd1..08d65fe 100644
+--- a/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp
++++ b/node_modules/react-native-reanimated/Common/cpp/reanimated/NativeModules/NativeReanimatedModule.cpp
+@@ -710,6 +710,15 @@ void NativeReanimatedModule::performOperations() {
+     jsPropsUpdater.call(rt, viewTag, nonAnimatableProps);
+   }
+
++  if (propsRegistry_->shouldReanimatedSkipCommit()) {
++    // It may happen that `performOperations` is called on the UI thread
++    // while React Native tries to commit a new tree on the JS thread.
++    // In this case, we should skip the commit here and let React Native do
++    // it. The commit will include the current values from PropsRegistry which
++    // will be applied in ReanimatedCommitHook.
++    return;
++  }
++
+   bool hasLayoutUpdates = false;
+   for (const auto &[shadowNode, props] : copiedOperationsQueue) {
+     if (isThereAnyLayoutProp(rt, props->asObject(rt))) {

src/components/Search/SearchAutocompleteInput.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable rulesdir/no-acc-spread-in-reduce */
 import type {ForwardedRef, ReactNode, RefObject} from 'react';
-import React, {forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useLayoutEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, TextInputProps, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import {useSharedValue} from 'react-native-reanimated';
+import Animated, {LinearTransition, useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
 import FormHelpMessage from '@components/FormHelpMessage';
 import type {SelectionListHandle} from '@components/SelectionList/types';
 import TextInput from '@components/TextInput';
@@ -12,6 +13,7 @@ import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {parseFSAttributes} from '@libs/Fullstory';
 import runOnLiveMarkdownRuntime from '@libs/runOnLiveMarkdownRuntime';
@@ -52,10 +54,10 @@ type SearchAutocompleteInputProps = {
     onBlur?: () => void;
 
     /** Any additional styles to apply */
-    wrapperStyle?: StyleProp<ViewStyle>;
+    wrapperStyle?: ViewStyle;
 
     /** Any additional styles to apply when input is focused */
-    wrapperFocusedStyle?: StyleProp<ViewStyle>;
+    wrapperFocusedStyle?: ViewStyle;
 
     /** Any additional styles to apply to text input along with FormHelperMessage */
     outerWrapperStyle?: StyleProp<ViewStyle>;
@@ -84,7 +86,7 @@ function SearchAutocompleteInput(
         onBlur,
         caretHidden = false,
         wrapperStyle,
-        wrapperFocusedStyle,
+        wrapperFocusedStyle = {},
         outerWrapperStyle,
         rightComponent,
         isSearchingForReports,
@@ -94,8 +96,8 @@ function SearchAutocompleteInput(
     ref: ForwardedRef<BaseTextInputRef>,
 ) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
-    const [isFocused, setIsFocused] = useState<boolean>(false);
     const {isOffline} = useNetwork();
     const {activeWorkspaceID} = useActiveWorkspace();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
@@ -122,6 +124,12 @@ function SearchAutocompleteInput(
 
     const offlineMessage: string = isOffline && shouldShowOfflineMessage ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '';
 
+    // we are handling focused/unfocused style using shared value instead of using state to avoid re-rendering. Otherwise layout animation in `Animated.View` will lag.
+    const focusedSharedValue = useSharedValue(false);
+    const wrapperAnimatedStyle = useAnimatedStyle(() => {
+        return focusedSharedValue.get() ? wrapperFocusedStyle : wrapperStyle ?? {};
+    });
+
     useEffect(() => {
         runOnLiveMarkdownRuntime(() => {
             'worklet';
@@ -170,7 +178,10 @@ function SearchAutocompleteInput(
 
     return (
         <View style={[outerWrapperStyle]}>
-            <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, isFocused && wrapperFocusedStyle]}>
+            <Animated.View
+                style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, wrapperAnimatedStyle]}
+                layout={LinearTransition}
+            >
                 <View
                     style={styles.flex1}
                     fsClass={CONST.FULL_STORY.UNMASK}
@@ -195,16 +206,17 @@ function SearchAutocompleteInput(
                         maxLength={CONST.SEARCH_QUERY_LIMIT}
                         onSubmitEditing={onSubmit}
                         shouldUseDisabledStyles={false}
-                        textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pr3]}
-                        inputStyle={[inputWidth, styles.pl3, styles.pr3]}
+                        textInputContainerStyles={[styles.borderNone, styles.pb0]}
+                        inputStyle={[inputWidth, styles.pl3, {lineHeight: undefined}]}
+                        placeholderTextColor={theme.textSupporting}
                         onFocus={() => {
-                            setIsFocused(true);
                             autocompleteListRef?.current?.updateExternalTextInputFocus(true);
+                            focusedSharedValue.set(true);
                             onFocus?.();
                         }}
                         onBlur={() => {
-                            setIsFocused(false);
                             autocompleteListRef?.current?.updateExternalTextInputFocus(false);
+                            focusedSharedValue.set(false);
                             onBlur?.();
                         }}
                         isLoading={!!isSearchingForReports}
@@ -216,8 +228,15 @@ function SearchAutocompleteInput(
                         selection={selection}
                     />
                 </View>
-                {!!rightComponent && <View style={styles.pr3}>{rightComponent}</View>}
-            </View>
+                {!!rightComponent && (
+                    <Animated.View
+                        style={styles.pr3}
+                        layout={LinearTransition}
+                    >
+                        {rightComponent}
+                    </Animated.View>
+                )}
+            </Animated.View>
             <FormHelpMessage
                 style={styles.ph3}
                 isError={false}

src/components/Search/SearchAutocompleteList.tsx

@@ -147,9 +147,9 @@ function SearchAutocompleteList(
     const statusAutocompleteList = Object.values({...CONST.SEARCH.STATUS.TRIP, ...CONST.SEARCH.STATUS.INVOICE, ...CONST.SEARCH.STATUS.CHAT, ...CONST.SEARCH.STATUS.TRIP});
     const expenseTypes = Object.values(CONST.SEARCH.TRANSACTION_TYPE);
 
-    const [userCardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
-    const [workspaceCardFeeds = {}] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
-    const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds, userCardList), [userCardList, workspaceCardFeeds]);
+    const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST);
+    const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
+    const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]);
     const cardAutocompleteList = Object.values(allCards);
 
     const participantsAutocompleteList = useMemo(() => {