Improve navigators to match linter

This commit is contained in:
Arnaud Vergnet 2020-08-05 00:16:05 +02:00
parent 7107a8eadf
commit 3e4f2f4ac1
2 changed files with 465 additions and 417 deletions

View file

@ -1,204 +1,231 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
import i18n from 'i18n-js';
import {Platform} from 'react-native';
import SettingsScreen from '../screens/Other/Settings/SettingsScreen'; import SettingsScreen from '../screens/Other/Settings/SettingsScreen';
import AboutScreen from '../screens/About/AboutScreen'; import AboutScreen from '../screens/About/AboutScreen';
import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen'; import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
import DebugScreen from '../screens/About/DebugScreen'; import DebugScreen from '../screens/About/DebugScreen';
import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; import TabNavigator from './TabNavigator';
import i18n from "i18n-js"; import GameMainScreen from '../screens/Game/screens/GameMainScreen';
import TabNavigator from "./TabNavigator"; import VoteScreen from '../screens/Amicale/VoteScreen';
import GameMainScreen from "../screens/Game/screens/GameMainScreen"; import LoginScreen from '../screens/Amicale/LoginScreen';
import VoteScreen from "../screens/Amicale/VoteScreen"; import SelfMenuScreen from '../screens/Services/SelfMenuScreen';
import LoginScreen from "../screens/Amicale/LoginScreen"; import ProximoMainScreen from '../screens/Services/Proximo/ProximoMainScreen';
import {Platform} from "react-native"; import ProximoListScreen from '../screens/Services/Proximo/ProximoListScreen';
import SelfMenuScreen from "../screens/Services/SelfMenuScreen"; import ProximoAboutScreen from '../screens/Services/Proximo/ProximoAboutScreen';
import ProximoMainScreen from "../screens/Services/Proximo/ProximoMainScreen"; import ProfileScreen from '../screens/Amicale/ProfileScreen';
import ProximoListScreen from "../screens/Services/Proximo/ProximoListScreen"; import ClubListScreen from '../screens/Amicale/Clubs/ClubListScreen';
import ProximoAboutScreen from "../screens/Services/Proximo/ProximoAboutScreen"; import ClubAboutScreen from '../screens/Amicale/Clubs/ClubAboutScreen';
import ProfileScreen from "../screens/Amicale/ProfileScreen"; import ClubDisplayScreen from '../screens/Amicale/Clubs/ClubDisplayScreen';
import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen"; import {
import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen"; createScreenCollapsibleStack,
import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen"; getWebsiteStack,
import {createScreenCollapsibleStack, 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 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';
const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS; const modalTransition =
Platform.OS === 'ios'
? TransitionPresets.ModalPresentationIOS
: TransitionPresets.ModalSlideFromBottomIOS;
const defaultScreenOptions = { const defaultScreenOptions = {
gestureEnabled: true, gestureEnabled: true,
cardOverlayEnabled: true, cardOverlayEnabled: true,
...TransitionPresets.SlideFromRightIOS, ...TransitionPresets.SlideFromRightIOS,
}; };
const MainStack = createStackNavigator(); const MainStack = createStackNavigator();
function MainStackComponent(props: { createTabNavigator: () => React.Node }) { function MainStackComponent(props: {
return ( createTabNavigator: () => React.Node,
<MainStack.Navigator }): React.Node {
initialRouteName={'main'} const {createTabNavigator} = props;
headerMode={'screen'} return (
screenOptions={defaultScreenOptions} <MainStack.Navigator
> initialRouteName="main"
<MainStack.Screen headerMode="screen"
name="main" screenOptions={defaultScreenOptions}>
component={props.createTabNavigator} <MainStack.Screen
options={{ name="main"
headerShown: false, component={createTabNavigator}
title: i18n.t('screens.home.title'), options={{
}} headerShown: false,
/> title: i18n.t('screens.home.title'),
{createScreenCollapsibleStack( }}
"settings", />
MainStack, {createScreenCollapsibleStack(
SettingsScreen, 'settings',
i18n.t('screens.settings.title'))} MainStack,
{createScreenCollapsibleStack( SettingsScreen,
"dashboard-edit", i18n.t('screens.settings.title'),
MainStack, )}
DashboardEditScreen, {createScreenCollapsibleStack(
i18n.t('screens.settings.dashboardEdit.title'))} 'dashboard-edit',
{createScreenCollapsibleStack( MainStack,
"about", DashboardEditScreen,
MainStack, i18n.t('screens.settings.dashboardEdit.title'),
AboutScreen, )}
i18n.t('screens.about.title'))} {createScreenCollapsibleStack(
{createScreenCollapsibleStack( 'about',
"dependencies", MainStack,
MainStack, AboutScreen,
AboutDependenciesScreen, i18n.t('screens.about.title'),
i18n.t('screens.about.libs'))} )}
{createScreenCollapsibleStack( {createScreenCollapsibleStack(
"debug", 'dependencies',
MainStack, MainStack,
DebugScreen, AboutDependenciesScreen,
i18n.t('screens.about.debug'))} i18n.t('screens.about.libs'),
)}
{createScreenCollapsibleStack(
'debug',
MainStack,
DebugScreen,
i18n.t('screens.about.debug'),
)}
{createScreenCollapsibleStack( {createScreenCollapsibleStack(
"game-start", 'game-start',
MainStack, MainStack,
GameStartScreen, GameStartScreen,
i18n.t('screens.game.title'))} i18n.t('screens.game.title'),
<MainStack.Screen )}
name="game-main" <MainStack.Screen
component={GameMainScreen} name="game-main"
options={{ component={GameMainScreen}
title: i18n.t("screens.game.title"), options={{
}} title: i18n.t('screens.game.title'),
/> }}
{createScreenCollapsibleStack( />
"login", {createScreenCollapsibleStack(
MainStack, 'login',
LoginScreen, MainStack,
i18n.t('screens.login.title'), LoginScreen,
true, i18n.t('screens.login.title'),
{headerTintColor: "#fff"}, true,
'transparent')} {headerTintColor: '#fff'},
{getWebsiteStack("website", MainStack, WebsiteScreen, "")} 'transparent',
)}
{getWebsiteStack('website', MainStack, WebsiteScreen, '')}
{createScreenCollapsibleStack(
'self-menu',
MainStack,
SelfMenuScreen,
i18n.t('screens.menu.title'),
)}
{createScreenCollapsibleStack(
'proximo',
MainStack,
ProximoMainScreen,
i18n.t('screens.proximo.title'),
)}
{createScreenCollapsibleStack(
'proximo-list',
MainStack,
ProximoListScreen,
i18n.t('screens.proximo.articleList'),
)}
{createScreenCollapsibleStack(
'proximo-about',
MainStack,
ProximoAboutScreen,
i18n.t('screens.proximo.title'),
true,
{...modalTransition},
)}
{createScreenCollapsibleStack( {createScreenCollapsibleStack(
"self-menu", 'profile',
MainStack, MainStack,
SelfMenuScreen, ProfileScreen,
i18n.t('screens.menu.title'))} i18n.t('screens.profile.title'),
{createScreenCollapsibleStack( )}
"proximo", {createScreenCollapsibleStack(
MainStack, 'club-list',
ProximoMainScreen, MainStack,
i18n.t('screens.proximo.title'))} ClubListScreen,
{createScreenCollapsibleStack( i18n.t('screens.clubs.title'),
"proximo-list", )}
MainStack, {createScreenCollapsibleStack(
ProximoListScreen, 'club-information',
i18n.t('screens.proximo.articleList'), MainStack,
)} ClubDisplayScreen,
{createScreenCollapsibleStack( i18n.t('screens.clubs.details'),
"proximo-about", true,
MainStack, {...modalTransition},
ProximoAboutScreen, )}
i18n.t('screens.proximo.title'), {createScreenCollapsibleStack(
true, 'club-about',
{...modalTransition}, MainStack,
)} ClubAboutScreen,
i18n.t('screens.clubs.title'),
true,
{...modalTransition},
)}
{createScreenCollapsibleStack(
'equipment-list',
MainStack,
EquipmentScreen,
i18n.t('screens.equipment.title'),
)}
{createScreenCollapsibleStack(
'equipment-rent',
MainStack,
EquipmentLendScreen,
i18n.t('screens.equipment.book'),
)}
{createScreenCollapsibleStack(
'equipment-confirm',
MainStack,
EquipmentConfirmScreen,
i18n.t('screens.equipment.confirm'),
)}
{createScreenCollapsibleStack(
'vote',
MainStack,
VoteScreen,
i18n.t('screens.vote.title'),
)}
{createScreenCollapsibleStack(
'feedback',
MainStack,
BugReportScreen,
i18n.t('screens.feedback.title'),
)}
</MainStack.Navigator>
);
}
{createScreenCollapsibleStack( type PropsType = {
"profile", defaultHomeRoute: string | null,
MainStack, // eslint-disable-next-line flowtype/no-weak-types
ProfileScreen, defaultHomeData: {[key: string]: string},
i18n.t('screens.profile.title'))} };
{createScreenCollapsibleStack(
"club-list", export default class MainNavigator extends React.Component<PropsType> {
MainStack, createTabNavigator: () => React.Node;
ClubListScreen,
i18n.t('screens.clubs.title'))} constructor(props: PropsType) {
{createScreenCollapsibleStack( super(props);
"club-information", this.createTabNavigator = (): React.Node => (
MainStack, <TabNavigator
ClubDisplayScreen, defaultHomeRoute={props.defaultHomeRoute}
i18n.t('screens.clubs.details'), defaultHomeData={props.defaultHomeData}
true, />
{...modalTransition})}
{createScreenCollapsibleStack(
"club-about",
MainStack,
ClubAboutScreen,
i18n.t('screens.clubs.title'),
true,
{...modalTransition})}
{createScreenCollapsibleStack(
"equipment-list",
MainStack,
EquipmentScreen,
i18n.t('screens.equipment.title'))}
{createScreenCollapsibleStack(
"equipment-rent",
MainStack,
EquipmentLendScreen,
i18n.t('screens.equipment.book'))}
{createScreenCollapsibleStack(
"equipment-confirm",
MainStack,
EquipmentConfirmScreen,
i18n.t('screens.equipment.confirm'))}
{createScreenCollapsibleStack(
"vote",
MainStack,
VoteScreen,
i18n.t('screens.vote.title'))}
{createScreenCollapsibleStack(
"feedback",
MainStack,
BugReportScreen,
i18n.t('screens.feedback.title'))}
</MainStack.Navigator>
); );
} }
type Props = { render(): React.Node {
defaultHomeRoute: string | null, return <MainStackComponent createTabNavigator={this.createTabNavigator} />;
defaultHomeData: { [key: string]: any } }
}
export default class MainNavigator extends React.Component<Props> {
createTabNavigator: () => React.Node;
constructor(props: Props) {
super(props);
this.createTabNavigator = () => <TabNavigator {...props}/>
}
render() {
return (
<MainStackComponent createTabNavigator={this.createTabNavigator}/>
);
}
} }

View file

@ -1,271 +1,292 @@
// @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';
import {Title, useTheme} from 'react-native-paper';
import {Platform} from 'react-native';
import i18n from 'i18n-js';
import {createCollapsibleStack} from 'react-navigation-collapsible';
import {View} from 'react-native-animatable';
import HomeScreen from '../screens/Home/HomeScreen'; import HomeScreen from '../screens/Home/HomeScreen';
import PlanningScreen from '../screens/Planning/PlanningScreen'; import PlanningScreen from '../screens/Planning/PlanningScreen';
import PlanningDisplayScreen from '../screens/Planning/PlanningDisplayScreen'; import PlanningDisplayScreen from '../screens/Planning/PlanningDisplayScreen';
import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen'; import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen'; import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
import PlanexScreen from '../screens/Planex/PlanexScreen'; import PlanexScreen from '../screens/Planex/PlanexScreen';
import AsyncStorageManager from "../managers/AsyncStorageManager"; import AsyncStorageManager from '../managers/AsyncStorageManager';
import {Title, useTheme} from 'react-native-paper'; import ClubDisplayScreen from '../screens/Amicale/Clubs/ClubDisplayScreen';
import {Platform} from 'react-native'; import ScannerScreen from '../screens/Home/ScannerScreen';
import i18n from "i18n-js"; import FeedItemScreen from '../screens/Home/FeedItemScreen';
import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen"; import GroupSelectionScreen from '../screens/Planex/GroupSelectionScreen';
import ScannerScreen from "../screens/Home/ScannerScreen"; import CustomTabBar from '../components/Tabbar/CustomTabBar';
import FeedItemScreen from "../screens/Home/FeedItemScreen"; import WebsitesHomeScreen from '../screens/Services/ServicesScreen';
import {createCollapsibleStack} from "react-navigation-collapsible"; import ServicesSectionScreen from '../screens/Services/ServicesSectionScreen';
import GroupSelectionScreen from "../screens/Planex/GroupSelectionScreen"; import AmicaleContactScreen from '../screens/Amicale/AmicaleContactScreen';
import CustomTabBar from "../components/Tabbar/CustomTabBar"; import {
import WebsitesHomeScreen from "../screens/Services/ServicesScreen"; createScreenCollapsibleStack,
import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen"; getWebsiteStack,
import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen"; } from '../utils/CollapsibleUtils';
import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils"; import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot';
import {View} from "react-native-animatable";
import Mascot, {MASCOT_STYLE} from "../components/Mascot/Mascot";
const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
const modalTransition =
Platform.OS === 'ios'
? TransitionPresets.ModalPresentationIOS
: TransitionPresets.ModalSlideFromBottomIOS;
const defaultScreenOptions = { const defaultScreenOptions = {
gestureEnabled: true, gestureEnabled: true,
cardOverlayEnabled: true, cardOverlayEnabled: true,
...modalTransition, ...modalTransition,
}; };
const ServicesStack = createStackNavigator(); const ServicesStack = createStackNavigator();
function ServicesStackComponent() { function ServicesStackComponent(): React.Node {
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( )}
"amicale-contact", {createScreenCollapsibleStack(
ServicesStack, 'amicale-contact',
AmicaleContactScreen, ServicesStack,
i18n.t('screens.amicaleAbout.title'))} AmicaleContactScreen,
</ServicesStack.Navigator> i18n.t('screens.amicaleAbout.title'),
); )}
</ServicesStack.Navigator>
);
} }
const ProxiwashStack = createStackNavigator(); const ProxiwashStack = createStackNavigator();
function ProxiwashStackComponent() { function ProxiwashStackComponent(): React.Node {
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,
i18n.t('screens.proxiwash.title'))} i18n.t('screens.proxiwash.title'),
</ProxiwashStack.Navigator> )}
); </ProxiwashStack.Navigator>
);
} }
const PlanningStack = createStackNavigator(); const PlanningStack = createStackNavigator();
function PlanningStackComponent() { function PlanningStackComponent(): React.Node {
return ( return (
<PlanningStack.Navigator <PlanningStack.Navigator
initialRouteName="index" initialRouteName="index"
headerMode={"screen"} headerMode="screen"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}>
> <PlanningStack.Screen
<PlanningStack.Screen name="index"
name="index" 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, i18n.t('screens.planning.eventDetails'),
i18n.t('screens.planning.eventDetails'))} )}
</PlanningStack.Navigator> </PlanningStack.Navigator>
); );
} }
const HomeStack = createStackNavigator(); const HomeStack = createStackNavigator();
function HomeStackComponent(initialRoute: string | null, defaultData: { [key: string]: any }) { function HomeStackComponent(
let params = undefined; initialRoute: string | null,
if (initialRoute != null) defaultData: {[key: string]: string},
params = {data: defaultData, nextScreen: initialRoute, shouldOpen: true}; ): React.Node {
const {colors} = useTheme(); let params;
return ( if (initialRoute != null)
<HomeStack.Navigator params = {data: defaultData, nextScreen: initialRoute, shouldOpen: true};
initialRouteName={"index"} const {colors} = useTheme();
headerMode={"screen"} return (
screenOptions={defaultScreenOptions} <HomeStack.Navigator
> initialRouteName="index"
{createCollapsibleStack( headerMode="screen"
<HomeStack.Screen screenOptions={defaultScreenOptions}>
name="index" {createCollapsibleStack(
component={HomeScreen} <HomeStack.Screen
options={{ name="index"
title: i18n.t('screens.home.title'), component={HomeScreen}
headerStyle: { options={{
backgroundColor: colors.surface, title: i18n.t('screens.home.title'),
}, headerStyle: {
headerTitle: () => backgroundColor: colors.surface,
<View style={{flexDirection: "row"}}> },
<Mascot headerTitle: (): React.Node => (
style={{ <View style={{flexDirection: 'row'}}>
width: 50 <Mascot
}} style={{
emotion={MASCOT_STYLE.RANDOM} width: 50,
animated={true} }}
entryAnimation={{ emotion={MASCOT_STYLE.RANDOM}
animation: "bounceIn", animated
duration: 1000 entryAnimation={{
}} animation: 'bounceIn',
loopAnimation={{ duration: 1000,
animation: "pulse", }}
duration: 2000, loopAnimation={{
iterationCount: "infinite" animation: 'pulse',
}} duration: 2000,
/> iterationCount: 'infinite',
<Title style={{ }}
marginLeft: 10, />
marginTop: "auto", <Title
marginBottom: "auto", style={{
}}>{i18n.t('screens.home.title')}</Title> marginLeft: 10,
</View> marginTop: 'auto',
}} marginBottom: 'auto',
initialParams={params} }}>
/>, {i18n.t('screens.home.title')}
{ </Title>
collapsedColor: colors.surface, </View>
useNativeDriver: true, ),
} }}
)} initialParams={params}
<HomeStack.Screen />,
name="scanner" {
component={ScannerScreen} collapsedColor: colors.surface,
options={{title: i18n.t('screens.scanner.title'),}} useNativeDriver: true,
/> },
)}
<HomeStack.Screen
name="scanner"
component={ScannerScreen}
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( )}
"feed-information", {createScreenCollapsibleStack(
HomeStack, 'feed-information',
FeedItemScreen, HomeStack,
i18n.t('screens.home.feed'))} FeedItemScreen,
{createScreenCollapsibleStack( i18n.t('screens.home.feed'),
"planning-information", )}
HomeStack, {createScreenCollapsibleStack(
PlanningDisplayScreen, 'planning-information',
i18n.t('screens.planning.eventDetails'))} HomeStack,
</HomeStack.Navigator> PlanningDisplayScreen,
); i18n.t('screens.planning.eventDetails'),
)}
</HomeStack.Navigator>
);
} }
const PlanexStack = createStackNavigator(); const PlanexStack = createStackNavigator();
function PlanexStackComponent() { function PlanexStackComponent(): React.Node {
return ( return (
<PlanexStack.Navigator <PlanexStack.Navigator
initialRouteName="index" initialRouteName="index"
headerMode={"screen"} headerMode="screen"
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}>
> {getWebsiteStack(
{getWebsiteStack( 'index',
"index", PlanexStack,
PlanexStack, PlanexScreen,
PlanexScreen, i18n.t('screens.planex.title'),
i18n.t("screens.planex.title"))} )}
{createScreenCollapsibleStack( {createScreenCollapsibleStack(
"group-select", 'group-select',
PlanexStack, PlanexStack,
GroupSelectionScreen, GroupSelectionScreen,
"")} '',
</PlanexStack.Navigator> )}
); </PlanexStack.Navigator>
);
} }
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
type Props = { type PropsType = {
defaultHomeRoute: string | null, defaultHomeRoute: string | null,
defaultHomeData: { [key: string]: any } defaultHomeData: {[key: string]: string},
} };
export default class TabNavigator extends React.Component<Props> { export default class TabNavigator extends React.Component<PropsType> {
createHomeStackComponent: () => React.Node;
createHomeStackComponent: () => HomeStackComponent;
defaultRoute: string; defaultRoute: string;
constructor(props) { constructor(props: PropsType) {
super(props); super(props);
if (props.defaultHomeRoute != null) if (props.defaultHomeRoute != null) this.defaultRoute = 'home';
this.defaultRoute = 'home'; else
else this.defaultRoute = AsyncStorageManager.getString(
this.defaultRoute = AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.defaultStartScreen.key).toLowerCase(); AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
this.createHomeStackComponent = () => HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData); ).toLowerCase();
} this.createHomeStackComponent = (): React.Node =>
HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData);
render() { }
return (
<Tab.Navigator render(): React.Node {
initialRouteName={this.defaultRoute} return (
tabBar={props => <CustomTabBar {...props} />} <Tab.Navigator
> initialRouteName={this.defaultRoute}
<Tab.Screen // eslint-disable-next-line react/jsx-props-no-spreading
name="services" tabBar={(props: {...}): React.Node => <CustomTabBar {...props} />}>
option <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={this.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}
options={{title: i18n.t('screens.planning.title')}}
<Tab.Screen />
name="planex"
component={PlanexStackComponent} <Tab.Screen
options={{title: i18n.t("screens.planex.title")}} name="planex"
/> component={PlanexStackComponent}
</Tab.Navigator> options={{title: i18n.t('screens.planex.title')}}
); />
} </Tab.Navigator>
);
}
} }