diff --git a/package-lock.json b/package-lock.json index a0d6e83..d612379 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e0fe5c7..831158c 100644 --- a/package.json +++ b/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" diff --git a/src/components/pages/discover.js b/src/components/pages/discover.js index d44f68c..097862c 100644 --- a/src/components/pages/discover.js +++ b/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 = () => ( + + ); + + const FederatedTimeline = () => ( + + ); + + const renderScene = SceneMap({ + home: HomeTimeline, + federated: FederatedTimeline, + }); + + const renderTabBar = (props) => ( + + ); + + const renderIcon = ({ route, color }) => ( + + ); + return ( { - + ); }; +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; \ No newline at end of file +export default DiscoverJsx;