Browse Source

Update navigation components to use TypeScript

Arnaud Vergnet 3 years ago
parent
commit
b8e7272d2c

+ 18
- 29
src/components/Tabbar/CustomTabBar.tsx View File

@@ -21,36 +21,22 @@ import * as React from 'react';
21 21
 import {Animated} from 'react-native';
22 22
 import {withTheme} from 'react-native-paper';
23 23
 import {Collapsible} from 'react-navigation-collapsible';
24
-import {StackNavigationProp} from '@react-navigation/stack';
25 24
 import TabIcon from './TabIcon';
26 25
 import TabHomeIcon from './TabHomeIcon';
27
-
28
-type RouteType = {
29
-  name: string;
30
-  key: string;
31
-  params: {collapsible: Collapsible};
32
-  state: {
33
-    index: number;
34
-    routes: Array<RouteType>;
35
-  };
26
+import {BottomTabBarProps} from '@react-navigation/bottom-tabs';
27
+import {NavigationState} from '@react-navigation/native';
28
+import {
29
+  PartialState,
30
+  Route,
31
+} from '@react-navigation/routers/lib/typescript/src/types';
32
+
33
+type RouteType = Route<string> & {
34
+  state?: NavigationState | PartialState<NavigationState>;
36 35
 };
37 36
 
38
-type PropsType = {
39
-  state: {
40
-    index: number;
41
-    routes: Array<RouteType>;
42
-  };
43
-  descriptors: {
44
-    [key: string]: {
45
-      options: {
46
-        tabBarLabel: string;
47
-        title: string;
48
-      };
49
-    };
50
-  };
51
-  navigation: StackNavigationProp<any>;
37
+interface PropsType extends BottomTabBarProps {
52 38
   theme: ReactNativePaper.Theme;
53
-};
39
+}
54 40
 
55 41
 type StateType = {
56 42
   translateY: any;
@@ -164,7 +150,7 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
164 150
           onLongPress={onLongPress}
165 151
           icon={this.getTabBarIcon(route, isFocused)}
166 152
           color={color}
167
-          label={label}
153
+          label={label as string}
168 154
           focused={isFocused}
169 155
           extraData={state.index > index}
170 156
           key={route.key}
@@ -193,9 +179,12 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
193 179
     if (isFocused) {
194 180
       const stackState = route.state;
195 181
       const stackRoute =
196
-        stackState != null ? stackState.routes[stackState.index] : null;
197
-      const params: {collapsible: Collapsible} | null =
198
-        stackRoute != null ? stackRoute.params : null;
182
+        stackState && stackState.index
183
+          ? stackState.routes[stackState.index]
184
+          : null;
185
+      const params: {collapsible: Collapsible} | null | undefined = stackRoute
186
+        ? (stackRoute.params as {collapsible: Collapsible})
187
+        : null;
199 188
       const collapsible = params != null ? params.collapsible : null;
200 189
       if (collapsible != null) {
201 190
         this.setState({

src/navigation/MainNavigator.js → src/navigation/MainNavigator.tsx View File

@@ -17,8 +17,6 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
24 22
 import i18n from 'i18n-js';
@@ -40,18 +38,63 @@ import ClubListScreen from '../screens/Amicale/Clubs/ClubListScreen';
40 38
 import ClubAboutScreen from '../screens/Amicale/Clubs/ClubAboutScreen';
41 39
 import ClubDisplayScreen from '../screens/Amicale/Clubs/ClubDisplayScreen';
42 40
 import {
43
-  createScreenCollapsibleStack,
41
+  CreateScreenCollapsibleStack,
44 42
   getWebsiteStack,
45 43
 } from '../utils/CollapsibleUtils';
46 44
 import BugReportScreen from '../screens/Other/FeedbackScreen';
47 45
 import WebsiteScreen from '../screens/Services/WebsiteScreen';
48
-import EquipmentScreen from '../screens/Amicale/Equipment/EquipmentListScreen';
46
+import EquipmentScreen, {
47
+  DeviceType,
48
+} from '../screens/Amicale/Equipment/EquipmentListScreen';
49 49
 import EquipmentLendScreen from '../screens/Amicale/Equipment/EquipmentRentScreen';
50 50
 import EquipmentConfirmScreen from '../screens/Amicale/Equipment/EquipmentConfirmScreen';
51 51
 import DashboardEditScreen from '../screens/Other/Settings/DashboardEditScreen';
52 52
 import GameStartScreen from '../screens/Game/screens/GameStartScreen';
53 53
 import ImageGalleryScreen from '../screens/Media/ImageGalleryScreen';
54 54
 
55
+export enum MainRoutes {
56
+  Main = 'main',
57
+  Gallery = 'gallery',
58
+  Settings = 'settings',
59
+  DashboardEdit = 'dashboard-edit',
60
+  About = 'about',
61
+  Dependencies = 'dependencies',
62
+  Debug = 'debug',
63
+  GameStart = 'game-start',
64
+  GameMain = 'game-main',
65
+  Login = 'login',
66
+  SelfMenu = 'self-menu',
67
+  Proximo = 'proximo',
68
+  ProximoList = 'proximo-list',
69
+  ProximoAbout = 'proximo-about',
70
+  Profile = 'profile',
71
+  ClubList = 'club-list',
72
+  ClubInformation = 'club-information',
73
+  ClubAbout = 'club-about',
74
+  EquipmentList = 'equipment-list',
75
+  EquipmentRent = 'equipment-rent',
76
+  EquipmentConfirm = 'equipment-confirm',
77
+  Vote = 'vote',
78
+  Feedback = 'feedback',
79
+}
80
+
81
+type DefaultParams = {[key in MainRoutes]: object | undefined};
82
+
83
+export interface FullParamsList extends DefaultParams {
84
+  login: {nextScreen: string};
85
+  'equipment-confirm': {
86
+    item?: DeviceType;
87
+    dates: [string, string];
88
+  };
89
+  'equipment-rent': {item?: DeviceType};
90
+  gallery: {images: Array<{url: string}>};
91
+}
92
+
93
+// Don't know why but TS is complaining without this
94
+// See: https://stackoverflow.com/questions/63652687/interface-does-not-satisfy-the-constraint-recordstring-object-undefined
95
+export type MainStackParamsList = FullParamsList &
96
+  Record<string, object | undefined>;
97
+
55 98
 const modalTransition =
56 99
   Platform.OS === 'ios'
57 100
     ? TransitionPresets.ModalPresentationIOS
@@ -63,19 +106,17 @@ const defaultScreenOptions = {
63 106
   ...TransitionPresets.SlideFromRightIOS,
64 107
 };
65 108
 
66
-const MainStack = createStackNavigator();
109
+const MainStack = createStackNavigator<MainStackParamsList>();
67 110
 
68
-function MainStackComponent(props: {
69
-  createTabNavigator: () => React.Node,
70
-}): React.Node {
111
+function MainStackComponent(props: {createTabNavigator: () => JSX.Element}) {
71 112
   const {createTabNavigator} = props;
72 113
   return (
73 114
     <MainStack.Navigator
74
-      initialRouteName="main"
115
+      initialRouteName={MainRoutes.Main}
75 116
       headerMode="screen"
76 117
       screenOptions={defaultScreenOptions}>
77 118
       <MainStack.Screen
78
-        name="main"
119
+        name={MainRoutes.Main}
79 120
         component={createTabNavigator}
80 121
         options={{
81 122
           headerShown: false,
@@ -83,62 +124,62 @@ function MainStackComponent(props: {
83 124
         }}
84 125
       />
85 126
       <MainStack.Screen
86
-        name="gallery"
127
+        name={MainRoutes.Gallery}
87 128
         component={ImageGalleryScreen}
88 129
         options={{
89 130
           headerShown: false,
90 131
           ...modalTransition,
91 132
         }}
92 133
       />
93
-      {createScreenCollapsibleStack(
94
-        'settings',
134
+      {CreateScreenCollapsibleStack(
135
+        MainRoutes.Settings,
95 136
         MainStack,
96 137
         SettingsScreen,
97 138
         i18n.t('screens.settings.title'),
98 139
       )}
99
-      {createScreenCollapsibleStack(
100
-        'dashboard-edit',
140
+      {CreateScreenCollapsibleStack(
141
+        MainRoutes.DashboardEdit,
101 142
         MainStack,
102 143
         DashboardEditScreen,
103 144
         i18n.t('screens.settings.dashboardEdit.title'),
104 145
       )}
105
-      {createScreenCollapsibleStack(
106
-        'about',
146
+      {CreateScreenCollapsibleStack(
147
+        MainRoutes.About,
107 148
         MainStack,
108 149
         AboutScreen,
109 150
         i18n.t('screens.about.title'),
110 151
       )}
111
-      {createScreenCollapsibleStack(
112
-        'dependencies',
152
+      {CreateScreenCollapsibleStack(
153
+        MainRoutes.Dependencies,
113 154
         MainStack,
114 155
         AboutDependenciesScreen,
115 156
         i18n.t('screens.about.libs'),
116 157
       )}
117
-      {createScreenCollapsibleStack(
118
-        'debug',
158
+      {CreateScreenCollapsibleStack(
159
+        MainRoutes.Debug,
119 160
         MainStack,
120 161
         DebugScreen,
121 162
         i18n.t('screens.about.debug'),
122 163
       )}
123 164
 
124
-      {createScreenCollapsibleStack(
125
-        'game-start',
165
+      {CreateScreenCollapsibleStack(
166
+        MainRoutes.GameStart,
126 167
         MainStack,
127 168
         GameStartScreen,
128 169
         i18n.t('screens.game.title'),
129 170
         true,
130
-        null,
171
+        undefined,
131 172
         'transparent',
132 173
       )}
133 174
       <MainStack.Screen
134
-        name="game-main"
175
+        name={MainRoutes.GameMain}
135 176
         component={GameMainScreen}
136 177
         options={{
137 178
           title: i18n.t('screens.game.title'),
138 179
         }}
139 180
       />
140
-      {createScreenCollapsibleStack(
141
-        'login',
181
+      {CreateScreenCollapsibleStack(
182
+        MainRoutes.Login,
142 183
         MainStack,
143 184
         LoginScreen,
144 185
         i18n.t('screens.login.title'),
@@ -148,26 +189,26 @@ function MainStackComponent(props: {
148 189
       )}
149 190
       {getWebsiteStack('website', MainStack, WebsiteScreen, '')}
150 191
 
151
-      {createScreenCollapsibleStack(
152
-        'self-menu',
192
+      {CreateScreenCollapsibleStack(
193
+        MainRoutes.SelfMenu,
153 194
         MainStack,
154 195
         SelfMenuScreen,
155 196
         i18n.t('screens.menu.title'),
156 197
       )}
157
-      {createScreenCollapsibleStack(
158
-        'proximo',
198
+      {CreateScreenCollapsibleStack(
199
+        MainRoutes.Proximo,
159 200
         MainStack,
160 201
         ProximoMainScreen,
161 202
         i18n.t('screens.proximo.title'),
162 203
       )}
163
-      {createScreenCollapsibleStack(
164
-        'proximo-list',
204
+      {CreateScreenCollapsibleStack(
205
+        MainRoutes.ProximoList,
165 206
         MainStack,
166 207
         ProximoListScreen,
167 208
         i18n.t('screens.proximo.articleList'),
168 209
       )}
169
-      {createScreenCollapsibleStack(
170
-        'proximo-about',
210
+      {CreateScreenCollapsibleStack(
211
+        MainRoutes.ProximoAbout,
171 212
         MainStack,
172 213
         ProximoAboutScreen,
173 214
         i18n.t('screens.proximo.title'),
@@ -175,60 +216,60 @@ function MainStackComponent(props: {
175 216
         {...modalTransition},
176 217
       )}
177 218
 
178
-      {createScreenCollapsibleStack(
179
-        'profile',
219
+      {CreateScreenCollapsibleStack(
220
+        MainRoutes.Profile,
180 221
         MainStack,
181 222
         ProfileScreen,
182 223
         i18n.t('screens.profile.title'),
183 224
       )}
184
-      {createScreenCollapsibleStack(
185
-        'club-list',
225
+      {CreateScreenCollapsibleStack(
226
+        MainRoutes.ClubList,
186 227
         MainStack,
187 228
         ClubListScreen,
188 229
         i18n.t('screens.clubs.title'),
189 230
       )}
190
-      {createScreenCollapsibleStack(
191
-        'club-information',
231
+      {CreateScreenCollapsibleStack(
232
+        MainRoutes.ClubInformation,
192 233
         MainStack,
193 234
         ClubDisplayScreen,
194 235
         i18n.t('screens.clubs.details'),
195 236
         true,
196 237
         {...modalTransition},
197 238
       )}
198
-      {createScreenCollapsibleStack(
199
-        'club-about',
239
+      {CreateScreenCollapsibleStack(
240
+        MainRoutes.ClubAbout,
200 241
         MainStack,
201 242
         ClubAboutScreen,
202 243
         i18n.t('screens.clubs.title'),
203 244
         true,
204 245
         {...modalTransition},
205 246
       )}
206
-      {createScreenCollapsibleStack(
207
-        'equipment-list',
247
+      {CreateScreenCollapsibleStack(
248
+        MainRoutes.EquipmentList,
208 249
         MainStack,
209 250
         EquipmentScreen,
210 251
         i18n.t('screens.equipment.title'),
211 252
       )}
212
-      {createScreenCollapsibleStack(
213
-        'equipment-rent',
253
+      {CreateScreenCollapsibleStack(
254
+        MainRoutes.EquipmentRent,
214 255
         MainStack,
215 256
         EquipmentLendScreen,
216 257
         i18n.t('screens.equipment.book'),
217 258
       )}
218
-      {createScreenCollapsibleStack(
219
-        'equipment-confirm',
259
+      {CreateScreenCollapsibleStack(
260
+        MainRoutes.EquipmentConfirm,
220 261
         MainStack,
221 262
         EquipmentConfirmScreen,
222 263
         i18n.t('screens.equipment.confirm'),
223 264
       )}
224
-      {createScreenCollapsibleStack(
225
-        'vote',
265
+      {CreateScreenCollapsibleStack(
266
+        MainRoutes.Vote,
226 267
         MainStack,
227 268
         VoteScreen,
228 269
         i18n.t('screens.vote.title'),
229 270
       )}
230
-      {createScreenCollapsibleStack(
231
-        'feedback',
271
+      {CreateScreenCollapsibleStack(
272
+        MainRoutes.Feedback,
232 273
         MainStack,
233 274
         BugReportScreen,
234 275
         i18n.t('screens.feedback.title'),
@@ -238,25 +279,10 @@ function MainStackComponent(props: {
238 279
 }
239 280
 
240 281
 type PropsType = {
241
-  defaultHomeRoute: string | null,
242
-  // eslint-disable-next-line flowtype/no-weak-types
243
-  defaultHomeData: {[key: string]: string},
282
+  defaultHomeRoute: string | null;
283
+  defaultHomeData: {[key: string]: string};
244 284
 };
245 285
 
246
-export default class MainNavigator extends React.Component<PropsType> {
247
-  createTabNavigator: () => React.Node;
248
-
249
-  constructor(props: PropsType) {
250
-    super(props);
251
-    this.createTabNavigator = (): React.Node => (
252
-      <TabNavigator
253
-        defaultHomeRoute={props.defaultHomeRoute}
254
-        defaultHomeData={props.defaultHomeData}
255
-      />
256
-    );
257
-  }
258
-
259
-  render(): React.Node {
260
-    return <MainStackComponent createTabNavigator={this.createTabNavigator} />;
261
-  }
286
+export default function MainNavigator(props: PropsType) {
287
+  return <MainStackComponent createTabNavigator={() => TabNavigator(props)} />;
262 288
 }

src/navigation/TabNavigator.js → src/navigation/TabNavigator.tsx View File

@@ -17,8 +17,6 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
24 22
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
@@ -44,7 +42,7 @@ import WebsitesHomeScreen from '../screens/Services/ServicesScreen';
44 42
 import ServicesSectionScreen from '../screens/Services/ServicesSectionScreen';
45 43
 import AmicaleContactScreen from '../screens/Amicale/AmicaleContactScreen';
46 44
 import {
47
-  createScreenCollapsibleStack,
45
+  CreateScreenCollapsibleStack,
48 46
   getWebsiteStack,
49 47
 } from '../utils/CollapsibleUtils';
50 48
 import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot';
@@ -62,25 +60,25 @@ const defaultScreenOptions = {
62 60
 
63 61
 const ServicesStack = createStackNavigator();
64 62
 
65
-function ServicesStackComponent(): React.Node {
63
+function ServicesStackComponent() {
66 64
   return (
67 65
     <ServicesStack.Navigator
68 66
       initialRouteName="index"
69 67
       headerMode="screen"
70 68
       screenOptions={defaultScreenOptions}>
71
-      {createScreenCollapsibleStack(
69
+      {CreateScreenCollapsibleStack(
72 70
         'index',
73 71
         ServicesStack,
74 72
         WebsitesHomeScreen,
75 73
         i18n.t('screens.services.title'),
76 74
       )}
77
-      {createScreenCollapsibleStack(
75
+      {CreateScreenCollapsibleStack(
78 76
         'services-section',
79 77
         ServicesStack,
80 78
         ServicesSectionScreen,
81 79
         'SECTION',
82 80
       )}
83
-      {createScreenCollapsibleStack(
81
+      {CreateScreenCollapsibleStack(
84 82
         'amicale-contact',
85 83
         ServicesStack,
86 84
         AmicaleContactScreen,
@@ -92,19 +90,19 @@ function ServicesStackComponent(): React.Node {
92 90
 
93 91
 const ProxiwashStack = createStackNavigator();
94 92
 
95
-function ProxiwashStackComponent(): React.Node {
93
+function ProxiwashStackComponent() {
96 94
   return (
97 95
     <ProxiwashStack.Navigator
98 96
       initialRouteName="index"
99 97
       headerMode="screen"
100 98
       screenOptions={defaultScreenOptions}>
101
-      {createScreenCollapsibleStack(
99
+      {CreateScreenCollapsibleStack(
102 100
         'index',
103 101
         ProxiwashStack,
104 102
         ProxiwashScreen,
105 103
         i18n.t('screens.proxiwash.title'),
106 104
       )}
107
-      {createScreenCollapsibleStack(
105
+      {CreateScreenCollapsibleStack(
108 106
         'proxiwash-about',
109 107
         ProxiwashStack,
110 108
         ProxiwashAboutScreen,
@@ -116,7 +114,7 @@ function ProxiwashStackComponent(): React.Node {
116 114
 
117 115
 const PlanningStack = createStackNavigator();
118 116
 
119
-function PlanningStackComponent(): React.Node {
117
+function PlanningStackComponent() {
120 118
   return (
121 119
     <PlanningStack.Navigator
122 120
       initialRouteName="index"
@@ -127,7 +125,7 @@ function PlanningStackComponent(): React.Node {
127 125
         component={PlanningScreen}
128 126
         options={{title: i18n.t('screens.planning.title')}}
129 127
       />
130
-      {createScreenCollapsibleStack(
128
+      {CreateScreenCollapsibleStack(
131 129
         'planning-information',
132 130
         PlanningStack,
133 131
         PlanningDisplayScreen,
@@ -142,10 +140,11 @@ const HomeStack = createStackNavigator();
142 140
 function HomeStackComponent(
143 141
   initialRoute: string | null,
144 142
   defaultData: {[key: string]: string},
145
-): React.Node {
143
+) {
146 144
   let params;
147
-  if (initialRoute != null)
145
+  if (initialRoute != null) {
148 146
     params = {data: defaultData, nextScreen: initialRoute, shouldOpen: true};
147
+  }
149 148
   const {colors} = useTheme();
150 149
   return (
151 150
     <HomeStack.Navigator
@@ -161,7 +160,7 @@ function HomeStackComponent(
161 160
             headerStyle: {
162 161
               backgroundColor: colors.surface,
163 162
             },
164
-            headerTitle: (): React.Node => (
163
+            headerTitle: () => (
165 164
               <View style={{flexDirection: 'row'}}>
166 165
                 <Mascot
167 166
                   style={{
@@ -203,19 +202,19 @@ function HomeStackComponent(
203 202
         options={{title: i18n.t('screens.scanner.title')}}
204 203
       />
205 204
 
206
-      {createScreenCollapsibleStack(
205
+      {CreateScreenCollapsibleStack(
207 206
         'club-information',
208 207
         HomeStack,
209 208
         ClubDisplayScreen,
210 209
         i18n.t('screens.clubs.details'),
211 210
       )}
212
-      {createScreenCollapsibleStack(
211
+      {CreateScreenCollapsibleStack(
213 212
         'feed-information',
214 213
         HomeStack,
215 214
         FeedItemScreen,
216 215
         i18n.t('screens.home.feed'),
217 216
       )}
218
-      {createScreenCollapsibleStack(
217
+      {CreateScreenCollapsibleStack(
219 218
         'planning-information',
220 219
         HomeStack,
221 220
         PlanningDisplayScreen,
@@ -227,7 +226,7 @@ function HomeStackComponent(
227 226
 
228 227
 const PlanexStack = createStackNavigator();
229 228
 
230
-function PlanexStackComponent(): React.Node {
229
+function PlanexStackComponent() {
231 230
   return (
232 231
     <PlanexStack.Navigator
233 232
       initialRouteName="index"
@@ -239,7 +238,7 @@ function PlanexStackComponent(): React.Node {
239 238
         PlanexScreen,
240 239
         i18n.t('screens.planex.title'),
241 240
       )}
242
-      {createScreenCollapsibleStack(
241
+      {CreateScreenCollapsibleStack(
243 242
         'group-select',
244 243
         PlanexStack,
245 244
         GroupSelectionScreen,
@@ -252,60 +251,49 @@ function PlanexStackComponent(): React.Node {
252 251
 const Tab = createBottomTabNavigator();
253 252
 
254 253
 type PropsType = {
255
-  defaultHomeRoute: string | null,
256
-  defaultHomeData: {[key: string]: string},
254
+  defaultHomeRoute: string | null;
255
+  defaultHomeData: {[key: string]: string};
257 256
 };
258 257
 
259
-export default class TabNavigator extends React.Component<PropsType> {
260
-  createHomeStackComponent: () => React.Node;
261
-
262
-  defaultRoute: string;
263
-
264
-  constructor(props: PropsType) {
265
-    super(props);
266
-    if (props.defaultHomeRoute != null) this.defaultRoute = 'home';
267
-    else
268
-      this.defaultRoute = AsyncStorageManager.getString(
269
-        AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
270
-      ).toLowerCase();
271
-    this.createHomeStackComponent = (): React.Node =>
272
-      HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData);
258
+export default function TabNavigator(props: PropsType) {
259
+  let defaultRoute = 'home';
260
+  if (!props.defaultHomeRoute) {
261
+    defaultRoute = AsyncStorageManager.getString(
262
+      AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
263
+    ).toLowerCase();
273 264
   }
265
+  const createHomeStackComponent = () =>
266
+    HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData);
274 267
 
275
-  render(): React.Node {
276
-    return (
277
-      <Tab.Navigator
278
-        initialRouteName={this.defaultRoute}
279
-        // eslint-disable-next-line react/jsx-props-no-spreading
280
-        tabBar={(props: {...}): React.Node => <CustomTabBar {...props} />}>
281
-        <Tab.Screen
282
-          name="services"
283
-          option
284
-          component={ServicesStackComponent}
285
-          options={{title: i18n.t('screens.services.title')}}
286
-        />
287
-        <Tab.Screen
288
-          name="proxiwash"
289
-          component={ProxiwashStackComponent}
290
-          options={{title: i18n.t('screens.proxiwash.title')}}
291
-        />
292
-        <Tab.Screen
293
-          name="home"
294
-          component={this.createHomeStackComponent}
295
-          options={{title: i18n.t('screens.home.title')}}
296
-        />
297
-        <Tab.Screen
298
-          name="planning"
299
-          component={PlanningStackComponent}
300
-          options={{title: i18n.t('screens.planning.title')}}
301
-        />
302
-
303
-        <Tab.Screen
304
-          name="planex"
305
-          component={PlanexStackComponent}
306
-          options={{title: i18n.t('screens.planex.title')}}
307
-        />
308
-      </Tab.Navigator>
309
-    );
310
-  }
268
+  return (
269
+    <Tab.Navigator
270
+      initialRouteName={defaultRoute}
271
+      tabBar={(tabProps) => <CustomTabBar {...tabProps} />}>
272
+      <Tab.Screen
273
+        name="services"
274
+        component={ServicesStackComponent}
275
+        options={{title: i18n.t('screens.services.title')}}
276
+      />
277
+      <Tab.Screen
278
+        name="proxiwash"
279
+        component={ProxiwashStackComponent}
280
+        options={{title: i18n.t('screens.proxiwash.title')}}
281
+      />
282
+      <Tab.Screen
283
+        name="home"
284
+        component={createHomeStackComponent}
285
+        options={{title: i18n.t('screens.home.title')}}
286
+      />
287
+      <Tab.Screen
288
+        name="planning"
289
+        component={PlanningStackComponent}
290
+        options={{title: i18n.t('screens.planning.title')}}
291
+      />
292
+      <Tab.Screen
293
+        name="planex"
294
+        component={PlanexStackComponent}
295
+        options={{title: i18n.t('screens.planex.title')}}
296
+      />
297
+    </Tab.Navigator>
298
+  );
311 299
 }

+ 2
- 2
src/screens/About/AboutDependenciesScreen.tsx View File

@@ -50,11 +50,11 @@ const LIST_ITEM_HEIGHT = 64;
50 50
 /**
51 51
  * Class defining a screen showing the list of libraries used by the app, taken from package.json
52 52
  */
53
-export default class AboutDependenciesScreen extends React.Component<null> {
53
+export default class AboutDependenciesScreen extends React.Component<{}> {
54 54
   data: Array<ListItemType>;
55 55
 
56 56
   constructor() {
57
-    super(null);
57
+    super({});
58 58
     this.data = generateListFromObject(packageJson.dependencies);
59 59
   }
60 60
 

+ 2
- 2
src/screens/Amicale/AmicaleContactScreen.tsx View File

@@ -34,12 +34,12 @@ type DatasetItemType = {
34 34
 /**
35 35
  * Class defining a planning event information page.
36 36
  */
37
-class AmicaleContactScreen extends React.Component<null> {
37
+class AmicaleContactScreen extends React.Component<{}> {
38 38
   // Dataset containing information about contacts
39 39
   CONTACT_DATASET: Array<DatasetItemType>;
40 40
 
41 41
   constructor() {
42
-    super(null);
42
+    super({});
43 43
     this.CONTACT_DATASET = [
44 44
       {
45 45
         name: i18n.t('screens.amicaleAbout.roles.interSchools'),

+ 3
- 3
src/utils/CollapsibleUtils.tsx View File

@@ -21,7 +21,7 @@ import * as React from 'react';
21 21
 import {useTheme} from 'react-native-paper';
22 22
 import {createCollapsibleStack} from 'react-navigation-collapsible';
23 23
 import StackNavigator, {StackNavigationOptions} from '@react-navigation/stack';
24
-import {StackNavigationState} from '@react-navigation/native';
24
+import {StackNavigationState, TypedNavigator} from '@react-navigation/native';
25 25
 import {StackNavigationEventMap} from '@react-navigation/stack/lib/typescript/src/types';
26 26
 
27 27
 type StackNavigatorType = import('@react-navigation/native').TypedNavigator<
@@ -50,7 +50,7 @@ type StackNavigatorType = import('@react-navigation/native').TypedNavigator<
50 50
  */
51 51
 export function CreateScreenCollapsibleStack(
52 52
   name: string,
53
-  Stack: StackNavigatorType,
53
+  Stack: TypedNavigator<any, any, any, any, any>,
54 54
   component: React.ComponentType<any>,
55 55
   title: string,
56 56
   useNativeDriver: boolean = true,
@@ -91,7 +91,7 @@ export function CreateScreenCollapsibleStack(
91 91
  */
92 92
 export function getWebsiteStack(
93 93
   name: string,
94
-  Stack: StackNavigatorType,
94
+  Stack: TypedNavigator<any, any, any, any, any>,
95 95
   component: React.ComponentType<any>,
96 96
   title: string,
97 97
 ) {

Loading…
Cancel
Save