Skip to content

Commit d8b2622

Browse files
HelanaNadyHelanaNady
committed
refactor: consistent top tabs indicators
1 parent c17574c commit d8b2622

9 files changed

Lines changed: 115 additions & 23 deletions

‎src/hooks/navigation/useBottomTabsConfig.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ export const useBottomTabsConfig = () => {
166166
borderBottomWidth: StyleSheet.hairlineWidth,
167167
elevation: 0,
168168
paddingTop: insets.top,
169-
paddingBottom: Platform.OS === 'ios' ? 10 : Math.max(0, insets.bottom - 14),
169+
paddingBottom: Platform.OS === 'ios' ? 10 : Math.max(0, insets.bottom),
170170
paddingLeft: insets.left,
171171
paddingRight: insets.right,
172172
};
@@ -179,8 +179,8 @@ export const useBottomTabsConfig = () => {
179179
header: () => {
180180
return (
181181
<View style={headerStyles}>
182-
<View className="pt-2 px-5 h-10 flex-row items-center justify-between">
183-
<View className="flex items-center justify-center">
182+
<View className="pt-2 px-5 h-10 flex-row items-center justify-between bg-background">
183+
<View className="flex items-center justify-center bg-background">
184184
<Pressable
185185
onPress={() =>
186186
(
@@ -199,8 +199,7 @@ export const useBottomTabsConfig = () => {
199199
/>
200200
</Pressable>
201201
</View>
202-
203-
<View className="flex-1 items-center">{renderHeaderTitle()}</View>
202+
<View className="flex-1 items-center bg-background">{renderHeaderTitle()}</View>
204203
</View>
205204
</View>
206205
);

‎src/hooks/navigation/useTopTabsConfig.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export const useTopTabsConfig = () => {
3333
tabBarContentContainerStyle: {
3434
borderBottomColor: theme === 'light' ? colorscheme.border : colorscheme.mutedForeground,
3535
borderBottomWidth: theme === 'light' ? 1 : 0.3,
36+
justifyContent: 'center',
37+
alignItems: 'center',
3638
},
3739
tabBarActiveTintColor: colorscheme.foreground,
3840
tabBarInactiveTintColor: colorscheme.mutedForeground,

‎src/navigation/app/ActivityNavigator.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useMemo } from 'react';
22

3-
import { Text, TouchableOpacity, View } from 'react-native';
3+
import { Dimensions, Text, TouchableOpacity, View } from 'react-native';
44

55
import { Ionicons } from '@expo/vector-icons';
66
import {
@@ -41,6 +41,10 @@ export function ActivityNavigator() {
4141
tabBarIndicatorStyle: {
4242
backgroundColor: colorscheme.primary,
4343
borderColor: colorscheme.background,
44+
marginHorizontal: 15,
45+
height: 3,
46+
borderRadius: 2,
47+
width: Dimensions.get('window').width / 3.5,
4448
},
4549
};
4650
}, [theme, topTabsConfig]);

‎src/navigation/app/SearchResultsNavigator.tsx‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
1+
import { useMemo } from 'react';
2+
3+
import { Dimensions } from 'react-native';
4+
5+
import {
6+
createMaterialTopTabNavigator,
7+
MaterialTopTabNavigationOptions,
8+
} from '@react-navigation/material-top-tabs';
29

310
import { useTopTabsConfig } from '@/hooks/navigation/useTopTabsConfig';
11+
import { useTheme } from '@/hooks/useTheme';
412
import SearchLatestScreen from '@/screens/search/tabs/SearchLatestScreen';
513
import SearchMediaScreen from '@/screens/search/tabs/SearchMediaScreen';
614
import SearchPeopleScreen from '@/screens/search/tabs/SearchPeopleScreen';
715
import SearchTopScreen from '@/screens/search/tabs/SearchTopScreen';
816
import { SearchTabsParamList } from '@/types/navigation';
917
import { SearchResultTab } from '@/types/search';
18+
import { colors } from '@/utils';
1019
import { SEARCH_TABS } from '@/utils/navigation/routeNames';
1120

1221
const Tab = createMaterialTopTabNavigator<SearchTabsParamList>();
@@ -37,14 +46,37 @@ export function SearchResultsNavigator({
3746
onTabChange,
3847
}: SearchResultsNavigatorProps) {
3948
const topTabsConfig = useTopTabsConfig();
49+
const { theme } = useTheme();
4050
const trimmedQuery = query.trim();
4151

4252
const initialRouteName = tabToRoute[initialTab];
4353

54+
const screenOptions: MaterialTopTabNavigationOptions = useMemo(() => {
55+
const colorscheme = colors[theme];
56+
57+
return {
58+
...topTabsConfig,
59+
tabBarItemStyle: {
60+
width: undefined,
61+
},
62+
tabBarIndicatorStyle: {
63+
backgroundColor: colorscheme.primary,
64+
borderColor: colorscheme.background,
65+
marginHorizontal: 10,
66+
height: 3,
67+
borderRadius: 2,
68+
width: Dimensions.get('window').width / 5,
69+
},
70+
tabBarIndicatorContainerStyle: {
71+
alignItems: 'center',
72+
},
73+
};
74+
}, [theme, topTabsConfig]);
75+
4476
return (
4577
<Tab.Navigator
4678
initialRouteName={initialRouteName}
47-
screenOptions={topTabsConfig}
79+
screenOptions={screenOptions}
4880
screenListeners={{
4981
state: (e) => {
5082
const state = e.data.state;

‎src/navigation/app/bottomTabs/ExploreNavigator.tsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,38 +6,59 @@ import {
66
} from '@react-navigation/material-top-tabs';
77

88
import { useTopTabsConfig } from '@/hooks/navigation/useTopTabsConfig';
9+
import { useTheme } from '@/hooks/useTheme';
910
import EntertainmentScreen from '@/screens/explore/EntertainmentScreen';
1011
import ForYouExploreScreen from '@/screens/explore/ForYouExploreScreen';
1112
import NewsScreen from '@/screens/explore/NewsScreen';
1213
import SportsScreen from '@/screens/explore/SportsScreen';
1314
import TrendingScreen from '@/screens/explore/TrendingScreen';
1415
import { ExploreTabsParamList } from '@/types/navigation';
16+
import { colors } from '@/utils';
1517
import { EXPLORE } from '@/utils/navigation/routeNames';
1618

1719
const Tab = createMaterialTopTabNavigator<ExploreTabsParamList>();
1820

1921
export function ExploreNavigator() {
22+
const { theme } = useTheme();
2023
const topTabsConfig = useTopTabsConfig();
2124

2225
const screenOptions: MaterialTopTabNavigationOptions = useMemo(() => {
26+
const colorscheme = colors[theme];
27+
2328
return {
2429
...topTabsConfig,
2530
tabBarScrollEnabled: true,
26-
tabBarItemStyle: { width: 'auto' },
31+
tabBarItemStyle: {
32+
width: 'auto',
33+
overflow: 'hidden',
34+
},
35+
tabBarIndicatorStyle: {
36+
backgroundColor: colorscheme.primary,
37+
borderColor: colorscheme.background,
38+
height: 3,
39+
width: 0.52,
40+
},
41+
tabBarIndicatorContainerStyle: {
42+
alignItems: 'center',
43+
},
2744
};
28-
}, [topTabsConfig]);
45+
}, [topTabsConfig, theme]);
2946

3047
return (
3148
<Tab.Navigator screenOptions={screenOptions}>
3249
<Tab.Screen
3350
name={EXPLORE.FOR_YOU}
3451
component={ForYouExploreScreen}
35-
options={{ tabBarLabel: 'For You' }}
52+
options={{
53+
tabBarLabel: 'For You',
54+
}}
3655
/>
3756
<Tab.Screen
3857
name={EXPLORE.TRENDING}
3958
component={TrendingScreen}
40-
options={{ tabBarButtonTestID: 'TrendingTab' }}
59+
options={{
60+
tabBarButtonTestID: 'TrendingTab',
61+
}}
4162
/>
4263
<Tab.Screen
4364
name={EXPLORE.NEWS}

‎src/navigation/app/bottomTabs/HomeNavigator.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useMemo, useState } from 'react';
22

3-
import { Pressable, StyleSheet, View } from 'react-native';
3+
import { Dimensions, Pressable, StyleSheet, View } from 'react-native';
44

55
import { AntDesign } from '@expo/vector-icons';
66
import {
@@ -42,15 +42,17 @@ function HomeTabs() {
4242
tabBarPressColor: colorscheme.buttonDisabled,
4343
tabBarItemStyle: {
4444
width: undefined,
45-
paddingHorizontal: 8,
4645
},
4746
tabBarIndicatorStyle: {
4847
backgroundColor: colorscheme.primary,
4948
borderColor: colorscheme.background,
50-
borderStartWidth: 15,
51-
borderEndWidth: 15,
49+
marginHorizontal: 15,
5250
height: 3,
5351
borderRadius: 2,
52+
width: Dimensions.get('window').width / 2.5,
53+
},
54+
tabBarIndicatorContainerStyle: {
55+
alignItems: 'center',
5456
},
5557
};
5658
}, [theme, topTabsConfig]);

‎src/navigation/app/bottomTabs/NotificationsNavigator.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react-native/no-unused-styles */
22
import { useMemo } from 'react';
33

4-
import { Pressable, StyleSheet, View } from 'react-native';
4+
import { Dimensions, Pressable, StyleSheet, View } from 'react-native';
55

66
import { Ionicons } from '@expo/vector-icons';
77
import {
@@ -34,14 +34,17 @@ function NotificationsTabs() {
3434
...topTabsConfig,
3535
tabBarItemStyle: {
3636
width: undefined,
37-
marginHorizontal: 5,
3837
},
3938
tabBarIndicatorStyle: {
4039
backgroundColor: colorscheme.primary,
4140
borderColor: colorscheme.background,
42-
borderStartWidth: 15,
43-
borderEndWidth: 15,
41+
marginHorizontal: 15,
4442
height: 3,
43+
borderRadius: 2,
44+
width: Dimensions.get('window').width / 2.5,
45+
},
46+
tabBarIndicatorContainerStyle: {
47+
alignItems: 'center',
4548
},
4649
};
4750
}, [theme, topTabsConfig]);

‎src/navigation/profile/ConnectionsNavigator.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,13 @@ export function ConnectionsNavigator() {
3838
...topTabsConfig,
3939
tabBarItemStyle: {
4040
width: 'auto',
41+
paddingHorizontal: 15,
4142
},
4243
tabBarIndicatorStyle: {
4344
backgroundColor: colorscheme.primary,
4445
borderColor: colorscheme.background,
46+
height: 3,
47+
width: 0.55,
4548
},
4649
};
4750
}, [theme, topTabsConfig]);

‎src/navigation/profile/ProfileTabsNavigator.tsx‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
import { useMemo } from 'react';
22

3-
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
3+
import { Dimensions } from 'react-native';
4+
5+
import {
6+
createMaterialTopTabNavigator,
7+
MaterialTopTabNavigationOptions,
8+
} from '@react-navigation/material-top-tabs';
49

510
import { useTopTabsConfig } from '@/hooks/navigation/useTopTabsConfig';
11+
import { useTheme } from '@/hooks/useTheme';
612
import ProfileLikesScreen from '@/screens/profile/profileTabs/ProfileLikesScreen';
713
import ProfileMediaScreen from '@/screens/profile/profileTabs/ProfileMediaScreen';
814
import ProfilePostsScreen from '@/screens/profile/profileTabs/ProfilePostsScreen';
915
import ProfileRepliesScreen from '@/screens/profile/profileTabs/ProfileRepliesScreen';
1016
import { ProfileTabsParamList } from '@/types/navigation';
17+
import { colors } from '@/utils';
1118
import { PROFILE_TABS } from '@/utils/navigation/routeNames';
1219

1320
const Tab = createMaterialTopTabNavigator<ProfileTabsParamList>();
14-
1521
interface ProfileTabsNavigatorProps {
1622
username: string;
1723
}
@@ -20,8 +26,28 @@ export function ProfileTabsNavigator({ username }: ProfileTabsNavigatorProps) {
2026
const topTabsConfig = useTopTabsConfig();
2127
const initialParams = useMemo(() => ({ username }), [username]);
2228

29+
const { theme } = useTheme();
30+
const screenOptions: MaterialTopTabNavigationOptions = useMemo(() => {
31+
const colorscheme = colors[theme];
32+
33+
return {
34+
...topTabsConfig,
35+
tabBarItemStyle: {
36+
width: undefined,
37+
},
38+
tabBarIndicatorStyle: {
39+
backgroundColor: colorscheme.primary,
40+
borderColor: colorscheme.background,
41+
marginHorizontal: 15,
42+
height: 3,
43+
borderRadius: 2,
44+
width: Dimensions.get('window').width / 5.5,
45+
},
46+
};
47+
}, [theme, topTabsConfig]);
48+
2349
return (
24-
<Tab.Navigator screenOptions={topTabsConfig}>
50+
<Tab.Navigator screenOptions={screenOptions}>
2551
<Tab.Screen
2652
name={PROFILE_TABS.POSTS}
2753
component={ProfilePostsScreen}

0 commit comments

Comments
 (0)