BottomTabNavigator.tsx 4.62 KB
Newer Older
1 2 3 4
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";
import type { FC } from "react";
import * as React from "react";
5

6
import { Icomoon, IcomoonIcons } from "../components";
7
import Colors from "../constants/Colors";
8
import Labels from "../constants/Labels";
9 10 11
import {
  ArticleDetail,
  EpdsSurveyScreen,
12
  EventDetails,
13 14 15 16 17
  ListArticles,
  TabAroundMeScreen,
  TabCalendarScreen,
  TabHomeScreen,
} from "../screens";
18 19
import type {
  BottomTabParamList,
20 21
  TabAroundMeParamList,
  TabCalendarParamList,
22
  TabEpdsParamList,
23 24
  TabHomeParamList,
  TabItem,
25
} from "../types";
26 27 28

const BottomTab = createBottomTabNavigator<BottomTabParamList>();

29
const BottomTabNavigator: FC = () => {
30
  const iconSize = 22;
31 32 33
  const tabItems: TabItem[] = [
    {
      component: TabHomeNavigator,
34
      getIcon: (tintColor, focused) => (
35
        <Icomoon
36
          name={focused ? IcomoonIcons.accueilActive : IcomoonIcons.accueil}
37 38
          color={tintColor}
          size={iconSize}
39 40
        />
      ),
41
      name: "tabHome",
42
      title: Labels.tabs.homeTitle,
43 44 45
    },
    {
      component: TabCalendarNavigator,
46
      getIcon: (tintColor, focused) => (
47
        <Icomoon
48 49 50
          name={
            focused ? IcomoonIcons.calendrierActive : IcomoonIcons.calendrier
          }
51 52
          color={tintColor}
          size={iconSize}
53 54
        />
      ),
55
      name: "tabCalendar",
56
      title: Labels.tabs.calendarTitle,
57 58
    },
    {
59
      component: TabEpdsNavigator,
60
      getIcon: (tintColor, focused) => (
61
        <Icomoon
62 63 64
          name={
            focused ? IcomoonIcons.postPartumActive : IcomoonIcons.postPartum
          }
65 66
          color={tintColor}
          size={iconSize}
67 68
        />
      ),
69
      name: "tabFavorites",
70
      title: Labels.tabs.testEpds,
71 72 73
    },
    {
      component: TabAroundMeNavigator,
74
      getIcon: (tintColor, focused) => (
75
        <Icomoon
76 77 78
          name={
            focused ? IcomoonIcons.autourDeMoiActive : IcomoonIcons.autourDeMoi
          }
79 80
          color={tintColor}
          size={iconSize}
81 82
        />
      ),
83
      name: "tabAroundMe",
84
      title: Labels.tabs.aroundMeTitle,
85 86
    },
  ];
87 88 89

  return (
    <BottomTab.Navigator
90
      initialRouteName="tabHome"
91 92 93 94
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: Colors.primaryBlueDark,
        tabBarInactiveTintColor: Colors.primaryBlueDark,
95
      }}
96
    >
97 98 99 100 101 102
      {tabItems.map((tabItem, index) => (
        <BottomTab.Screen
          key={index}
          name={tabItem.name}
          component={tabItem.component}
          options={{
103
            tabBarIcon: ({ color, focused }) => tabItem.getIcon(color, focused),
104
            title: tabItem.title,
105
            unmountOnBlur: true,
106 107 108
          }}
        />
      ))}
109 110
    </BottomTab.Navigator>
  );
111
};
112 113 114 115

// Each tab has its own navigation stack, you can read more about this pattern here:
// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab

116 117 118 119 120 121 122 123
const TabHomeStack = createStackNavigator<TabHomeParamList>();
const TabHomeNavigator: FC = () => (
  <TabHomeStack.Navigator screenOptions={{ headerShown: false }}>
    <TabHomeStack.Screen
      name="tabHomeScreen"
      component={TabHomeScreen}
      options={{}}
    />
124
    <TabHomeStack.Screen name="listArticles" component={ListArticles} />
125
    <TabHomeStack.Screen name="article" component={ArticleDetail} />
126
    <TabHomeStack.Screen name="epdsSurvey" component={EpdsSurveyScreen} />
127 128 129 130 131 132 133 134 135 136
  </TabHomeStack.Navigator>
);

const TabCalendarStack = createStackNavigator<TabCalendarParamList>();
const TabCalendarNavigator: FC = () => (
  <TabCalendarStack.Navigator screenOptions={{ headerShown: false }}>
    <TabCalendarStack.Screen
      name="tabCalendarScreen"
      component={TabCalendarScreen}
      options={{}}
137
    />
138 139
    <TabCalendarStack.Screen name="eventDetails" component={EventDetails} />
    <TabCalendarStack.Screen name="article" component={ArticleDetail} />
140
  </TabCalendarStack.Navigator>
141
);
142

143 144 145 146 147 148
const TabEpdsStack = createStackNavigator<TabEpdsParamList>();
const TabEpdsNavigator: FC = () => (
  <TabEpdsStack.Navigator screenOptions={{ headerShown: false }}>
    <TabEpdsStack.Screen
      name="tabEpdsScreen"
      component={EpdsSurveyScreen}
149 150
      options={{}}
    />
151
  </TabEpdsStack.Navigator>
152
);
153

154 155 156 157 158 159 160
const TabAroundMeStack = createStackNavigator<TabAroundMeParamList>();
const TabAroundMeNavigator: FC = () => (
  <TabAroundMeStack.Navigator screenOptions={{ headerShown: false }}>
    <TabAroundMeStack.Screen
      name="tabAroundMeScreen"
      component={TabAroundMeScreen}
      options={{}}
161
    />
162
  </TabAroundMeStack.Navigator>
163 164 165
);

export default BottomTabNavigator;