1import { createDrawerNavigator } from '@react-navigation/drawer';
2import * as React from 'react';
3import { Platform, StyleSheet, useWindowDimensions } from 'react-native';
4import { useSafeAreaInsets } from 'react-native-safe-area-context';
5
6import Screens from './MainNavigators';
7import createTabNavigator from './createTabNavigator';
8import { Colors } from '../constants';
9
10const Tab = createTabNavigator();
11
12const Drawer = createDrawerNavigator();
13
14export default function MainTabbedNavigator(props: any) {
15  const { width } = useWindowDimensions();
16  const { left } = useSafeAreaInsets();
17  const isMobile = width <= 640;
18  const isTablet = !isMobile && width <= 960;
19  const isLargeScreen = !isTablet && !isMobile;
20
21  // Use a tab bar on all except web desktop.
22  // NOTE(brentvatne): if you navigate to an example screen and then resize your
23  // browser such that the navigator changes from tab to drawer or drawer to tab
24  // then it will reset to the list because the navigator has changed and the state
25  // of its children will be reset.
26  if (Platform.OS !== 'web' || isMobile) {
27    return (
28      <Tab.Navigator
29        // @ts-ignore: Tab.Navigator can be either bottom-tabs navigator
30        // or material-bottom-tabs navigator
31        // material-bottom-tabs props
32        shifting
33        activeTintColor={Colors.tabIconSelected}
34        inactiveTintColor={Colors.tabIconDefault}
35        barStyle={{
36          backgroundColor: Colors.tabBar,
37          borderTopWidth: StyleSheet.hairlineWidth,
38          borderTopColor: Colors.tabIconDefault,
39        }}
40        // bottom-tabs props
41        screenOptions={{
42          headerShown: false,
43          tabBarActiveTintColor: Colors.tabIconSelected,
44          tabBarInactiveTintColor: Colors.tabIconDefault,
45          tabBarStyle: [
46            {
47              backgroundColor: Colors.tabBar,
48            },
49          ],
50        }}>
51        {Object.entries(Screens).map(([name, Screen]) => (
52          <Tab.Screen
53            name={name}
54            key={name}
55            component={Screen.navigator}
56            options={Screen.navigator.navigationOptions}
57          />
58        ))}
59      </Tab.Navigator>
60    );
61  }
62
63  return (
64    <Drawer.Navigator
65      {...props}
66      screenOptions={
67        isTablet
68          ? {
69              drawerLabel: () => null,
70            }
71          : {}
72      }
73      drawerStyle={{ width: isLargeScreen ? undefined : 64 + left }}
74      drawerType="permanent">
75      {Object.entries(Screens).map(([name, Screen]) => (
76        <Tab.Screen
77          name={name}
78          key={name}
79          component={Screen.navigator}
80          options={Screen.navigator.navigationOptions}
81        />
82      ))}
83    </Drawer.Navigator>
84  );
85}
86