123 lines
4.1 KiB
TypeScript
123 lines
4.1 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 { createNativeStackNavigator } from '@react-navigation/native-stack';
|
|
import { BottomNavigation, Portal, useTheme } from 'react-native-paper';
|
|
import { Home, Tags, Settings, AddMeme, AddTag } from './screens';
|
|
import { horizontalScale } from './styles';
|
|
import { FloatingActionButton } from './components';
|
|
import { darkNavigationTheme, lightNavigationTheme } from './theme';
|
|
|
|
const TabNavigator = () => {
|
|
const TabNavigatorBase = createBottomTabNavigator();
|
|
const [fabVisible, setFabVisible] = React.useState(true);
|
|
|
|
return (
|
|
<>
|
|
<Portal.Host>
|
|
<TabNavigatorBase.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,
|
|
});
|
|
}
|
|
route.name === 'Settings'
|
|
? setFabVisible(false)
|
|
: setFabVisible(true);
|
|
}}
|
|
renderIcon={({ route, focused, color }) => {
|
|
const { options } = descriptors[route.key];
|
|
if (options.tabBarIcon) {
|
|
return options.tabBarIcon({
|
|
focused,
|
|
color,
|
|
size: horizontalScale(20),
|
|
});
|
|
}
|
|
}}
|
|
getLabelText={({ route }) => {
|
|
const { options } = descriptors[route.key];
|
|
return options.title ?? route.name;
|
|
}}
|
|
/>
|
|
)}>
|
|
<TabNavigatorBase.Screen
|
|
name="Home"
|
|
component={Home}
|
|
options={{
|
|
tabBarIcon: ({ color, size }) => (
|
|
<FontAwesome5 name="home" color={color} size={size} />
|
|
),
|
|
}}
|
|
/>
|
|
<TabNavigatorBase.Screen
|
|
name="Tags"
|
|
component={Tags}
|
|
options={{
|
|
tabBarIcon: ({ color, size }) => (
|
|
<FontAwesome5 name="tags" color={color} size={size} />
|
|
),
|
|
}}
|
|
/>
|
|
<TabNavigatorBase.Screen
|
|
name="Settings"
|
|
component={Settings}
|
|
options={{
|
|
tabBarIcon: ({ color, size }) => (
|
|
<FontAwesome5 name="cog" color={color} size={size} />
|
|
),
|
|
}}
|
|
/>
|
|
</TabNavigatorBase.Navigator>
|
|
<FloatingActionButton visible={fabVisible} />
|
|
</Portal.Host>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const NavigationContainer = () => {
|
|
const StackNavigatorBase = createNativeStackNavigator();
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<NavigationContainerBase
|
|
theme={theme.dark ? darkNavigationTheme : lightNavigationTheme}>
|
|
<StackNavigatorBase.Navigator screenOptions={{ headerShown: false }}>
|
|
<StackNavigatorBase.Screen name="Main" component={TabNavigator} />
|
|
<StackNavigatorBase.Screen
|
|
name="Add Meme"
|
|
component={AddMeme}
|
|
options={{ animation: 'slide_from_bottom' }}
|
|
/>
|
|
<StackNavigatorBase.Screen
|
|
name="Add Tag"
|
|
component={AddTag}
|
|
options={{ animation: 'slide_from_bottom' }}
|
|
/>
|
|
</StackNavigatorBase.Navigator>
|
|
</NavigationContainerBase>
|
|
);
|
|
};
|
|
|
|
export default NavigationContainer;
|