Update navigation components to use TypeScript

This commit is contained in:
Arnaud Vergnet 2020-09-22 21:49:39 +02:00
parent 300558ac56
commit b8e7272d2c
6 changed files with 182 additions and 179 deletions

View file

@ -21,36 +21,22 @@ import * as React from 'react';
import {Animated} from 'react-native'; import {Animated} from 'react-native';
import {withTheme} from 'react-native-paper'; import {withTheme} from 'react-native-paper';
import {Collapsible} from 'react-navigation-collapsible'; import {Collapsible} from 'react-navigation-collapsible';
import {StackNavigationProp} from '@react-navigation/stack';
import TabIcon from './TabIcon'; import TabIcon from './TabIcon';
import TabHomeIcon from './TabHomeIcon'; import TabHomeIcon from './TabHomeIcon';
import {BottomTabBarProps} from '@react-navigation/bottom-tabs';
import {NavigationState} from '@react-navigation/native';
import {
PartialState,
Route,
} from '@react-navigation/routers/lib/typescript/src/types';
type RouteType = { type RouteType = Route<string> & {
name: string; state?: NavigationState | PartialState<NavigationState>;
key: string;
params: {collapsible: Collapsible};
state: {
index: number;
routes: Array<RouteType>;
};
}; };
type PropsType = { interface PropsType extends BottomTabBarProps {
state: {
index: number;
routes: Array<RouteType>;
};
descriptors: {
[key: string]: {
options: {
tabBarLabel: string;
title: string;
};
};
};
navigation: StackNavigationProp<any>;
theme: ReactNativePaper.Theme; theme: ReactNativePaper.Theme;
}; }
type StateType = { type StateType = {
translateY: any; translateY: any;
@ -164,7 +150,7 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
onLongPress={onLongPress} onLongPress={onLongPress}
icon={this.getTabBarIcon(route, isFocused)} icon={this.getTabBarIcon(route, isFocused)}
color={color} color={color}
label={label} label={label as string}
focused={isFocused} focused={isFocused}
extraData={state.index > index} extraData={state.index > index}
key={route.key} key={route.key}
@ -193,9 +179,12 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
if (isFocused) { if (isFocused) {
const stackState = route.state; const stackState = route.state;
const stackRoute = const stackRoute =
stackState != null ? stackState.routes[stackState.index] : null; stackState && stackState.index
const params: {collapsible: Collapsible} | null = ? stackState.routes[stackState.index]
stackRoute != null ? stackRoute.params : null; : null;
const params: {collapsible: Collapsible} | null | undefined = stackRoute
? (stackRoute.params as {collapsible: Collapsible})
: null;
const collapsible = params != null ? params.collapsible : null; const collapsible = params != null ? params.collapsible : null;
if (collapsible != null) { if (collapsible != null) {
this.setState({ this.setState({

View file

@ -17,8 +17,6 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/ */
// @flow
import * as React from 'react'; import * as React from 'react';
import {createStackNavigator, TransitionPresets} from '@react-navigation/stack'; import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
@ -40,18 +38,63 @@ import ClubListScreen from '../screens/Amicale/Clubs/ClubListScreen';
import ClubAboutScreen from '../screens/Amicale/Clubs/ClubAboutScreen'; import ClubAboutScreen from '../screens/Amicale/Clubs/ClubAboutScreen';
import ClubDisplayScreen from '../screens/Amicale/Clubs/ClubDisplayScreen'; import ClubDisplayScreen from '../screens/Amicale/Clubs/ClubDisplayScreen';
import { import {
createScreenCollapsibleStack, CreateScreenCollapsibleStack,
getWebsiteStack, getWebsiteStack,
} from '../utils/CollapsibleUtils'; } from '../utils/CollapsibleUtils';
import BugReportScreen from '../screens/Other/FeedbackScreen'; import BugReportScreen from '../screens/Other/FeedbackScreen';
import WebsiteScreen from '../screens/Services/WebsiteScreen'; import WebsiteScreen from '../screens/Services/WebsiteScreen';
import EquipmentScreen from '../screens/Amicale/Equipment/EquipmentListScreen'; import EquipmentScreen, {
DeviceType,
} from '../screens/Amicale/Equipment/EquipmentListScreen';
import EquipmentLendScreen from '../screens/Amicale/Equipment/EquipmentRentScreen'; import EquipmentLendScreen from '../screens/Amicale/Equipment/EquipmentRentScreen';
import EquipmentConfirmScreen from '../screens/Amicale/Equipment/EquipmentConfirmScreen'; import EquipmentConfirmScreen from '../screens/Amicale/Equipment/EquipmentConfirmScreen';
import DashboardEditScreen from '../screens/Other/Settings/DashboardEditScreen'; import DashboardEditScreen from '../screens/Other/Settings/DashboardEditScreen';
import GameStartScreen from '../screens/Game/screens/GameStartScreen'; import GameStartScreen from '../screens/Game/screens/GameStartScreen';
import ImageGalleryScreen from '../screens/Media/ImageGalleryScreen'; import ImageGalleryScreen from '../screens/Media/ImageGalleryScreen';
export enum MainRoutes {
Main = 'main',
Gallery = 'gallery',
Settings = 'settings',
DashboardEdit = 'dashboard-edit',
About = 'about',
Dependencies = 'dependencies',
Debug = 'debug',
GameStart = 'game-start',
GameMain = 'game-main',
Login = 'login',
SelfMenu = 'self-menu',
Proximo = 'proximo',
ProximoList = 'proximo-list',
ProximoAbout = 'proximo-about',
Profile = 'profile',
ClubList = 'club-list',
ClubInformation = 'club-information',
ClubAbout = 'club-about',
EquipmentList = 'equipment-list',
EquipmentRent = 'equipment-rent',
EquipmentConfirm = 'equipment-confirm',
Vote = 'vote',
Feedback = 'feedback',
}
type DefaultParams = {[key in MainRoutes]: object | undefined};
export interface FullParamsList extends DefaultParams {
login: {nextScreen: string};
'equipment-confirm': {
item?: DeviceType;
dates: [string, string];
};
'equipment-rent': {item?: DeviceType};
gallery: {images: Array<{url: string}>};
}
// Don't know why but TS is complaining without this
// See: https://stackoverflow.com/questions/63652687/interface-does-not-satisfy-the-constraint-recordstring-object-undefined
export type MainStackParamsList = FullParamsList &
Record<string, object | undefined>;
const modalTransition = const modalTransition =
Platform.OS === 'ios' Platform.OS === 'ios'
? TransitionPresets.ModalPresentationIOS ? TransitionPresets.ModalPresentationIOS
@ -63,19 +106,17 @@ const defaultScreenOptions = {
...TransitionPresets.SlideFromRightIOS, ...TransitionPresets.SlideFromRightIOS,
}; };
const MainStack = createStackNavigator(); const MainStack = createStackNavigator<MainStackParamsList>();
function MainStackComponent(props: { function MainStackComponent(props: {createTabNavigator: () => JSX.Element}) {
createTabNavigator: () => React.Node,
}): React.Node {
const {createTabNavigator} = props; const {createTabNavigator} = props;
return ( return (
<MainStack.Navigator <MainStack.Navigator
initialRouteName="main" initialRouteName={MainRoutes.Main}
headerMode="screen" headerMode="screen"
screenOptions={defaultScreenOptions}> screenOptions={defaultScreenOptions}>
<MainStack.Screen <MainStack.Screen
name="main" name={MainRoutes.Main}
component={createTabNavigator} component={createTabNavigator}
options={{ options={{
headerShown: false, headerShown: false,
@ -83,62 +124,62 @@ function MainStackComponent(props: {
}} }}
/> />
<MainStack.Screen <MainStack.Screen
name="gallery" name={MainRoutes.Gallery}
component={ImageGalleryScreen} component={ImageGalleryScreen}
options={{ options={{
headerShown: false, headerShown: false,
...modalTransition, ...modalTransition,
}} }}
/> />
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'settings', MainRoutes.Settings,
MainStack, MainStack,
SettingsScreen, SettingsScreen,
i18n.t('screens.settings.title'), i18n.t('screens.settings.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'dashboard-edit', MainRoutes.DashboardEdit,
MainStack, MainStack,
DashboardEditScreen, DashboardEditScreen,
i18n.t('screens.settings.dashboardEdit.title'), i18n.t('screens.settings.dashboardEdit.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'about', MainRoutes.About,
MainStack, MainStack,
AboutScreen, AboutScreen,
i18n.t('screens.about.title'), i18n.t('screens.about.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'dependencies', MainRoutes.Dependencies,
MainStack, MainStack,
AboutDependenciesScreen, AboutDependenciesScreen,
i18n.t('screens.about.libs'), i18n.t('screens.about.libs'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'debug', MainRoutes.Debug,
MainStack, MainStack,
DebugScreen, DebugScreen,
i18n.t('screens.about.debug'), i18n.t('screens.about.debug'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'game-start', MainRoutes.GameStart,
MainStack, MainStack,
GameStartScreen, GameStartScreen,
i18n.t('screens.game.title'), i18n.t('screens.game.title'),
true, true,
null, undefined,
'transparent', 'transparent',
)} )}
<MainStack.Screen <MainStack.Screen
name="game-main" name={MainRoutes.GameMain}
component={GameMainScreen} component={GameMainScreen}
options={{ options={{
title: i18n.t('screens.game.title'), title: i18n.t('screens.game.title'),
}} }}
/> />
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'login', MainRoutes.Login,
MainStack, MainStack,
LoginScreen, LoginScreen,
i18n.t('screens.login.title'), i18n.t('screens.login.title'),
@ -148,26 +189,26 @@ function MainStackComponent(props: {
)} )}
{getWebsiteStack('website', MainStack, WebsiteScreen, '')} {getWebsiteStack('website', MainStack, WebsiteScreen, '')}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'self-menu', MainRoutes.SelfMenu,
MainStack, MainStack,
SelfMenuScreen, SelfMenuScreen,
i18n.t('screens.menu.title'), i18n.t('screens.menu.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'proximo', MainRoutes.Proximo,
MainStack, MainStack,
ProximoMainScreen, ProximoMainScreen,
i18n.t('screens.proximo.title'), i18n.t('screens.proximo.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'proximo-list', MainRoutes.ProximoList,
MainStack, MainStack,
ProximoListScreen, ProximoListScreen,
i18n.t('screens.proximo.articleList'), i18n.t('screens.proximo.articleList'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'proximo-about', MainRoutes.ProximoAbout,
MainStack, MainStack,
ProximoAboutScreen, ProximoAboutScreen,
i18n.t('screens.proximo.title'), i18n.t('screens.proximo.title'),
@ -175,60 +216,60 @@ function MainStackComponent(props: {
{...modalTransition}, {...modalTransition},
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'profile', MainRoutes.Profile,
MainStack, MainStack,
ProfileScreen, ProfileScreen,
i18n.t('screens.profile.title'), i18n.t('screens.profile.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'club-list', MainRoutes.ClubList,
MainStack, MainStack,
ClubListScreen, ClubListScreen,
i18n.t('screens.clubs.title'), i18n.t('screens.clubs.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'club-information', MainRoutes.ClubInformation,
MainStack, MainStack,
ClubDisplayScreen, ClubDisplayScreen,
i18n.t('screens.clubs.details'), i18n.t('screens.clubs.details'),
true, true,
{...modalTransition}, {...modalTransition},
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'club-about', MainRoutes.ClubAbout,
MainStack, MainStack,
ClubAboutScreen, ClubAboutScreen,
i18n.t('screens.clubs.title'), i18n.t('screens.clubs.title'),
true, true,
{...modalTransition}, {...modalTransition},
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'equipment-list', MainRoutes.EquipmentList,
MainStack, MainStack,
EquipmentScreen, EquipmentScreen,
i18n.t('screens.equipment.title'), i18n.t('screens.equipment.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'equipment-rent', MainRoutes.EquipmentRent,
MainStack, MainStack,
EquipmentLendScreen, EquipmentLendScreen,
i18n.t('screens.equipment.book'), i18n.t('screens.equipment.book'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'equipment-confirm', MainRoutes.EquipmentConfirm,
MainStack, MainStack,
EquipmentConfirmScreen, EquipmentConfirmScreen,
i18n.t('screens.equipment.confirm'), i18n.t('screens.equipment.confirm'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'vote', MainRoutes.Vote,
MainStack, MainStack,
VoteScreen, VoteScreen,
i18n.t('screens.vote.title'), i18n.t('screens.vote.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'feedback', MainRoutes.Feedback,
MainStack, MainStack,
BugReportScreen, BugReportScreen,
i18n.t('screens.feedback.title'), i18n.t('screens.feedback.title'),
@ -238,25 +279,10 @@ function MainStackComponent(props: {
} }
type PropsType = { type PropsType = {
defaultHomeRoute: string | null, defaultHomeRoute: string | null;
// eslint-disable-next-line flowtype/no-weak-types defaultHomeData: {[key: string]: string};
defaultHomeData: {[key: string]: string},
}; };
export default class MainNavigator extends React.Component<PropsType> { export default function MainNavigator(props: PropsType) {
createTabNavigator: () => React.Node; return <MainStackComponent createTabNavigator={() => TabNavigator(props)} />;
constructor(props: PropsType) {
super(props);
this.createTabNavigator = (): React.Node => (
<TabNavigator
defaultHomeRoute={props.defaultHomeRoute}
defaultHomeData={props.defaultHomeData}
/>
);
}
render(): React.Node {
return <MainStackComponent createTabNavigator={this.createTabNavigator} />;
}
} }

View file

@ -17,8 +17,6 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/ */
// @flow
import * as React from 'react'; import * as React from 'react';
import {createStackNavigator, TransitionPresets} from '@react-navigation/stack'; import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
@ -44,7 +42,7 @@ import WebsitesHomeScreen from '../screens/Services/ServicesScreen';
import ServicesSectionScreen from '../screens/Services/ServicesSectionScreen'; import ServicesSectionScreen from '../screens/Services/ServicesSectionScreen';
import AmicaleContactScreen from '../screens/Amicale/AmicaleContactScreen'; import AmicaleContactScreen from '../screens/Amicale/AmicaleContactScreen';
import { import {
createScreenCollapsibleStack, CreateScreenCollapsibleStack,
getWebsiteStack, getWebsiteStack,
} from '../utils/CollapsibleUtils'; } from '../utils/CollapsibleUtils';
import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot'; import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot';
@ -62,25 +60,25 @@ const defaultScreenOptions = {
const ServicesStack = createStackNavigator(); const ServicesStack = createStackNavigator();
function ServicesStackComponent(): React.Node { function ServicesStackComponent() {
return ( return (
<ServicesStack.Navigator <ServicesStack.Navigator
initialRouteName="index" initialRouteName="index"
headerMode="screen" headerMode="screen"
screenOptions={defaultScreenOptions}> screenOptions={defaultScreenOptions}>
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'index', 'index',
ServicesStack, ServicesStack,
WebsitesHomeScreen, WebsitesHomeScreen,
i18n.t('screens.services.title'), i18n.t('screens.services.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'services-section', 'services-section',
ServicesStack, ServicesStack,
ServicesSectionScreen, ServicesSectionScreen,
'SECTION', 'SECTION',
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'amicale-contact', 'amicale-contact',
ServicesStack, ServicesStack,
AmicaleContactScreen, AmicaleContactScreen,
@ -92,19 +90,19 @@ function ServicesStackComponent(): React.Node {
const ProxiwashStack = createStackNavigator(); const ProxiwashStack = createStackNavigator();
function ProxiwashStackComponent(): React.Node { function ProxiwashStackComponent() {
return ( return (
<ProxiwashStack.Navigator <ProxiwashStack.Navigator
initialRouteName="index" initialRouteName="index"
headerMode="screen" headerMode="screen"
screenOptions={defaultScreenOptions}> screenOptions={defaultScreenOptions}>
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'index', 'index',
ProxiwashStack, ProxiwashStack,
ProxiwashScreen, ProxiwashScreen,
i18n.t('screens.proxiwash.title'), i18n.t('screens.proxiwash.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'proxiwash-about', 'proxiwash-about',
ProxiwashStack, ProxiwashStack,
ProxiwashAboutScreen, ProxiwashAboutScreen,
@ -116,7 +114,7 @@ function ProxiwashStackComponent(): React.Node {
const PlanningStack = createStackNavigator(); const PlanningStack = createStackNavigator();
function PlanningStackComponent(): React.Node { function PlanningStackComponent() {
return ( return (
<PlanningStack.Navigator <PlanningStack.Navigator
initialRouteName="index" initialRouteName="index"
@ -127,7 +125,7 @@ function PlanningStackComponent(): React.Node {
component={PlanningScreen} component={PlanningScreen}
options={{title: i18n.t('screens.planning.title')}} options={{title: i18n.t('screens.planning.title')}}
/> />
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'planning-information', 'planning-information',
PlanningStack, PlanningStack,
PlanningDisplayScreen, PlanningDisplayScreen,
@ -142,10 +140,11 @@ const HomeStack = createStackNavigator();
function HomeStackComponent( function HomeStackComponent(
initialRoute: string | null, initialRoute: string | null,
defaultData: {[key: string]: string}, defaultData: {[key: string]: string},
): React.Node { ) {
let params; let params;
if (initialRoute != null) if (initialRoute != null) {
params = {data: defaultData, nextScreen: initialRoute, shouldOpen: true}; params = {data: defaultData, nextScreen: initialRoute, shouldOpen: true};
}
const {colors} = useTheme(); const {colors} = useTheme();
return ( return (
<HomeStack.Navigator <HomeStack.Navigator
@ -161,7 +160,7 @@ function HomeStackComponent(
headerStyle: { headerStyle: {
backgroundColor: colors.surface, backgroundColor: colors.surface,
}, },
headerTitle: (): React.Node => ( headerTitle: () => (
<View style={{flexDirection: 'row'}}> <View style={{flexDirection: 'row'}}>
<Mascot <Mascot
style={{ style={{
@ -203,19 +202,19 @@ function HomeStackComponent(
options={{title: i18n.t('screens.scanner.title')}} options={{title: i18n.t('screens.scanner.title')}}
/> />
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'club-information', 'club-information',
HomeStack, HomeStack,
ClubDisplayScreen, ClubDisplayScreen,
i18n.t('screens.clubs.details'), i18n.t('screens.clubs.details'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'feed-information', 'feed-information',
HomeStack, HomeStack,
FeedItemScreen, FeedItemScreen,
i18n.t('screens.home.feed'), i18n.t('screens.home.feed'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'planning-information', 'planning-information',
HomeStack, HomeStack,
PlanningDisplayScreen, PlanningDisplayScreen,
@ -227,7 +226,7 @@ function HomeStackComponent(
const PlanexStack = createStackNavigator(); const PlanexStack = createStackNavigator();
function PlanexStackComponent(): React.Node { function PlanexStackComponent() {
return ( return (
<PlanexStack.Navigator <PlanexStack.Navigator
initialRouteName="index" initialRouteName="index"
@ -239,7 +238,7 @@ function PlanexStackComponent(): React.Node {
PlanexScreen, PlanexScreen,
i18n.t('screens.planex.title'), i18n.t('screens.planex.title'),
)} )}
{createScreenCollapsibleStack( {CreateScreenCollapsibleStack(
'group-select', 'group-select',
PlanexStack, PlanexStack,
GroupSelectionScreen, GroupSelectionScreen,
@ -252,60 +251,49 @@ function PlanexStackComponent(): React.Node {
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
type PropsType = { type PropsType = {
defaultHomeRoute: string | null, defaultHomeRoute: string | null;
defaultHomeData: {[key: string]: string}, defaultHomeData: {[key: string]: string};
}; };
export default class TabNavigator extends React.Component<PropsType> { export default function TabNavigator(props: PropsType) {
createHomeStackComponent: () => React.Node; let defaultRoute = 'home';
if (!props.defaultHomeRoute) {
defaultRoute: string; defaultRoute = AsyncStorageManager.getString(
AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
constructor(props: PropsType) { ).toLowerCase();
super(props);
if (props.defaultHomeRoute != null) this.defaultRoute = 'home';
else
this.defaultRoute = AsyncStorageManager.getString(
AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
).toLowerCase();
this.createHomeStackComponent = (): React.Node =>
HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData);
} }
const createHomeStackComponent = () =>
HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData);
render(): React.Node { return (
return ( <Tab.Navigator
<Tab.Navigator initialRouteName={defaultRoute}
initialRouteName={this.defaultRoute} tabBar={(tabProps) => <CustomTabBar {...tabProps} />}>
// eslint-disable-next-line react/jsx-props-no-spreading <Tab.Screen
tabBar={(props: {...}): React.Node => <CustomTabBar {...props} />}> name="services"
<Tab.Screen component={ServicesStackComponent}
name="services" options={{title: i18n.t('screens.services.title')}}
option />
component={ServicesStackComponent} <Tab.Screen
options={{title: i18n.t('screens.services.title')}} name="proxiwash"
/> component={ProxiwashStackComponent}
<Tab.Screen options={{title: i18n.t('screens.proxiwash.title')}}
name="proxiwash" />
component={ProxiwashStackComponent} <Tab.Screen
options={{title: i18n.t('screens.proxiwash.title')}} name="home"
/> component={createHomeStackComponent}
<Tab.Screen options={{title: i18n.t('screens.home.title')}}
name="home" />
component={this.createHomeStackComponent} <Tab.Screen
options={{title: i18n.t('screens.home.title')}} name="planning"
/> component={PlanningStackComponent}
<Tab.Screen options={{title: i18n.t('screens.planning.title')}}
name="planning" />
component={PlanningStackComponent} <Tab.Screen
options={{title: i18n.t('screens.planning.title')}} name="planex"
/> component={PlanexStackComponent}
options={{title: i18n.t('screens.planex.title')}}
<Tab.Screen />
name="planex" </Tab.Navigator>
component={PlanexStackComponent} );
options={{title: i18n.t('screens.planex.title')}}
/>
</Tab.Navigator>
);
}
} }

View file

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

View file

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

View file

@ -21,7 +21,7 @@ import * as React from 'react';
import {useTheme} from 'react-native-paper'; import {useTheme} from 'react-native-paper';
import {createCollapsibleStack} from 'react-navigation-collapsible'; import {createCollapsibleStack} from 'react-navigation-collapsible';
import StackNavigator, {StackNavigationOptions} from '@react-navigation/stack'; import StackNavigator, {StackNavigationOptions} from '@react-navigation/stack';
import {StackNavigationState} from '@react-navigation/native'; import {StackNavigationState, TypedNavigator} from '@react-navigation/native';
import {StackNavigationEventMap} from '@react-navigation/stack/lib/typescript/src/types'; import {StackNavigationEventMap} from '@react-navigation/stack/lib/typescript/src/types';
type StackNavigatorType = import('@react-navigation/native').TypedNavigator< type StackNavigatorType = import('@react-navigation/native').TypedNavigator<
@ -50,7 +50,7 @@ type StackNavigatorType = import('@react-navigation/native').TypedNavigator<
*/ */
export function CreateScreenCollapsibleStack( export function CreateScreenCollapsibleStack(
name: string, name: string,
Stack: StackNavigatorType, Stack: TypedNavigator<any, any, any, any, any>,
component: React.ComponentType<any>, component: React.ComponentType<any>,
title: string, title: string,
useNativeDriver: boolean = true, useNativeDriver: boolean = true,
@ -91,7 +91,7 @@ export function CreateScreenCollapsibleStack(
*/ */
export function getWebsiteStack( export function getWebsiteStack(
name: string, name: string,
Stack: StackNavigatorType, Stack: TypedNavigator<any, any, any, any, any>,
component: React.ComponentType<any>, component: React.ComponentType<any>,
title: string, title: string,
) { ) {