-
Notifications
You must be signed in to change notification settings - Fork 0
/
Navigation.tsx
64 lines (57 loc) · 2.03 KB
/
Navigation.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import React, { useContext } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import SettingsScreen from './screens/SettingsScreen';
import HomeScreen from './screens/HomeScreen';
import ToolScreen from './screens/ToolScreen';
import GuidesScreen from './screens/GuidesScreen';
import { ThemeContext } from './screens/ThemeContext'; // Import only ThemeContext
const Tab = createBottomTabNavigator();
const Navigation: React.FC = () => {
const { theme } = useContext(ThemeContext);
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName: string
switch (route.name) {
case 'Home':
iconName = 'home';
break;
case 'Tools':
iconName = 'hammer';
break;
case 'Guides':
iconName = 'book';
break;
case 'Settings':
iconName = 'settings';
break;
default:
iconName = 'home';
}
return (
<Ionicons
name={iconName}
size={theme.iconSize || size}
color={focused ? theme.iconActiveColor : theme.iconColor}
/>
);
},
tabBarActiveTintColor: theme.activeTintColor,
tabBarInactiveTintColor: theme.inactiveTintColor,
tabBarStyle: theme.tabBarStyle,
headerShown: false,
})}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Tools" component={ToolScreen} />
<Tab.Screen name="Guides" component={GuidesScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
};
export default Navigation;