Skip to content

Commit e5870e6

Browse files
retrixeretrixe
committed
Switch to react-navigation/material-top-tabs.
Enabled swiping between tabs, and looks good as well.
1 parent ef81fe9 commit e5870e6

4 files changed

Lines changed: 87 additions & 5 deletions

File tree

‎package-lock.json‎

Lines changed: 59 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@react-native-async-storage/async-storage": "^1.15.16",
1616
"@react-native-picker/picker": "^2.1.0",
1717
"@react-navigation/bottom-tabs": "^6.0.5",
18+
"@react-navigation/material-top-tabs": "^6.0.6",
1819
"@react-navigation/native": "^6.0.2",
1920
"@react-navigation/native-stack": "^6.1.0",
2021
"assert": "^2.0.0",
@@ -25,9 +26,11 @@
2526
"react": "17.0.2",
2627
"react-native": "0.67.1",
2728
"react-native-crypto": "^2.2.0",
29+
"react-native-pager-view": "^5.4.9",
2830
"react-native-randombytes": "^3.6.1",
2931
"react-native-safe-area-context": "^3.1.9",
3032
"react-native-screens": "^3.6.0",
33+
"react-native-tab-view": "^3.1.1",
3134
"react-native-tcp": "^4.0.0",
3235
"react-native-vector-icons": "^7.1.0",
3336
"react-native-webview": "^11.13.0",

‎src/App.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
createNativeStackNavigator,
1414
NativeStackNavigationProp
1515
} from '@react-navigation/native-stack'
16-
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
16+
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
1717

1818
import useAsyncStorage from './helpers/useAsyncStorage'
1919
import useJsonAsyncStorage from './helpers/useJsonAsyncStorage'
@@ -28,7 +28,7 @@ import SettingScreen from './screens/settings/SettingScreen'
2828
import globalStyle from './globalStyle'
2929

3030
const Stacks = createNativeStackNavigator()
31-
const Tabs = createBottomTabNavigator()
31+
const Tabs = createMaterialTopTabNavigator() // createBottomTabNavigator()
3232

3333
type HomeNavigationProp = NativeStackNavigationProp<
3434
{ Home: undefined; Chat: undefined },
@@ -42,11 +42,11 @@ const HomeScreen = ({ navigation }: { navigation: HomeNavigationProp }) => {
4242
}, [connection, navigation])
4343

4444
return (
45-
// LOW-TODO: Swipe between tab screens.
4645
<Tabs.Navigator
46+
tabBarPosition='bottom'
4747
screenOptions={({ route }) => ({
4848
// eslint-disable-next-line react/prop-types,react/display-name
49-
tabBarIcon: ({ focused, color, size }) => {
49+
tabBarIcon: ({ focused, color }) => {
5050
let Component = Ionicons
5151
let iconName = focused ? 'ios-list-circle' : 'ios-list'
5252
switch (route.name) {
@@ -62,9 +62,11 @@ const HomeScreen = ({ navigation }: { navigation: HomeNavigationProp }) => {
6262
default:
6363
break
6464
}
65-
return <Component name={iconName} size={size} color={color} />
65+
return <Component name={iconName} size={24} color={color} />
6666
},
6767
tabBarLabelStyle: { marginBottom: 5 },
68+
tabBarActiveTintColor: '#007AFF',
69+
tabBarInactiveTintColor: '#a0a0a0',
6870
headerShown: false
6971
})}
7072
>

‎yarn.lock‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1545,6 +1545,14 @@
15451545
"resolved" "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.1.0.tgz"
15461546
"version" "1.1.0"
15471547

1548+
"@react-navigation/material-top-tabs@^6.0.6":
1549+
"integrity" "sha512-kbm/0jndRVeGdAgOd4NcDSdSQiYeA7fkctCKbPxe3mT36j9qOqpfHfmd2dbv/VbNCngdTtZ3/+QMxTIViZGy7g=="
1550+
"resolved" "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.0.6.tgz"
1551+
"version" "6.0.6"
1552+
dependencies:
1553+
"color" "^3.1.3"
1554+
"warn-once" "^0.1.0"
1555+
15481556
"@react-navigation/native-stack@^6.1.0":
15491557
"integrity" "sha512-ta8JQ9n6e7pxrXJ9/MYH57g0xhlV8rzGvQtni6KvBdWqqk0M5QDqIXaUkzXp2wvLMZp7LQmnD4FI/TGG2mQOKA=="
15501558
"resolved" "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.1.0.tgz"
@@ -6875,6 +6883,11 @@
68756883
"public-encrypt" "^4.0.0"
68766884
"randomfill" "^1.0.3"
68776885

6886+
"react-native-pager-view@*", "react-native-pager-view@^5.4.9", "react-native-pager-view@>= 4.0.0":
6887+
"integrity" "sha512-D6tzxpwMGdl6CXgtskGWhKRc5cJakCazESRGt7PkqnpyiH3N35ft1KmR82pCSQetAFlytFiToeu3a/dG5CELvA=="
6888+
"resolved" "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-5.4.9.tgz"
6889+
"version" "5.4.9"
6890+
68786891
"react-native-randombytes@^3.6.1", "react-native-randombytes@>=2.0.0 <4.0.0":
68796892
"integrity" "sha512-qxkwMbOZ0Hff1V7VqpaWrR6ItkA+oF6bnI79Qp9F3Tk8WBsdKDi6m1mi3dEdFWePoRLrhJ2L03rU0yabst1tVw=="
68806893
"resolved" "https://registry.npmjs.org/react-native-randombytes/-/react-native-randombytes-3.6.1.tgz"
@@ -6895,6 +6908,11 @@
68956908
dependencies:
68966909
"warn-once" "^0.1.0"
68976910

6911+
"react-native-tab-view@^3.1.1", "react-native-tab-view@>= 3.0.0":
6912+
"integrity" "sha512-M5pRN6utQfytKWoKlKVzg5NbkYu308qNoW1khGTtEOTs1k14p2dHJ/BWOJoJYHKbPVUyZldbG9MFT7gUl4YHnw=="
6913+
"resolved" "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.1.1.tgz"
6914+
"version" "3.1.1"
6915+
68986916
"react-native-tcp@^4.0.0":
68996917
"integrity" "sha512-68lSq2qns6P33yH7vYuiU5rV7xEiNuA2GYIStFlMvF/uEKDHL53MDgQLC2alKEU9JAHfmB8uUmcu3QQSGkaoig=="
69006918
"resolved" "https://registry.npmjs.org/react-native-tcp/-/react-native-tcp-4.0.0.tgz"

0 commit comments

Comments
 (0)