diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 25cc9b7316..98f4a53efb 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -416,7 +416,7 @@ export interface NavigationSwitchRouterConfig { initialRouteName?: string; initialRouteParams?: NavigationParams; paths?: NavigationPathsConfig; - navigationOptions?: NavigationScreenConfig; + defaultNavigationOptions?: NavigationScreenConfig; order?: string[]; backBehavior?: 'none' | 'initialRoute'; // defaults to `'none'` resetOnBlur?: boolean; // defaults to `true` @@ -456,6 +456,7 @@ export interface NavigationStackRouterConfig { initialRouteName?: string; initialRouteParams?: NavigationParams; paths?: NavigationPathsConfig; + defaultNavigationOptions?: NavigationScreenConfig; navigationOptions?: NavigationScreenConfig; initialRouteKey?: string; } @@ -519,10 +520,12 @@ interface NavigationTabRouterConfigBase { backBehavior?: 'none' | 'initialRoute'; // defaults `initialRoute` } export interface NavigationTabRouterConfig extends NavigationTabRouterConfigBase { - navigationOptions?: NavigationScreenConfig; + defaultNavigationOptions?: NavigationScreenConfig; + navigationOptions?: NavigationTabRouterConfigBase; } export interface NavigationBottomTabRouterConfig extends NavigationTabRouterConfigBase { - navigationOptions?: NavigationScreenConfig; + defaultNavigationOptions?: NavigationScreenConfig; + navigationOptions?: NavigationTabRouterConfigBase; } export interface TabScene { route: NavigationRoute; @@ -1247,8 +1250,8 @@ export function createNavigator( * * @see https://github.com/react-navigation/react-navigation/blob/master/src/createNavigationContainer.js */ -export function createNavigationContainer( - Component: NavigationNavigator +export function createNavigationContainer( + Component: NavigationNavigator ): NavigationContainer; /** @@ -1256,8 +1259,8 @@ export function createNavigationContainer( * * @see https://github.com/react-navigation/react-navigation-native/blob/098e2e52b349d37357109d5aee545fa74699d3d4/src/createAppContainer.js#L64 */ -export function createAppContainer( - Component: NavigationNavigator +export function createAppContainer( + Component: NavigationNavigator ): NavigationContainer; /** diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index aaa69bc35b..737633b1ed 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -6,6 +6,7 @@ import { ViewStyle, } from 'react-native'; import { + createAppContainer, createDrawerNavigator, createBottomTabNavigator, DrawerItems, @@ -174,7 +175,13 @@ export const AppNavigator = createStackNavigator( initialRouteKey: ROUTE_KEY_START_SCREEN, headerLayoutPreset: 'center', initialRouteParams, - navigationOptions, + defaultNavigationOptions: navigationOptions, + navigationOptions: { + headerTintColor: '#fff', + headerStyle: { + backgroundColor: '#000', + }, + } }, ); @@ -211,10 +218,13 @@ const tabNavigatorConfig: TabNavigatorConfig = { lazy: true, tabBarComponent: TabBarTop, tabBarOptions: { activeBackgroundColor: "blue" }, - navigationOptions: () => ({ + defaultNavigationOptions: () => ({ tabBarOnPress: ({ scene, jumpToIndex }) => jumpToIndex(scene.index), tabBarIcon: ({ horizontal }) => , - }) + }), + navigationOptions: { + backBehavior: 'none' + } }; const tabNavigatorConfigWithInitialLayout: TabNavigatorConfig = { @@ -224,7 +234,7 @@ const tabNavigatorConfigWithInitialLayout: TabNavigatorConfig = { const tabNavigatorConfigWithNavigationOptions: TabNavigatorConfig = { ...tabNavigatorConfig, - navigationOptions: { + defaultNavigationOptions: { tabBarOnPress: ({scene, jumpToIndex}) => { jumpToIndex(scene.index); }, @@ -259,7 +269,7 @@ const stackNavigatorScreenOptions: NavigationStackScreenOptions = { const stackNavigatorConfig: StackNavigatorConfig = { mode: "card", headerMode: "screen", - navigationOptions: stackNavigatorScreenOptions, + defaultNavigationOptions: stackNavigatorScreenOptions, }; const BasicStackNavigator = createStackNavigator( @@ -279,7 +289,7 @@ function renderBasicStackNavigator(): JSX.Element { const stackNavigatorConfigWithNavigationOptionsAsFunction: StackNavigatorConfig = { mode: "card", headerMode: "screen", - navigationOptions: ({navigationOptions, navigation, screenProps}) => (stackNavigatorScreenOptions), + defaultNavigationOptions: ({navigationOptions, navigation, screenProps}) => (stackNavigatorScreenOptions), }; const AdvancedStackNavigator = createStackNavigator( @@ -359,7 +369,7 @@ const drawerNavigatorConfig: DrawerNavigatorConfig = { const BasicDrawerNavigator = createDrawerNavigator( routeConfigMap, - stackNavigatorConfig, + drawerNavigatorConfig, ); const Drawer = (props: DrawerItemsProps) => ( @@ -527,7 +537,7 @@ const BottomStack = createBottomTabNavigator({ } } }, { - navigationOptions: () => ({ + defaultNavigationOptions: () => ({ tabBarOnPress: ({ defaultHandler }) => defaultHandler() }) }); @@ -537,7 +547,7 @@ const CustomHeaderStack = createStackNavigator({ Page2: { screen: Page2 } }, { - navigationOptions: { + defaultNavigationOptions: { header: headerProps => { const { scene } = headerProps; const { options } = scene.descriptor; @@ -658,6 +668,10 @@ createStackNavigator( {transitionConfig: () => ({screenInterpolator: StackViewTransitionConfigs.SlideFromRightIOS.screenInterpolator})} ); +// Test createAppContainer + +export const AppContainer = createAppContainer(AppNavigator) + // Test NavigationEvents component const ViewWithNavigationEvents = (