105 lines
3.2 KiB
TypeScript
105 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
CommonActions,
|
|
NavigationContainer as NavigationContainerBase,
|
|
} from '@react-navigation/native';
|
|
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { BottomNavigation, useTheme } from 'react-native-paper';
|
|
import { Home, Search, Tags, Settings } from './screens';
|
|
|
|
function NavigationContainer() {
|
|
const TabNavigator = createBottomTabNavigator();
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<NavigationContainerBase
|
|
theme={{
|
|
dark: theme.dark,
|
|
colors: {
|
|
primary: theme.colors.primary,
|
|
background: theme.colors.background,
|
|
card: theme.colors.surface,
|
|
text: theme.colors.onSurface,
|
|
border: theme.colors.outline,
|
|
notification: theme.colors.error,
|
|
},
|
|
}}>
|
|
<TabNavigator.Navigator
|
|
screenOptions={{
|
|
headerShown: false,
|
|
}}
|
|
tabBar={({ navigation, state, descriptors, insets }) => (
|
|
<BottomNavigation.Bar
|
|
navigationState={state}
|
|
safeAreaInsets={insets}
|
|
onTabPress={({ route, preventDefault }) => {
|
|
const event = navigation.emit({
|
|
type: 'tabPress',
|
|
target: route.key,
|
|
canPreventDefault: true,
|
|
});
|
|
if (event.defaultPrevented) {
|
|
preventDefault();
|
|
} else {
|
|
navigation.dispatch({
|
|
...CommonActions.navigate(route.name, route.params),
|
|
target: state.key,
|
|
});
|
|
}
|
|
}}
|
|
renderIcon={({ route, focused, color }) => {
|
|
const { options } = descriptors[route.key];
|
|
if (options.tabBarIcon) {
|
|
return options.tabBarIcon({ focused, color, size: 24 });
|
|
}
|
|
}}
|
|
getLabelText={({ route }) => {
|
|
const { options } = descriptors[route.key];
|
|
return options.title ?? route.name;
|
|
}}
|
|
/>
|
|
)}>
|
|
<TabNavigator.Screen
|
|
name="Home"
|
|
component={Home}
|
|
options={{
|
|
tabBarIcon: ({ color }) => (
|
|
<FontAwesome5 name="home" color={color} size={20} />
|
|
),
|
|
}}
|
|
/>
|
|
<TabNavigator.Screen
|
|
name="Search"
|
|
component={Search}
|
|
options={{
|
|
tabBarIcon: ({ color }) => (
|
|
<FontAwesome5 name="search" color={color} size={20} />
|
|
),
|
|
}}
|
|
/>
|
|
<TabNavigator.Screen
|
|
name="Tags"
|
|
component={Tags}
|
|
options={{
|
|
tabBarIcon: ({ color }) => (
|
|
<FontAwesome5 name="tags" color={color} size={20} />
|
|
),
|
|
}}
|
|
/>
|
|
<TabNavigator.Screen
|
|
name="Settings"
|
|
component={Settings}
|
|
options={{
|
|
tabBarIcon: ({ color }) => (
|
|
<FontAwesome5 name="cog" color={color} size={20} />
|
|
),
|
|
}}
|
|
/>
|
|
</TabNavigator.Navigator>
|
|
</NavigationContainerBase>
|
|
);
|
|
}
|
|
|
|
export default NavigationContainer;
|