Change type definition for v2

types/react-navigation/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for react-navigation 2.0.1
+// Type definitions for react-navigation 1.5
 // Project: https://github.com/react-navigation/react-navigation
 // Definitions by: Huhuanming <https://github.com/huhuanming>
 //                 mhcgrq <https://github.com/mhcgrq>
@@ -16,12 +16,11 @@
 //                 Armando Assuncao <https://github.com/ArmandoAssuncao>
 //                 Ciaran Liedeman <https://github.com/cliedeman>
 //                 Edward Sammut Alessi <https://github.com/Slessi>
-//                 Jeremy Magrin <https://github.com/magrinj>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.6
 
 /**
- * Reference: https://github.com/react-navigation/react-navigation/tree/a37473c5e4833f48796ee6c7c9cb4a8ac49d9c06
+ * Reference: https://github.com/react-navigation/react-navigation/tree/3f3ef6485c8932f49fddc3dd2c508629110bf2b6
  *
  * NOTE: Please update the commit/link above when updating to a new Flow
  * react-navigation/flow/react-navigation.js reference, so we can conveniently just look at diffs on
@@ -44,21 +43,15 @@ export type AnimatedValue = any;
 
 export type HeaderMode = 'float' | 'screen' | 'none';
 
-export interface HeaderForceInset {
-  horizontal?: string;
-  vertical?: string,
-  left?: string,
-  right?: string,
-  top?: string,
-  bottom?: string,
-}
-
 export interface HeaderProps extends NavigationSceneRendererProps {
   mode: HeaderMode;
-  router: NavigationRouter<NavigationState, NavigationStackScreenOptions>;
-  getScreenDetails: (
-    navigationScene: NavigationScene
-  ) => NavigationScreenDetails<NavigationStackScreenOptions>;
+  router: NavigationRouter<
+    NavigationState,
+    NavigationStackScreenOptions
+  >;
+  getScreenDetails: (navigationScene: NavigationScene) => NavigationScreenDetails<
+    NavigationStackScreenOptions
+  >;
   style: StyleProp<ViewStyle>;
 }
 
@@ -83,9 +76,7 @@ export interface NavigationState {
   routes: any[];
 }
 
-export type NavigationRoute<Params = NavigationParams> =
-  | NavigationLeafRoute<Params>
-  | NavigationStateRoute<Params>;
+export type NavigationRoute<Params = NavigationParams> = NavigationLeafRoute<Params> | NavigationStateRoute<Params>;
 
 export interface NavigationLeafRoute<Params> {
   /**
@@ -109,9 +100,7 @@ export interface NavigationLeafRoute<Params> {
   params?: Params;
 }
 
-export type NavigationStateRoute<
-  NavigationLeafRouteParams
-  > = NavigationLeafRoute<NavigationLeafRouteParams> & NavigationState;
+export type NavigationStateRoute<NavigationLeafRouteParams> = NavigationLeafRoute<NavigationLeafRouteParams> & NavigationState;
 
 export type NavigationScreenOptionsGetter<Options> = (
   navigation: NavigationScreenProp<NavigationRoute<any>>,
@@ -124,10 +113,7 @@ export interface NavigationRouter<State = NavigationState, Options = {}> {
    * an optional previous state. When the action is considered handled but the
    * state is unchanged, the output state is null.
    */
-  getStateForAction: (
-    action: NavigationAction,
-    lastState?: State
-  ) => State | null;
+  getStateForAction: (action: NavigationAction, lastState?: State) => (State | null);
 
   /**
    * Maps a URI-like string to an action. This can be mapped to a state
@@ -136,14 +122,14 @@ export interface NavigationRouter<State = NavigationState, Options = {}> {
   getActionForPathAndParams: (
     path: string,
     params?: NavigationParams
-  ) => NavigationAction | null;
+  ) => (NavigationAction | null);
 
   getPathAndParamsForState: (
     state: State
   ) => {
-      path: string;
-      params?: NavigationParams;
-    };
+    path: string,
+    params?: NavigationParams,
+  };
 
   getComponentForRouteName: (routeName: string) => NavigationComponent;
 
@@ -161,8 +147,11 @@ export interface NavigationRouter<State = NavigationState, Options = {}> {
 }
 
 export type NavigationScreenOption<T> =
-  | T
-  | ((navigation: NavigationScreenProp<NavigationRoute>, config: T) => T);
+  T
+  | ((
+    navigation: NavigationScreenProp<NavigationRoute>,
+    config: T
+  ) => T);
 
 export interface NavigationScreenDetails<T> {
   options: T;
@@ -170,9 +159,7 @@ export interface NavigationScreenDetails<T> {
   navigation: NavigationScreenProp<NavigationRoute>;
 }
 
-export type NavigationScreenOptions = NavigationStackScreenOptions &
-  NavigationTabScreenOptions &
-  NavigationDrawerScreenOptions;
+export type NavigationScreenOptions = NavigationStackScreenOptions & NavigationTabScreenOptions & NavigationDrawerScreenOptions;
 
 export interface NavigationScreenConfigProps {
   navigation: NavigationScreenProp<NavigationRoute>;
@@ -180,34 +167,30 @@ export interface NavigationScreenConfigProps {
 }
 
 export type NavigationScreenConfig<Options> =
-  | Options
-  | ((
-    navigationOptionsContainer: NavigationScreenConfigProps & {
-      navigationOptions: NavigationScreenProp<NavigationRoute>;
-    }
-  ) => Options);
+  Options
+  | ((navigationOptionsContainer: NavigationScreenConfigProps & {
+      navigationOptions: NavigationScreenProp<NavigationRoute>,
+    }) => Options);
 
 export type NavigationComponent =
-  | NavigationScreenComponent<any, any, any>
-  | NavigationNavigator<any, any, any>
-  | any;
+  NavigationScreenComponent<any, any, any>
+  | NavigationNavigator<any, any, any>;
 
 export type NavigationScreenComponent<
-  Params = NavigationParams,
-  Options = {},
-  Props = {}
-  > = React.ComponentType<NavigationScreenProps<Params, Options> & Props> & {
-    navigationOptions?: NavigationScreenConfig<Options>;
-  };
+    Params = NavigationParams,
+    Options = {},
+    Props = {}
+> = React.ComponentType<NavigationScreenProps<Params, Options> & Props> &
+{ navigationOptions?: NavigationScreenConfig<Options> };
 
 export type NavigationNavigator<
-  State = NavigationState,
-  Options = {},
-  Props = {}
-  > = React.ComponentType<NavigationNavigatorProps<Options, State> & Props> & {
-    router: NavigationRouter<State, Options>;
-    navigationOptions?: NavigationScreenConfig<Options>;
-  };
+    State = NavigationState,
+    Options = {},
+    Props = {}
+> = React.ComponentType<NavigationNavigatorProps<Options, State> & Props> & {
+    router: NavigationRouter<State, Options>,
+    navigationOptions?: NavigationScreenConfig<Options>,
+};
 
 export interface NavigationParams {
   [key: string]: any;
@@ -223,8 +206,7 @@ export interface NavigationNavigateActionPayload {
   key?: string;
 }
 
-export interface NavigationNavigateAction
-  extends NavigationNavigateActionPayload {
+export interface NavigationNavigateAction extends NavigationNavigateActionPayload {
   type: 'Navigation/NAVIGATE';
 }
 
@@ -244,8 +226,7 @@ export interface NavigationSetParamsActionPayload {
   params?: NavigationParams;
 }
 
-export interface NavigationSetParamsAction
-  extends NavigationSetParamsActionPayload {
+export interface NavigationSetParamsAction extends NavigationSetParamsActionPayload {
   type: 'Navigation/SET_PARAMS';
 }
 
@@ -290,69 +271,40 @@ export interface NavigationPopToTopActionPayload {
   immediate?: boolean;
 }
 
-export interface NavigationPopToTopAction
-  extends NavigationPopToTopActionPayload {
+export interface NavigationPopToTopAction extends NavigationPopToTopActionPayload {
   type: 'Navigation/POP_TO_TOP';
 }
 
 export interface NavigationStackViewConfig {
   mode?: 'card' | 'modal';
   headerMode?: HeaderMode;
-  headerTransitionPreset?: 'fade-in-place' | 'uikit';
   cardStyle?: StyleProp<ViewStyle>;
   transitionConfig?: (
     transitionProps: NavigationTransitionProps,
     prevTransitionProps: NavigationTransitionProps,
-    isModal: boolean
+    isModal: boolean,
   ) => TransitionConfig;
-  onTransitionStart?: (
-    transitionProps: NavigationTransitionProps,
-    prevTransitionProps?: NavigationTransitionProps
-  ) => Promise<void> | void;
-  onTransitionEnd?: (
-    transitionProps: NavigationTransitionProps,
-    prevTransitionProps?: NavigationTransitionProps
-  ) => void;
-}
-
-/**
- * Switch Navigator
- */
-
-export interface NavigationSwitchRouterConfig {
-  initialRouteName?: string;
-  initialRouteParams?: NavigationParams;
-  paths?: NavigationPathsConfig;
-  navigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
-  order?: string[];
-  backBehavior?: 'none' | 'initialRoute'; // defaults to `'none'`
-  resetOnBlur?: boolean; // defaults to `true`
+  onTransitionStart?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => Promise<void> | void;
+  onTransitionEnd?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => void;
 }
 
 export interface NavigationStackScreenOptions {
   title?: string;
-  header?:
-  | (
-    | React.ReactElement<any>
-    | ((headerProps: HeaderProps) => React.ReactElement<any>))
-  | null;
+  header?: (React.ReactElement<any> | ((headerProps: HeaderProps) => React.ReactElement<any>)) | null;
   headerTransparent?: boolean;
   headerTitle?: string | React.ReactElement<any>;
   headerTitleStyle?: StyleProp<TextStyle>;
   headerTintColor?: string;
   headerLeft?: React.ReactElement<any>;
   headerBackTitle?: string | null;
-  headerBackImage?: React.ReactElement<any>;
   headerTruncatedBackTitle?: string;
   headerBackTitleStyle?: StyleProp<TextStyle>;
   headerPressColorAndroid?: string;
   headerRight?: React.ReactElement<any>;
   headerStyle?: StyleProp<ViewStyle>;
-  headerForceInset?: HeaderForceInset;
   headerBackground?: React.ReactNode | React.ReactType;
   gesturesEnabled?: boolean;
   gestureResponseDistance?: { vertical?: number; horizontal?: number };
-  gestureDirection?: 'default' | 'inverted';
 }
 
 export interface NavigationStackRouterConfig {
@@ -365,7 +317,7 @@ export interface NavigationStackRouterConfig {
 }
 
 export type NavigationStackAction =
-  | NavigationInitAction
+  NavigationInitAction
   | NavigationNavigateAction
   | NavigationBackAction
   | NavigationSetParamsAction
@@ -374,30 +326,25 @@ export type NavigationStackAction =
   | NavigationPopToTopAction;
 
 export type NavigationTabAction =
-  | NavigationInitAction
+  NavigationInitAction
   | NavigationNavigateAction
   | NavigationBackAction;
 
 export type NavigationAction =
-  | NavigationInitAction
+  NavigationInitAction
   | NavigationStackAction
   | NavigationTabAction;
 
-export type NavigationRouteConfig =
-  | NavigationComponent
-  | ({
-    navigationOptions?: NavigationScreenConfig<any>;
-    path?: string;
-  } & NavigationScreenRouteConfig);
+export type NavigationRouteConfig = NavigationComponent | ({
+  navigationOptions?: NavigationScreenConfig<any>,
+  path?: string,
+} & NavigationScreenRouteConfig);
 
-export type NavigationScreenRouteConfig =
-  | NavigationComponent
-  | {
-    screen: NavigationComponent;
-  }
-  | {
-    getScreen: () => NavigationComponent;
-  };
+export type NavigationScreenRouteConfig = NavigationComponent | {
+    screen: NavigationComponent,
+} | {
+    getScreen: () => NavigationComponent,
+};
 
 export interface NavigationPathsConfig {
   [routeName: string]: string;
@@ -413,48 +360,45 @@ export interface NavigationTabRouterConfig {
   backBehavior?: 'none' | 'initialRoute'; // defaults `initialRoute`
 }
 export interface TabScene {
-  route: NavigationRoute;
-  focused: boolean;
-  index: number;
-  tintColor?: string;
+    route: NavigationRoute;
+    focused: boolean;
+    index: number;
+    tintColor?: string;
 }
 export interface NavigationTabScreenOptions {
   title?: string;
   tabBarIcon?:
-  | React.ReactElement<any>
-  | ((
-    options: { tintColor: string | null; focused: boolean }
-  ) => React.ReactElement<any> | null);
+    React.ReactElement<any>
+    | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement<
+      any
+    > | null));
   tabBarLabel?:
-  | string
-  | React.ReactElement<any>
-  | ((
-    options: { tintColor: string | null; focused: boolean }
-  ) => React.ReactElement<any> | string | null);
+    string
+    | React.ReactElement<any>
+    | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement<
+      any
+    > | string | null));
   tabBarVisible?: boolean;
-  tabBarTestIDProps?: { testID?: string; accessibilityLabel?: string };
-  tabBarOnPress?: (
-    options: {
-      scene: TabScene;
-      jumpToIndex: (index: number) => void;
-    }
-  ) => void;
+  tabBarTestIDProps?: { testID?: string, accessibilityLabel?: string };
+  tabBarOnPress?: (options: {
+    scene: TabScene,
+    jumpToIndex: (index: number) => void
+  }) => void;
 }
 
 export interface NavigationDrawerScreenOptions {
   title?: string;
   drawerIcon?:
-  | React.ReactElement<any>
-  | ((
-    options: { tintColor: string | null; focused: boolean }
-  ) => React.ReactElement<any> | null);
+    React.ReactElement<any>
+    | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement<
+      any
+    > | null));
   drawerLabel?:
-  | string
-  | React.ReactElement<any>
-  | ((
-    options: { tintColor: string | null; focused: boolean }
-  ) => React.ReactElement<any> | null);
-  drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open';
+    string
+    | React.ReactElement<any>
+    | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement<
+      any
+    > | null));
 }
 
 export interface NavigationRouteConfigMap {
@@ -469,20 +413,22 @@ export interface NavigationProp<S> {
 }
 
 export type EventType =
-  | 'willFocus'
-  | 'didFocus'
-  | 'willBlur'
-  | 'didBlur'
-  | 'action';
+| 'willFocus'
+| 'didFocus'
+| 'willBlur'
+| 'didBlur'
+| 'action';
 
 export interface NavigationEventPayload {
   type: EventType;
   action: NavigationAction;
   state: NavigationState;
-  lastState: NavigationState | null | undefined;
+  lastState: NavigationState;
 }
 
-export type NavigationEventCallback = (payload: NavigationEventPayload) => void;
+export type NavigationEventCallback = (
+  payload: NavigationEventPayload
+) => void;
 
 export interface NavigationEventSubscription {
   remove: () => void;
@@ -492,14 +438,8 @@ export interface NavigationScreenProp<S, P = NavigationParams> {
   state: S;
   dispatch: NavigationDispatch;
   goBack: (routeKey?: string | null) => boolean;
-  dismiss: () => boolean;
   navigate(options: {
-    routeName: string | {
-      routeName: string;
-      params?: NavigationParams;
-      action?: NavigationNavigateAction;
-      key?: string;
-    };
+    routeName: string;
     params?: NavigationParams;
     action?: NavigationAction;
     key?: string;
@@ -507,7 +447,7 @@ export interface NavigationScreenProp<S, P = NavigationParams> {
   navigate(
     routeNameOrOptions: string,
     params?: NavigationParams,
-    action?: NavigationAction
+    action?: NavigationAction,
   ): boolean;
   getParam: <T extends keyof P>(param: T, fallback?: P[T]) => P[T];
   setParams: (newParams: P) => boolean;
@@ -527,7 +467,6 @@ export interface NavigationScreenProp<S, P = NavigationParams> {
   ) => boolean;
   pop: (n?: number, params?: { immediate?: boolean }) => boolean;
   popToTop: (params?: { immediate?: boolean }) => boolean;
-  isFocused: () => boolean;
 }
 
 export interface NavigationNavigatorProps<O = {}, S = {}> {
@@ -619,7 +558,7 @@ export type NavigationAnimationSetter = (
   lastState: NavigationState
 ) => void;
 
-export type NavigationSceneRenderer = () => React.ReactElement<any> | null;
+export type NavigationSceneRenderer = () => (React.ReactElement<any> | null);
 
 export type NavigationStyleInterpolator = (
   props: NavigationSceneRendererProps
@@ -628,49 +567,50 @@ export type NavigationStyleInterpolator = (
 export interface LayoutEvent {
   nativeEvent: {
     layout: {
-      x: number;
-      y: number;
-      width: number;
-      height: number;
-    };
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+    },
   };
 }
 
 export type NavigatorType =
-  | 'react-navigation/STACK'
-  | 'react-navigation/TABS'
-  | 'react-navigation/DRAWER';
+| 'react-navigation/STACK'
+| 'react-navigation/TABS'
+| 'react-navigation/DRAWER';
 
-export interface NavigationContainerProps<S = {}, O = {}> {
+export function addNavigationHelpers<S = {}>(
+  navigation: {
+    state: S;
+    dispatch: (action: NavigationAction) => any;
+    addListener?: (
+      eventName: string,
+      callback: NavigationEventCallback
+    ) => NavigationEventSubscription;
+  }
+): NavigationScreenProp<S>;
+
+export interface NavigationContainerProps {
   uriPrefix?: string | RegExp;
   onNavigationStateChange?: (
     prevNavigationState: NavigationState,
     nextNavigationState: NavigationState,
-    action: NavigationAction
-  ) => void | null | undefined;
-  navigation?: NavigationScreenProp<S>;
-  persistenceKey?: string | null | undefined;
-  renderLoadingExperimental?: React.ComponentType<{}>,
-  screenProps?: any;
-  navigationOptions?: O;
+    action: NavigationAction,
+  ) => void;
   style?: StyleProp<ViewStyle>;
 }
 
-export interface NavigationContainerComponent
-  extends React.Component<
+export interface NavigationContainerComponent extends React.Component<
   NavigationContainerProps & NavigationNavigatorProps<any>
   > {
   dispatch: NavigationDispatch;
 }
 
-export interface NavigationContainer
-  extends React.ComponentClass<
+export interface NavigationContainer extends React.ComponentClass<
   NavigationContainerProps & NavigationNavigatorProps<any>
   > {
-  new(
-    props: NavigationContainerProps & NavigationNavigatorProps<any>,
-    context?: any
-  ): NavigationContainerComponent;
+  new(props: NavigationContainerProps & NavigationNavigatorProps<any>, context?: any): NavigationContainerComponent;
 
   router: NavigationRouter<any, any>;
   screenProps: { [key: string]: any };
@@ -678,43 +618,29 @@ export interface NavigationContainer
   state: { nav: NavigationState | null };
 }
 
-export interface StackNavigatorConfig
-  extends NavigationStackViewConfig,
-  NavigationStackRouterConfig {
+export interface StackNavigatorConfig extends NavigationStackViewConfig, NavigationStackRouterConfig {
   containerOptions?: any;
 }
 
 // Return createNavigationContainer
 export function StackNavigator(
   routeConfigMap: NavigationRouteConfigMap,
-  stackConfig?: StackNavigatorConfig
-): NavigationContainer;
-
-export function createStackNavigator(
-  routeConfigMap: NavigationRouteConfigMap,
-  stackConfig?: StackNavigatorConfig
+  stackConfig?: StackNavigatorConfig,
 ): NavigationContainer;
 
 export interface SwitchNavigatorConfig {
   initialRouteName: string;
   resetOnBlur?: boolean;
   paths?: NavigationPathsConfig;
-  backBehavior?: 'none' | 'intialRoute';
+  backBehavior?: 'none' | 'initialRoute';
 }
 
 // Return createNavigationContainer
-export type _SwitchNavigatorConfig = NavigationSwitchRouterConfig;
-
 export function SwitchNavigator(
   routeConfigMap: NavigationRouteConfigMap,
   switchConfig?: SwitchNavigatorConfig
 ): NavigationContainer;
 
-export function createSwitchNavigator(
-  routeConfigMap: NavigationRouteConfigMap,
-  switchConfig?: SwitchNavigatorConfig
-): NavigationContainer;
-
 // DrawerItems
 export const DrawerItems: React.ReactType;
 
@@ -729,28 +655,21 @@ export interface DrawerViewConfig {
   contentOptions?: any;
   style?: StyleProp<ViewStyle>;
 }
-export interface DrawerNavigatorConfig
-  extends NavigationTabRouterConfig,
-  DrawerViewConfig {
+export interface DrawerNavigatorConfig extends NavigationTabRouterConfig, DrawerViewConfig {
   containerConfig?: any;
   contentOptions?: {
-    activeTintColor?: string;
-    activeBackgroundColor?: string;
-    inactiveTintColor?: string;
-    inactiveBackgroundColor?: string;
-    style?: StyleProp<ViewStyle>;
-    labelStyle?: StyleProp<TextStyle>;
+    activeTintColor?: string,
+    activeBackgroundColor?: string,
+    inactiveTintColor?: string,
+    inactiveBackgroundColor?: string,
+    style?: StyleProp<ViewStyle>,
+    labelStyle?: StyleProp<TextStyle>,
   };
 }
 
 export function DrawerNavigator(
   routeConfigMap: NavigationRouteConfigMap,
-  drawerConfig?: DrawerNavigatorConfig
-): NavigationContainer;
-
-export function createDrawerNavigator(
-  routeConfigMap: NavigationRouteConfigMap,
-  drawerConfig?: DrawerNavigatorConfig
+  drawerConfig?: DrawerNavigatorConfig,
 ): NavigationContainer;
 
 /**
@@ -762,23 +681,23 @@ export interface TabViewConfig {
   tabBarComponent?: React.ReactType;
   tabBarPosition?: 'top' | 'bottom';
   tabBarOptions?: {
-    activeTintColor?: string;
-    allowFontScaling?: boolean;
-    activeBackgroundColor?: string;
-    inactiveTintColor?: string;
-    inactiveBackgroundColor?: string;
-    showLabel?: boolean;
-    style?: StyleProp<ViewStyle>;
-    labelStyle?: StyleProp<TextStyle>;
-    iconStyle?: StyleProp<ViewStyle>;
+    activeTintColor?: string,
+    allowFontScaling?: boolean,
+    activeBackgroundColor?: string,
+    inactiveTintColor?: string,
+    inactiveBackgroundColor?: string,
+    showLabel?: boolean,
+    style?: StyleProp<ViewStyle>,
+    labelStyle?: StyleProp<TextStyle>,
+    iconStyle?: StyleProp<ViewStyle>,
     // Top
-    showIcon?: boolean;
-    upperCaseLabel?: boolean;
-    pressColor?: string;
-    pressOpacity?: number;
-    scrollEnabled?: boolean;
-    tabStyle?: StyleProp<ViewStyle>;
-    indicatorStyle?: StyleProp<ViewStyle>;
+    showIcon?: boolean,
+    upperCaseLabel?: boolean,
+    pressColor?: string,
+    pressOpacity?: number,
+    scrollEnabled?: boolean,
+    tabStyle?: StyleProp<ViewStyle>,
+    indicatorStyle?: StyleProp<ViewStyle>,
   };
   swipeEnabled?: boolean;
   animationEnabled?: boolean;
@@ -786,33 +705,16 @@ export interface TabViewConfig {
 }
 
 // From navigators/TabNavigator.js
-export interface TabNavigatorConfig
-  extends NavigationTabRouterConfig,
-  TabViewConfig {
+export interface TabNavigatorConfig extends NavigationTabRouterConfig, TabViewConfig {
   lazy?: boolean;
   removeClippedSubviews?: boolean;
-  initialLayout?: { height: number; width: number };
+  initialLayout?: { height: number, width: number };
 }
 
 // From navigators/TabNavigator.js
 export function TabNavigator(
   routeConfigMap: NavigationRouteConfigMap,
-  drawConfig?: TabNavigatorConfig
-): NavigationContainer;
-
-export function createTabNavigator(
-  routeConfigMap: NavigationRouteConfigMap,
-  drawConfig?: TabNavigatorConfig
-): NavigationContainer;
-
-export function createBottomTabNavigator(
-  routeConfigMap: NavigationRouteConfigMap,
-  drawConfig?: TabNavigatorConfig
-): NavigationContainer;
-
-export function createMaterialTopNavigator(
-  routeConfigMap: NavigationRouteConfigMap,
-  drawConfig?: TabNavigatorConfig
+  drawConfig?: TabNavigatorConfig,
 ): NavigationContainer;
 
 export interface TabBarTopProps {
@@ -827,17 +729,15 @@ export interface TabBarTopProps {
   tabBarPosition: string;
   navigation: NavigationScreenProp<NavigationState>;
   jumpToIndex: (index: number) => void;
-  getLabel: (scene: TabScene) => React.ReactNode | string;
+  getLabel: (scene: TabScene) => (React.ReactNode | string);
   getOnPress: (
     previousScene: NavigationRoute,
     scene: TabScene
-  ) => (
-      args: {
-        previousScene: NavigationRoute;
-        scene: TabScene;
-        jumpToIndex: (index: number) => void;
-      }
-    ) => void;
+  ) => (args: {
+    previousScene: NavigationRoute,
+    scene: TabScene,
+    jumpToIndex: (index: number) => void,
+  }) => void;
   renderIcon: (scene: TabScene) => React.ReactElement<any>;
   labelStyle?: TextStyle;
   iconStyle?: ViewStyle;
@@ -854,17 +754,15 @@ export interface TabBarBottomProps {
   position: AnimatedValue;
   navigation: NavigationScreenProp<NavigationState>;
   jumpToIndex: (index: number) => void;
-  getLabel: (scene: TabScene) => React.ReactNode | string;
+  getLabel: (scene: TabScene) => (React.ReactNode | string);
   getOnPress: (
     previousScene: NavigationRoute,
     scene: TabScene
-  ) => (
-      args: {
-        previousScene: NavigationRoute;
-        scene: TabScene;
-        jumpToIndex: (index: number) => void;
-      }
-    ) => void;
+  ) => (args: {
+    previousScene: NavigationRoute,
+    scene: TabScene,
+    jumpToIndex: (index: number) => void,
+  }) => void;
   getTestIDProps: (scene: TabScene) => (scene: TabScene) => any;
   renderIcon: (scene: TabScene) => React.ReactNode;
   style?: ViewStyle;
@@ -891,18 +789,12 @@ export namespace NavigationActions {
   const POP_TO_TOP: 'Navigation/POP_TO_TOP';
 
   function init(options?: NavigationInitActionPayload): NavigationInitAction;
-  function navigate(
-    options: NavigationNavigateActionPayload
-  ): NavigationNavigateAction;
+  function navigate(options: NavigationNavigateActionPayload): NavigationNavigateAction;
   function reset(options: NavigationResetActionPayload): NavigationResetAction;
   function back(options?: NavigationBackActionPayload): NavigationBackAction;
-  function setParams(
-    options: NavigationSetParamsActionPayload
-  ): NavigationSetParamsAction;
+  function setParams(options: NavigationSetParamsActionPayload): NavigationSetParamsAction;
   function pop(options: NavigationPopActionPayload): NavigationPopAction;
-  function popToTop(
-    options: NavigationPopToTopActionPayload
-  ): NavigationPopToTopAction;
+  function popToTop(options: NavigationPopToTopActionPayload): NavigationPopToTopAction;
 }
 
 /**
@@ -915,14 +807,8 @@ export interface TransitionerProps {
     prevTransitionProps?: NavigationTransitionProps
   ) => NavigationTransitionSpec;
   navigation: NavigationScreenProp<NavigationState>;
-  onTransitionStart?: (
-    transitionProps: NavigationTransitionProps,
-    prevTransitionProps?: NavigationTransitionProps
-  ) => Promise<void> | void;
-  onTransitionEnd?: (
-    transitionProps: NavigationTransitionProps,
-    prevTransitionProps?: NavigationTransitionProps
-  ) => void;
+  onTransitionStart?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => Promise<void> | void;
+  onTransitionEnd?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => void;
   render: (
     transitionProps: NavigationTransitionProps,
     prevTransitionProps?: NavigationTransitionProps
@@ -940,7 +826,7 @@ export interface TransitionerState {
 export class Transitioner extends React.Component<
   TransitionerProps,
   TransitionerState
-  > { }
+> { }
 
 /**
  * Tab Router
@@ -967,23 +853,12 @@ export function StackRouter(
  *
  * @see https://github.com/react-navigation/react-navigation/blob/master/src/navigators/createNavigator.js
  */
-export interface NavigationDescriptor<Params = NavigationParams> {
-  key: string;
-  state: NavigationLeafRoute<Params> | NavigationStateRoute<Params>;
-  navigation: NavigationScreenProp<any>;
-  getComponent: () => React.ComponentType<{}>;
-}
-
-export type NavigationView<O, S> = React.ComponentType<{
-  descriptors: { [key: string]: NavigationDescriptor };
-} & NavigationInjectedProps>;
-
 export function createNavigator<C, S, Options>(
-  view: NavigationView<Options, S>,
   router: NavigationRouter<S, Options>,
+  routeConfigs?: NavigationRouteConfigMap,
   navigatorConfig?: {} | null,
   navigatorType?: NavigatorType
-): any;
+): (NavigationView: React.ComponentClass<C>) => NavigationNavigator<C, S, Options>;
 
 /**
  * Create an HOC that injects the navigation and manages the navigation state
@@ -1004,10 +879,7 @@ export function createNavigationContainer(
  * BEGIN CUSTOM CONVENIENCE INTERFACES
  */
 
-export interface NavigationScreenProps<
-  Params = NavigationParams,
-  Options = any
-  > {
+export interface NavigationScreenProps<Params = NavigationParams, Options = any> {
   navigation: NavigationScreenProp<NavigationRoute<Params>, Params>;
   screenProps?: { [key: string]: any };
   navigationOptions?: NavigationScreenConfig<Options>;
@@ -1064,7 +936,6 @@ export interface SafeAreaViewProps extends ViewProps {
     horizontal?: SafeAreaViewForceInsetValue;
     vertical?: SafeAreaViewForceInsetValue;
   };
-  children?: React.ReactNode;
 }
 
 export const SafeAreaView: React.ComponentClass<SafeAreaViewProps>;

types/react-navigation/v2/react-navigation-tests.tsx

@@ -0,0 +1,453 @@
+import * as React from 'react';
+import {
+    TouchableOpacity,
+    View,
+    ViewStyle,
+} from 'react-native';
+import {
+    createDrawerNavigator,
+    DrawerNavigatorConfig,
+    NavigationAction,
+    NavigationActions,
+    NavigationBackAction,
+    NavigationInitAction,
+    NavigationNavigateAction,
+    NavigationProp,
+    NavigationResetAction,
+    NavigationRouteConfigMap,
+    NavigationScreenProp,
+    NavigationScreenProps,
+    NavigationSetParamsAction,
+    NavigationStackAction,
+    NavigationStackScreenOptions,
+    NavigationTabScreenOptions,
+    NavigationTransitionProps,
+    createStackNavigator,
+    StackNavigatorConfig,
+    createSwitchNavigator,
+    SwitchNavigatorConfig,
+    TabBarTop,
+    createTabNavigator,
+    TabNavigatorConfig,
+    Transitioner,
+    HeaderBackButton,
+    Header,
+    NavigationContainer,
+    NavigationParams,
+    NavigationPopAction,
+    NavigationPopToTopAction,
+    NavigationScreenComponent,
+    NavigationContainerComponent,
+} from 'react-navigation';
+
+// Constants
+const viewStyle: ViewStyle = {
+    flex: 1,
+    margin: 42,
+    padding: 0,
+    backgroundColor: "white",
+};
+
+const ROUTE_NAME_START_SCREEN = "StartScreen";
+const ROUTE_KEY_START_SCREEN = "StartScreen-key";
+
+interface StartScreenNavigationParams {
+    id: number;
+    s: string;
+}
+
+/**
+ * @desc Simple screen component class with typed component props that should
+ *     receive the navigation prop from the AppNavigator.
+ */
+class StartScreen extends React.Component<NavigationScreenProps<StartScreenNavigationParams>> {
+    render() {
+        // Implicit type checks.
+        const navigationStateParams: StartScreenNavigationParams | undefined = this.props.navigation.state.params;
+        const id = this.props.navigation.state.params && this.props.navigation.state.params.id;
+        const s = this.props.navigation.state.params && this.props.navigation.state.params.s;
+
+        return (
+            <View>
+                <TouchableOpacity onPress={this.navigateToNextScreen} />
+                <TouchableOpacity onPress={this.navigateDifferentlyToNextScreen} />
+            </View>
+        );
+    }
+    private readonly navigateToNextScreen = (): void => {
+        const params = {
+            id: this.props.navigation.state.params && this.props.navigation.state.params.id,
+            name: this.props.navigation.state.params && this.props.navigation.state.params.s,
+        };
+        this.props.navigation.navigate(ROUTE_NAME_NEXT_SCREEN, params);
+    }
+    private readonly navigateDifferentlyToNextScreen = (): void => {
+        const params = {
+            id: this.props.navigation.state.params && this.props.navigation.state.params.id,
+            name: this.props.navigation.state.params && this.props.navigation.state.params.s,
+        };
+        this.props.navigation.navigate({routeName: ROUTE_NAME_NEXT_SCREEN, params});
+    }
+}
+
+const ROUTE_NAME_NEXT_SCREEN = "NextScreen";
+
+interface NextScreenNavigationParams {
+    id: number;
+    name: string;
+}
+
+class NextScreen extends React.Component<NavigationScreenProps<NextScreenNavigationParams>> {
+    render() {
+        // Implicit type checks.
+        const navigationStateParams: NextScreenNavigationParams | undefined = this.props.navigation.state.params;
+        const id = this.props.navigation.state.params && this.props.navigation.state.params.id;
+        const name = this.props.navigation.getParam('name', 'Peter');
+
+        return (
+            <View />
+        );
+    }
+}
+
+const navigationOptions = {
+    headerBackTitle: null,
+};
+const initialRouteParams: StartScreenNavigationParams = {
+    id: 1,
+    s: "Start",
+};
+const routeConfigMap: NavigationRouteConfigMap = {
+    [ROUTE_NAME_START_SCREEN]: {
+        path: "start",
+        screen: StartScreen,
+    },
+    [ROUTE_NAME_NEXT_SCREEN]: {
+        path: "next",
+        screen: NextScreen,
+    },
+};
+export const AppNavigator = createStackNavigator(
+    routeConfigMap,
+    {
+        initialRouteName: ROUTE_NAME_START_SCREEN,
+        initialRouteKey: ROUTE_KEY_START_SCREEN,
+        initialRouteParams,
+        navigationOptions,
+    },
+);
+
+interface StatelessScreenParams {
+    testID: string;
+}
+
+const StatelessScreen: NavigationScreenComponent<StatelessScreenParams> = (props) =>
+    <View testID={props.navigation.getParam('testID', 'fallback')}/>;
+
+StatelessScreen.navigationOptions = { title: 'Stateless' };
+
+const SimpleStackNavigator = createStackNavigator(
+    {
+        simple: {
+            screen: StatelessScreen,
+        },
+    }
+);
+
+/**
+ * Tab navigator.
+ */
+
+const tabNavigatorScreenOptions: NavigationTabScreenOptions = {
+    title: 'title',
+    tabBarVisible: true,
+    tabBarIcon: <View />,
+    tabBarLabel: 'label',
+    tabBarOnPress: ({scene, jumpToIndex}) => {}
+};
+
+const tabNavigatorConfig: TabNavigatorConfig = {
+    lazy: true,
+    tabBarComponent: TabBarTop,
+    tabBarOptions: { activeBackgroundColor: "blue" },
+};
+
+const tabNavigatorConfigWithInitialLayout: TabNavigatorConfig = {
+  ...tabNavigatorConfig,
+  initialLayout: { height: 0, width: 100 },
+};
+
+const tabNavigatorConfigWithNavigationOptions: TabNavigatorConfig = {
+    ...tabNavigatorConfig,
+    navigationOptions: {
+        tabBarOnPress: ({scene, jumpToIndex}) => {
+            jumpToIndex(scene.index);
+        },
+        headerStyle: {
+            backgroundColor: 'red',
+        },
+    },
+};
+
+const BasicTabNavigator = createTabNavigator(
+    routeConfigMap,
+    tabNavigatorConfig,
+);
+
+function renderBasicTabNavigator(): JSX.Element {
+    return (
+        <BasicTabNavigator
+            ref={(ref: any) => { }}
+            style={[viewStyle, undefined]} // Test that we are using StyleProp
+        />
+    );
+}
+
+/**
+ * Stack navigator.
+ */
+
+const stackNavigatorScreenOptions: NavigationStackScreenOptions = {
+    title: 'title',
+};
+
+const stackNavigatorConfig: StackNavigatorConfig = {
+    mode: "card",
+    headerMode: "screen",
+    navigationOptions: stackNavigatorScreenOptions,
+};
+
+const BasicStackNavigator = createStackNavigator(
+    routeConfigMap,
+    stackNavigatorConfig,
+);
+
+function renderBasicStackNavigator(): JSX.Element {
+    return (
+        <BasicStackNavigator
+            ref={(ref: any) => { }}
+            style={viewStyle}
+        />
+    );
+}
+
+const stackNavigatorConfigWithNavigationOptionsAsFunction: StackNavigatorConfig = {
+    mode: "card",
+    headerMode: "screen",
+    navigationOptions: ({navigationOptions, navigation, screenProps}) => (stackNavigatorScreenOptions),
+};
+
+const AdvancedStackNavigator = createStackNavigator(
+    routeConfigMap,
+    stackNavigatorConfigWithNavigationOptionsAsFunction
+);
+
+function renderAdvancedStackNavigator(): JSX.Element {
+    return (
+        <AdvancedStackNavigator
+            ref={(ref: any) => { }}
+            style={viewStyle}
+        />
+    );
+}
+
+/**
+ * Switch navigator.
+ */
+
+const switchNavigatorConfig: SwitchNavigatorConfig = {
+    initialRouteName: 'screen',
+    resetOnBlur: false,
+    backBehavior: 'none'
+};
+
+const BasicSwitchNavigator = createSwitchNavigator(
+    routeConfigMap,
+    switchNavigatorConfig,
+);
+
+function renderBasicSwitchNavigator(): JSX.Element {
+    return (
+        <BasicSwitchNavigator
+            ref={(ref: any) => { }}
+            style={viewStyle}
+        />
+    );
+}
+
+const switchNavigatorConfigWithInitialRoute: SwitchNavigatorConfig = {
+    initialRouteName: 'screen',
+    resetOnBlur: false,
+    backBehavior: 'initialRoute'
+};
+
+const SwitchNavigatorWithInitialRoute = createSwitchNavigator(
+    routeConfigMap,
+    switchNavigatorConfigWithInitialRoute,
+);
+
+function renderSwitchNavigatorWithInitialRoute(): JSX.Element {
+    return (
+        <SwitchNavigatorWithInitialRoute
+            ref={(ref: any) => { }}
+            style={viewStyle}
+        />
+    );
+}
+
+/**
+ * Drawer navigator.
+ */
+
+const drawerNavigatorScreenOptions: NavigationTabScreenOptions = {
+    title: 'title',
+};
+
+const drawerNavigatorConfig: DrawerNavigatorConfig = {
+    drawerBackgroundColor: '#777777',
+    contentOptions: {
+        activeTintColor: '#7A9B49',
+        inactiveTintColor: '#FFFFFF',
+    },
+};
+
+const BasicDrawerNavigator = createDrawerNavigator(
+    routeConfigMap,
+    stackNavigatorConfig,
+);
+
+function renderBasicDrawerNavigator(): JSX.Element {
+    return (
+        <BasicDrawerNavigator
+            ref={(ref: any) => { }}
+            style={viewStyle}
+        />
+    );
+}
+
+interface CustomTransitionerProps {
+    navigation: NavigationScreenProp<any, any>;
+}
+/**
+ * @desc Custom transitioner component. Follows react-navigation/src/views/CardStackTransitioner.js.
+ */
+class CustomTransitioner extends React.Component<CustomTransitionerProps, null> {
+    render() {
+        return (
+            <Transitioner
+                configureTransition={this._configureTransition}
+                navigation={this.props.navigation}
+                render={this._render}
+                onTransitionStart={(curr, prev) => {
+                    if (prev) {
+                        prev.position.setValue(curr.navigation.state.index);
+                    }
+                }}
+                onTransitionEnd={(curr, prev) => {
+                    if (prev) {
+                        prev.position.setValue(curr.navigation.state.index);
+                    }
+                }}
+            />
+        );
+    }
+    _render = (props: NavigationTransitionProps, prevProps: NavigationTransitionProps): React.ReactElement<any> => {
+        return (
+            <View />
+        );
+    }
+    _configureTransition = (
+        _transitionProps: NavigationTransitionProps,
+        _prevTransitionProps: NavigationTransitionProps
+    ) => {
+        return {};
+    }
+}
+
+/**
+ * Header
+ */
+function renderHeaderBackButton(schema: string): JSX.Element {
+    switch (schema) {
+        case 'compact':
+            return (
+                <HeaderBackButton />
+            );
+
+        default:
+            return (
+                <HeaderBackButton
+                    onPress={() => 'noop'}
+                    pressColorAndroid="#ccc"
+                    title="Press Me"
+                    titleStyle={{ color: '#333' }}
+                    tintColor="#2196f3"
+                    truncatedTitle="Press"
+                    width={85}
+                />
+            );
+    }
+}
+
+const initAction: NavigationInitAction = NavigationActions.init({
+    params: {
+        foo: "bar"
+    }
+});
+
+const navigateAction: NavigationNavigateAction = NavigationActions.navigate({
+    routeName: "FooScreen",
+    params: {
+        foo: "bar"
+    },
+    action: NavigationActions.navigate({ routeName: "BarScreen" })
+});
+
+const resetAction: NavigationResetAction = NavigationActions.reset({
+    index: 0,
+    key: "foo",
+    actions: [
+        NavigationActions.navigate({ routeName: "FooScreen" })
+    ]
+});
+
+const backAction: NavigationBackAction = NavigationActions.back({
+    key: "foo"
+});
+
+const setParamsAction: NavigationSetParamsAction = NavigationActions.setParams({
+    key: "foo",
+    params: {
+        foo: "bar"
+    }
+});
+
+const popAction: NavigationPopAction = NavigationActions.pop({
+    n: 1,
+    immediate: true
+});
+
+const popToTopAction: NavigationPopToTopAction = NavigationActions.popToTop({
+    key: "foo",
+    immediate: true
+});
+
+class Page1 extends React.Component { }
+
+const RootNavigator: NavigationContainer = createSwitchNavigator({
+    default: { getScreen: () => Page1 },
+});
+
+class Page2 extends React.Component {
+    navigatorRef: NavigationContainerComponent | null;
+
+    componentDidMount() {
+        if (this.navigatorRef) {
+            this.navigatorRef.dispatch(NavigationActions.navigate({ routeName: 'default' }));
+        }
+    }
+
+    render() {
+        return <RootNavigator ref={(instance: NavigationContainerComponent | null): void => { this.navigatorRef = instance; }} />;
+    }
+}

types/react-navigation/v2/tsconfig.json

@@ -0,0 +1,30 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": false,
+        "baseUrl": "../../",
+        "jsx": "react",
+        "typeRoots": [
+            "../../"
+        ],
+        "paths": {
+            "react-navigation": [
+                "react-navigation/v2"
+            ]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "react-navigation-tests.tsx"
+    ]
+}

types/react-navigation/v2/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }