React Navigation Tabs Setup

application.tsx

// This is the application

<Stack.Navigator
  initialRouteName={signup ? "Signup" : "Dashboard"}
  screenOptions={{
    cardStyle: { backgroundColor: Colors.white },
    headerShown: false
  }}
  mode="modal"
>
  <Stack.Screen name="AddFriends" component={AddFriendsNavigator} />
  <Stack.Screen
    name="Calendar"
    component={CalendarScreen}
    options={{
      headerLeft: ({ onPress }) => {
        const handlePress = () => {
          client.writeData({ data: { selectedDate: getNow() } });

          if (onPress) {
            onPress();
          }
        };

        return <ExitIcon onPress={handlePress} />;
      },
      ...NavigationStyling.HeaderPadding,
      ...NavigationStyling.HeaderTitle,
      headerShown: true,
      title: ""
    }}
  />
  <Stack.Screen name="Dashboard" component={DashboardNavigator} />
  <Stack.Screen
    name="HomeIntention"
    component={HomeIntentionScreen}
    options={{
      headerLeft: ({ onPress }) =>
        isAndroid() ? (
          <ExitIcon onPress={onPress} />
        ) : (
          <SecondaryButton
            style={{ color: Colors.purple }}
            text="Cancel"
            onPress={onPress!}
          />
        ),
      headerShown: true,
      title: "",
      ...NavigationStyling.HeaderPadding,
      ...NavigationStyling.HeaderTitle
    }}
  />
  <Stack.Screen name="Signup" component={SignupNavigator} />
  <Stack.Screen name="Settings" component={SettingsNavigator} />
  <Stack.Screen name="Vault" component={VaultNavigator} />
  <Stack.Screen
    name="VaultIntention"
    component={VaultIntentionScreen}
    options={{
      headerLeft: ({ onPress }) =>
        isAndroid() ? (
          <ExitIcon onPress={onPress} />
        ) : (
          <SecondaryButton
            style={{ color: Colors.purple }}
            text="Cancel"
            onPress={onPress!}
          />
        ),
      headerShown: true,
      title: "",
      ...NavigationStyling.HeaderPadding,
      ...NavigationStyling.HeaderTitle
    }}
  />
</Stack.Navigator>

dashboard.tsx

export const DashboardNavigator: React.FC = () => (
  <Tab.Navigator
    initialRouteName="Home"
    screenOptions={({ route: tabRoute, navigation: tabNavigation }) => ({
      tabBarButton: ({ children, style, onPress, ...rest }) => {
        const handlePress = (event: GestureResponderEvent) => {
          const focused = tabNavigation.isFocused();
          if (!focused) {
            HapticService.feedback("impactLight");
          }

          AnalyticsService.track(EVENTS.TAB_PRESSED, {
            tab: tabRoute.name
          });

          if (onPress) {
            onPress(event);
          }
        };

        return (
          <TouchableWithoutFeedback {...rest} onPress={handlePress}>
            <View style={style}>{children}</View>
          </TouchableWithoutFeedback>
        );
      },
      tabBarIcon: ({ focused }) => {
        const Icon = ICONS[tabRoute.name as IconName];

        return (
          <Icon
            size={tabRoute.name !== "Profile" ? 20 : 28}
            color={focused ? Colors.purple : Colors.grey}
            focused={focused}
          />
        );
      }
    })}
    tabBarOptions={{
      keyboardHidesTabBar: true,
      showLabel: false,
      style: {
        borderTopColor: "transparent",
        borderTopWidth: 0,
        elevation: 0
      }
    }}
  >
    <Tab.Screen name="Home" component={DashboardHomeNavigator} />
    <Tab.Screen name="Community" component={DashboardCommunityNavigator} />
    <Tab.Screen
      name="Notifications"
      component={DashboardNotificationsNavigator}
    />
    <Tab.Screen name="Profile" component={DashboardProfileNavigator} />
  </Tab.Navigator>
);

root.tsx

// This is the root of the navigation

<AuthenticationContext.Provider value={authenticationContext}>
      <NavigationContainer
        ref={ref => NavigationService.setTopLevelNavigator(ref)}
      >
        <Stack.Navigator
          headerMode="none"
          screenOptions={{
            cardStyle: { backgroundColor: Colors.white },
            headerShown: false
          }}
        >
          {authenticated || signup ? (
            <Stack.Screen
              name="Application"
              component={ApplicationNavigator}
              initialParams={{ signup }}
            />
          ) : (
            <Stack.Screen
              name="Onboarding"
              component={OnboardingNavigator}
              options={{
                animationTypeForReplace: loading ? "push" : "pop"
              }}
            />
          )}
          {isDev && <Stack.Screen name="Storybook" component={Storybook} />}
        </Stack.Navigator>
      </NavigationContainer>
    </AuthenticationContext.Provider>