Switch to react-navigation/material-top-tabs.

retrixe · retrixe · commit e5870e6cb393 · 2022-01-26T01:52:37.000+05:30
Enabled swiping between tabs, and looks good as well.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@react-native-async-storage/async-storage": "^1.15.16",
     "@react-native-picker/picker": "^2.1.0",
     "@react-navigation/bottom-tabs": "^6.0.5",
+    "@react-navigation/material-top-tabs": "^6.0.6",
     "@react-navigation/native": "^6.0.2",
     "@react-navigation/native-stack": "^6.1.0",
     "assert": "^2.0.0",
@@ -25,9 +26,11 @@
     "react": "17.0.2",
     "react-native": "0.67.1",
     "react-native-crypto": "^2.2.0",
+    "react-native-pager-view": "^5.4.9",
     "react-native-randombytes": "^3.6.1",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^3.6.0",
+    "react-native-tab-view": "^3.1.1",
     "react-native-tcp": "^4.0.0",
     "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^11.13.0",
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,7 +13,7 @@ import {
   createNativeStackNavigator,
   NativeStackNavigationProp
 } from '@react-navigation/native-stack'
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 
 import useAsyncStorage from './helpers/useAsyncStorage'
 import useJsonAsyncStorage from './helpers/useJsonAsyncStorage'
@@ -28,7 +28,7 @@ import SettingScreen from './screens/settings/SettingScreen'
 import globalStyle from './globalStyle'
 
 const Stacks = createNativeStackNavigator()
-const Tabs = createBottomTabNavigator()
+const Tabs = createMaterialTopTabNavigator() // createBottomTabNavigator()
 
 type HomeNavigationProp = NativeStackNavigationProp<
   { Home: undefined; Chat: undefined },
@@ -42,11 +42,11 @@ const HomeScreen = ({ navigation }: { navigation: HomeNavigationProp }) => {
   }, [connection, navigation])
 
   return (
-    // LOW-TODO: Swipe between tab screens.
     <Tabs.Navigator
+      tabBarPosition='bottom'
       screenOptions={({ route }) => ({
         // eslint-disable-next-line react/prop-types,react/display-name
-        tabBarIcon: ({ focused, color, size }) => {
+        tabBarIcon: ({ focused, color }) => {
           let Component = Ionicons
           let iconName = focused ? 'ios-list-circle' : 'ios-list'
           switch (route.name) {
@@ -62,9 +62,11 @@ const HomeScreen = ({ navigation }: { navigation: HomeNavigationProp }) => {
             default:
               break
           }
-          return <Component name={iconName} size={size} color={color} />
+          return <Component name={iconName} size={24} color={color} />
         },
         tabBarLabelStyle: { marginBottom: 5 },
+        tabBarActiveTintColor: '#007AFF',
+        tabBarInactiveTintColor: '#a0a0a0',
         headerShown: false
       })}
     >
diff --git a/yarn.lock b/yarn.lock
@@ -1545,6 +1545,14 @@
   "resolved" "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.1.0.tgz"
   "version" "1.1.0"
 
+"@react-navigation/material-top-tabs@^6.0.6":
+  "integrity" "sha512-kbm/0jndRVeGdAgOd4NcDSdSQiYeA7fkctCKbPxe3mT36j9qOqpfHfmd2dbv/VbNCngdTtZ3/+QMxTIViZGy7g=="
+  "resolved" "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.0.6.tgz"
+  "version" "6.0.6"
+  dependencies:
+    "color" "^3.1.3"
+    "warn-once" "^0.1.0"
+
 "@react-navigation/native-stack@^6.1.0":
   "integrity" "sha512-ta8JQ9n6e7pxrXJ9/MYH57g0xhlV8rzGvQtni6KvBdWqqk0M5QDqIXaUkzXp2wvLMZp7LQmnD4FI/TGG2mQOKA=="
   "resolved" "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.1.0.tgz"
@@ -6875,6 +6883,11 @@
     "public-encrypt" "^4.0.0"
     "randomfill" "^1.0.3"
 
+"react-native-pager-view@*", "react-native-pager-view@^5.4.9", "react-native-pager-view@>= 4.0.0":
+  "integrity" "sha512-D6tzxpwMGdl6CXgtskGWhKRc5cJakCazESRGt7PkqnpyiH3N35ft1KmR82pCSQetAFlytFiToeu3a/dG5CELvA=="
+  "resolved" "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-5.4.9.tgz"
+  "version" "5.4.9"
+
 "react-native-randombytes@^3.6.1", "react-native-randombytes@>=2.0.0 <4.0.0":
   "integrity" "sha512-qxkwMbOZ0Hff1V7VqpaWrR6ItkA+oF6bnI79Qp9F3Tk8WBsdKDi6m1mi3dEdFWePoRLrhJ2L03rU0yabst1tVw=="
   "resolved" "https://registry.npmjs.org/react-native-randombytes/-/react-native-randombytes-3.6.1.tgz"
@@ -6895,6 +6908,11 @@
   dependencies:
     "warn-once" "^0.1.0"
 
+"react-native-tab-view@^3.1.1", "react-native-tab-view@>= 3.0.0":
+  "integrity" "sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw=="
+  "resolved" "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz"
+  "version" "3.1.1"
+
 "react-native-tcp@^4.0.0":
   "integrity" "sha512-68lSq2qns6P33yH7vYuiU5rV7xEiNuA2GYIStFlMvF/uEKDHL53MDgQLC2alKEU9JAHfmB8uUmcu3QQSGkaoig=="
   "resolved" "https://registry.npmjs.org/react-native-tcp/-/react-native-tcp-4.0.0.tgz"
