migrated search result screen tab view

src/screens/communities/view/communitiesScreen.tsx

@@ -20,7 +20,6 @@ import { TabView } from 'react-native-tab-view';
 
 const CommunitiesScreen = () => {
   const intl = useIntl();
-  const tabViewRef = useRef(null);
 
 
   const [index, setIndex] = React.useState(0);

src/screens/searchResult/screen/searchResultScreen.tsx

@@ -15,6 +15,7 @@ import PeopleResults from './tabs/people/view/peopleResults';
 // Styles
 import styles from './searchResultStyles';
 import globalStyles from '../../../globalStyles';
+import { TabView } from 'react-native-tab-view';
 
 const SearchResultScreen = ({ navigation }) => {
   const intl = useIntl();
@@ -23,6 +24,7 @@ const SearchResultScreen = ({ navigation }) => {
   const [searchInputValue, setSearchInputValue] = useState('');
   const [searchValue, setSearchValue] = useState('');
 
+
   const _handleChangeText = (value) => {
     setSearchInputValue(value);
   };
@@ -56,6 +58,34 @@ const SearchResultScreen = ({ navigation }) => {
 
 const SearchResultsTabView = memo(({ searchValue }: { searchValue: string }) => {
   const intl = useIntl();
+  const [index, setIndex] = React.useState(0);
+  const [routes] = React.useState([
+    {
+      key: 'posts',
+      title: intl.formatMessage({
+        id: 'search_result.best.title',
+      })
+    },
+    {
+      key: 'people',
+      title: intl.formatMessage({
+        id: 'search_result.people.title',
+      })
+    },
+    {
+      key: 'topics',
+      title: intl.formatMessage({
+        id: 'search_result.topics.title',
+      })
+    },
+    {
+      key: 'communities',
+      title: intl.formatMessage({
+        id: 'search_result.communities.title',
+      })
+    },
+
+  ]);
 
   const clippedSearchValue =
     searchValue.startsWith('#') || searchValue.startsWith('@')
@@ -63,47 +93,47 @@ const SearchResultsTabView = memo(({ searchValue }: { searchValue: string }) =>
       : searchValue.trim().toLowerCase();
   const isUsername = !!(searchValue.startsWith('#') || searchValue.startsWith('@'));
 
-  const _renderTabbar = () => (
-    <TabBar
-      style={styles.tabbar}
-      tabUnderlineDefaultWidth={80}
-      tabUnderlineScaleX={2}
-      tabBarPosition="overlayTop"
-      textStyle={styles.tabBarText}
-    />
-  );
+
+  const renderScene = ({ route }) => {
+    switch (route.key) {
+      case 'posts':
+        return (
+          <View style={styles.tabbarItem}>
+            <PostsResults searchValue={clippedSearchValue} />
+          </View>
+        );
+      case 'people':
+        return (
+          <View style={styles.tabbarItem}>
+            <PeopleResults searchValue={clippedSearchValue} isUsername={isUsername} />
+          </View>
+        );
+      case 'topics':
+        return (
+          <View style={styles.tabbarItem}>
+            <TopicsResults searchValue={clippedSearchValue} />
+          </View>
+        );
+      case 'communities':
+        return (
+          <View style={styles.tabbarItem}>
+            <Communities searchValue={clippedSearchValue} />
+          </View>
+        );
+
+    }
+
+  }
 
   return (
-    <ScrollableTabView
+    <TabView
       style={globalStyles.tabView}
-      renderTabBar={_renderTabbar}
-      prerenderingSiblingsNumber={Infinity}
-    >
-      <View
-        tabLabel={intl.formatMessage({ id: 'search_result.best.title' })}
-        style={styles.tabbarItem}
-      >
-        <PostsResults searchValue={clippedSearchValue} />
-      </View>
-      <View
-        tabLabel={intl.formatMessage({ id: 'search_result.people.title' })}
-        style={styles.tabbarItem}
-      >
-        <PeopleResults searchValue={clippedSearchValue} isUsername={isUsername} />
-      </View>
-      <View
-        tabLabel={intl.formatMessage({ id: 'search_result.topics.title' })}
-        style={styles.tabbarItem}
-      >
-        <TopicsResults searchValue={clippedSearchValue} />
-      </View>
-      <View
-        tabLabel={intl.formatMessage({ id: 'search_result.communities.title' })}
-        style={styles.tabbarItem}
-      >
-        <Communities searchValue={clippedSearchValue} />
-      </View>
-    </ScrollableTabView>
+      renderTabBar={TabBar}
+      renderScene={renderScene}
+      navigationState={{ index, routes }}
+      onIndexChange={setIndex}
+    />
+
   );
 });