expandable search box

src/components/HorizontalTabView/index.tsx

@@ -25,6 +25,7 @@ type Props = {
   maxTabHeight?: number;
   tabBarStyle?: StyleProp<ViewStyle>;
   sceneStyles?: StyleProp<ViewStyle>;
+  onTabPress?: (i: number) => void;
 };
 
 export const HorizontalTabView: React.FC<Props> = ({
@@ -37,14 +38,18 @@ export const HorizontalTabView: React.FC<Props> = ({
   withNotification = 0,
   maxTabHeight,
   tabBarStyle = {},
-  sceneStyles = {}
+  sceneStyles = {},
+  onTabPress = (i: number) => {}
 }) => {
   const TabItemComponent = ({ name, index: tabIndex, onPress, label, style, onLayout }: any) => {
     const fullRoute = routes.find((r) => r.key === name);
 
     return (
       <Pressable
-        onPress={() => onPress(name)}
+        onPress={() => {
+          onPress(name);
+          onTabPress(tabIndex);
+        }}
         onLayout={onLayout}
         style={[styles.tabLabelWrapper, style, withNotification > 0 ? { marginTop: 3 } : {}]}
       >

src/screens/InAppScreens/MessagesScreen/index.tsx

@@ -8,7 +8,8 @@ import {
   TouchableHighlight,
   AppState,
   AppStateStatus,
-  Keyboard
+  Keyboard,
+  Dimensions
 } from 'react-native';
 import { AvatarWithInitials, HorizontalTabView, Input, WarningModal } from 'src/components';
 import { NAVIGATION_PAGES } from 'src/types';
@@ -110,6 +111,7 @@ const MessagesScreen = () => {
   const navigation = useNavigation<any>();
   const token = storage.get('token', StoreType.STRING) as string;
   const [index, setIndex] = useState(0);
+  const [contentIndex, setContentIndex] = useState(0);
   const [cacheKey, setCacheKey] = useState(Date.now());
   const updateUnreadMessagesCount = useMessagesStore((state) => state.updateUnreadMessagesCount);
   const { isSubscribed } = usePushNotification();
@@ -605,6 +607,72 @@ const MessagesScreen = () => {
     );
   };
 
+  const SEARCH_HEIGHT = 38;
+  const TABS_HEIGHT = 50;
+  const TOP_HEIGHT = SEARCH_HEIGHT + TABS_HEIGHT;
+
+  const SearchHeader = useMemo(
+    () => (
+      <View style={{ backgroundColor: Colors.WHITE, height: TOP_HEIGHT, gap: 12 }}>
+        <View
+          style={{
+            height: SEARCH_HEIGHT,
+            justifyContent: 'center',
+            paddingHorizontal: '4%'
+          }}
+        >
+          <Input
+            inputMode="search"
+            placeholder="Search"
+            value={search}
+            onChange={setSearch}
+            icon={<SearchIcon fill="#C8C8C8" width={14} height={14} />}
+            height={38}
+          />
+        </View>
+
+        <View style={{ backgroundColor: Colors.RED }}>
+          <HorizontalTabView
+            index={index}
+            setIndex={() => {}}
+            onTabPress={(i: number) => {
+              setIndex(i);
+              setContentIndex(i);
+            }}
+            routes={routes}
+            renderScene={({ route }: { route: any }) => <View style={{ height: 0 }} />}
+          />
+        </View>
+      </View>
+    ),
+    [search, index]
+  );
+
+  const activeRouteKey = routes[contentIndex].key;
+
+  const listData = useMemo(() => {
+    switch (activeRouteKey) {
+      case 'blocked':
+        return blocked;
+
+      default:
+        return searchedChats;
+    }
+  }, [activeRouteKey, blocked, searchedChats]);
+
+  const renderItem = useCallback(
+    ({ item }: any) => {
+      if (activeRouteKey === 'blocked') {
+        return renderBlockedItem({ item });
+      }
+
+      return renderChatItem({ item });
+    },
+    [activeRouteKey, typingUsers, debouncedSearch]
+  );
+
+  const extraData = useMemo(() => ({ typingUsers }), [typingUsers]);
+
   return (
     <View style={{ paddingTop: insets.top, flex: 1, marginLeft: 0, marginRight: 0, gap: 12 }}>
       <View style={styles.header}>
@@ -644,52 +712,26 @@ const MessagesScreen = () => {
           </TouchableOpacity>
         </View>
       )}
-
-      <View style={[{ paddingHorizontal: '4%' }]}>
-        <Input
-          inputMode={'search'}
-          placeholder={'Search'}
-          onChange={(text) => searchFilter(text)}
-          value={search}
-          icon={<SearchIcon fill={'#C8C8C8'} width={14} height={14} />}
-          height={38}
-        />
-      </View>
-
-      <HorizontalTabView
-        index={index}
-        setIndex={setIndex}
-        routes={routes}
-        sceneStyles={{ paddingHorizontal: 0 }}
-        maxTabHeight={50}
-        renderScene={({ route }) => {
-          const data = route.key === routes[index].key ? searchedChats : [];
-
-          return route.key === 'blocked' ? (
-            <FlashList
-              viewabilityConfig={{
-                waitForInteraction: true,
-                itemVisiblePercentThreshold: 50,
-                minimumViewTime: 1000
-              }}
-              data={blocked}
-              renderItem={renderBlockedItem}
-              keyExtractor={(item, i) => `${item.userId}-${i}`}
-            />
-          ) : (
-            <FlashList
-              viewabilityConfig={{
-                waitForInteraction: true,
-                itemVisiblePercentThreshold: 50,
-                minimumViewTime: 1000
-              }}
-              data={data}
-              renderItem={renderChatItem}
-              keyExtractor={(item, i) => `${item.chat.chatUid}-${item.chat.groupChatToken}-${i}`}
-              extraData={typingUsers}
-            />
-          );
+      <FlashList
+        ListHeaderComponent={SearchHeader}
+        contentContainerStyle={{
+          minHeight: Dimensions.get('window').height
+        }}
+        contentOffset={Platform.OS === 'ios' ? { x: 0, y: TOP_HEIGHT } : undefined}
+        viewabilityConfig={{
+          waitForInteraction: true,
+          itemVisiblePercentThreshold: 50,
+          minimumViewTime: 1000
+        }}
+        data={listData}
+        renderItem={renderItem}
+        keyExtractor={(item: any, i) => {
+          if (activeRouteKey === 'blocked') {
+            return `${item.userId}-${i}`;
+          }
+          return `${item.chat.chatUid}-${item.chat.groupChatToken}-${i}`;
         }}
+        extraData={extraData}
       />
 
       <SearchModal />