Add a home and federated tab to discover.js

package-lock.json

@@ -6137,6 +6137,11 @@
       "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
       "integrity": "sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ=="
     },
+    "react-native-pager-view": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-5.1.2.tgz",
+      "integrity": "sha512-UvPvjtuIkiI9Ti8NoMH+fiFj0ehfFv4WkNUGM46dOJfOxmE6Z/hoyJjymOHU//iLkQSMO+YNherZs0HcijdA2A=="
+    },
     "react-native-popup-menu": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/react-native-popup-menu/-/react-native-popup-menu-0.15.10.tgz",
@@ -6168,6 +6173,11 @@
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.9.0.tgz",
       "integrity": "sha512-5MaiUD6HA3nzY3JbVI8l3V7pKedtxQF3d8qktTVI0WmWXTI4QzqOU8r8fPVvfKo3MhOXwhWBjr+kQ7DZaIQQeg=="
     },
+    "react-native-tab-view": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz",
+      "integrity": "sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg=="
+    },
     "react-native-web": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.11.7.tgz",

package.json

@@ -19,10 +19,12 @@
     "react-dom": "~16.11.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-gesture-handler": "~1.6.0",
+    "react-native-pager-view": "^5.1.2",
     "react-native-popup-menu": "^0.15.10",
     "react-native-reanimated": "~1.9.0",
     "react-native-safe-area-context": "~3.0.7",
     "react-native-screens": "~2.9.0",
+    "react-native-tab-view": "^2.16.0",
     "react-native-web": "~0.11.7",
     "react-navigation": "^4.4.0",
     "react-navigation-stack": "^2.8.2"

src/components/pages/discover.js

@@ -1,11 +1,61 @@
 import React, { useEffect, useState } from "react";
 import { View, TextInput, Text, Dimensions } from "react-native";
 
+import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+
+import { Ionicons } from "@expo/vector-icons";
+
 import PagedGridJsx from "src/components/posts/paged-grid";
 import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
 const DiscoverJsx = (props) => {
+    const [index, setIndex] = useState(0);
+    const [routes] = useState([
+        {
+            key: "home",
+            icon: "md-home",
+        },
+        {
+            key: "federated",
+            icon: "md-planet",
+        },
+    ]);
+
+    const HomeTimeline = () => (
+        <PagedGridJsx
+            navigation = { props.navigation }
+            originTab = "Discover" />
+    );
+
+    const FederatedTimeline = () => (
+        <PagedGridJsx
+            navigation = { props.navigation }
+            originTab = "Discover" />
+    );
+
+    const renderScene = SceneMap({
+        home: HomeTimeline,
+        federated: FederatedTimeline,
+    });
+
+    const renderTabBar = (props) => (
+        <TabBar
+            {...props}
+            indicatorStyle = { styles.tabBar.indicator }
+            activeColor = "#000"
+            inactiveColor = "#888"
+            renderIcon = { renderIcon }
+            style = { styles.tabBar.tab } />
+    );
+
+    const renderIcon = ({ route, color }) => (
+        <Ionicons
+            name = { route.icon }
+            size = { 24 }
+            color = { color } />
+    );
+
     return (
         <ScreenWithTrayJsx
                 active = "Discover"
@@ -20,13 +70,17 @@ const DiscoverJsx = (props) => {
                     </View>
                 </View>
             </TouchableWithoutFeedback>
-            <PagedGridJsx
+            <TabView
-                navigation = { props.navigation }
+                navigationState = { { index, routes } }
-                originTab = "Discover" />
+                renderScene = { renderScene }
+                renderTabBar =  { renderTabBar }
+                onIndexChange = { setIndex }
+                initialLayout = { { width: SCREEN_WIDTH } } />
         </ScreenWithTrayJsx>
     );
 };
 
+const SCREEN_WIDTH = Dimensions.get("window").width;
 const styles = {
     form: {
         display: "flex",
@@ -37,8 +91,15 @@ const styles = {
     searchBar: {
         padding: 10,
         fontSize: 17,
-        color: "#888"
+        color: "#888",
+        borderBottomWidth: 1,
+        borderBottomColor: "#CCC",
+    },
+
+    tabBar: {
+        indicator: { backgroundColor: "black" },
+        tab: { backgroundColor: "white" },
     },
 };
 
-export default DiscoverJsx;
+export default DiscoverJsx;