From 56020af82175db6e4645874ceeb5c59cfff2bc97 Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Sat, 24 Jun 2017 09:22:23 -0700 Subject: [PATCH] [react-navigation] Fix and extend tests --- .../react-navigation-tests.tsx | 104 ++++++++++++++---- 1 file changed, 83 insertions(+), 21 deletions(-) diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index b3370f412d..835e63d756 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -2,14 +2,19 @@ import * as React from 'react'; import { TouchableOpacity, View, + ViewStyle, } from 'react-native'; import { addNavigationHelpers, + NavigationRouteConfigMap, NavigationScreenProp, NavigationScreenProps, NavigationStackAction, + NavigationStackScreenOptions, NavigationTabScreenOptions, StackNavigator, + StackNavigatorConfig, + TabNavigator, TabNavigatorConfig, TabBarTop, Transitioner, @@ -18,11 +23,21 @@ import { NavigationTransitionProps, } from 'react-navigation'; +// Constants +const viewStyle: ViewStyle = { + flex: 1, + margin: 42, + padding: 0, + backgroundColor: "white", +}; + + /** * @class StartScreen @extends React.Component * @desc Simple screen component class with typed component props that should * receive the navigation prop from the AppNavigator. */ +const ROUTE_NAME_START_SCREEN = "StartScreen"; interface StartScreenNavigationParams { id: number, s: string, @@ -79,30 +94,39 @@ const initialRouteParams: StartScreenNavigationParams = { id: 1, s: "Start", }; -export const AppNavigator = StackNavigator({ - StartImage: { - path: 'startImage', +const routeConfigMap: NavigationRouteConfigMap = { + [ROUTE_NAME_START_SCREEN]: { + path: "start", screen: StartScreen, }, -}, { - initialRouteName: 'StartImage', - initialRouteParams, -}); + [ROUTE_NAME_NEXT_SCREEN]: { + path: "next", + screen: NextScreen, + }, +}; +export const AppNavigator = StackNavigator( + routeConfigMap, + { + initialRouteName: ROUTE_NAME_START_SCREEN, + initialRouteParams, + }, +); /** * Router. */ const Router = (props: any) => ( - true, - state: {}, - }) - } + true, + state: {}, + }) + } /> ); + /** * Tab navigator. */ @@ -112,11 +136,55 @@ const tabNavigatorScreenOptions: NavigationTabScreenOptions = { tabBarVisible: true, tabBarIcon: , tabBarLabel: 'label', -} +}; const tabNavigatorConfig: TabNavigatorConfig = { lazy: true, tabBarComponent: TabBarTop, + tabBarOptions: tabNavigatorScreenOptions, +}; + +const BasicTabNavigator = TabNavigator( + routeConfigMap, + tabNavigatorConfig, +); + +function renderBasicTabNavigator(): JSX.Element { + return ( + { }} + style={viewStyle} + /> + ); +} + + +/** + * Stack navigator. + */ + +const stackNavigatorScreenOptions: NavigationStackScreenOptions = { + title: 'title', +}; + +const stackNavigatorConfig: StackNavigatorConfig = { + mode: "card", + headerMode: "screen", + navigationOptions: stackNavigatorScreenOptions, +}; + +const BasicStackNavigator = StackNavigator( + routeConfigMap, + stackNavigatorConfig, +); + +function renderBasicStackNavigator(): JSX.Element { + return ( + { }} + style={viewStyle} + /> + ); } @@ -151,9 +219,3 @@ class CustomTransitioner extends React.Component return {} } } - -const BasicStackNavigation = StackNavigator({ - StartScreen: { screen: Start } -}); - -