Merge pull request #31236 from denissb/patch-2

[@types/react-navigation] Added support for react-navigation v3

types/react-navigation/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for react-navigation 2.13
+// Type definitions for react-navigation 3.0
 // Project: https://github.com/react-navigation/react-navigation
 // Definitions by: Huhuanming <https://github.com/huhuanming>
 //                 mhcgrq <https://github.com/mhcgrq>
@@ -29,11 +29,12 @@
 //                 Jason Killian <https://github.com/jkillian>
 //                 Jeroen Vervaeke <https://github.com/jeroenvervaeke>
 //                 Fellipe Chagas <https://github.com/chagasaway>
+//                 Deniss Borisovs <https://github.com/denissb>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
 /**
- * Reference: https://github.com/react-navigation/react-navigation/tree/a37473c5e4833f48796ee6c7c9cb4a8ac49d9c06
+ * Reference: https://github.com/react-navigation/react-navigation/tree/4fb6b163acc4e57bb9d0be169b90b07a7d9bf4a8
  *
  * 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
@@ -416,7 +417,7 @@ export interface NavigationSwitchRouterConfig {
   initialRouteName?: string;
   initialRouteParams?: NavigationParams;
   paths?: NavigationPathsConfig;
-  navigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
+  defaultNavigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
   order?: string[];
   backBehavior?: 'none' | 'initialRoute'; // defaults to `'none'`
   resetOnBlur?: boolean; // defaults to `true`
@@ -456,6 +457,7 @@ export interface NavigationStackRouterConfig {
   initialRouteName?: string;
   initialRouteParams?: NavigationParams;
   paths?: NavigationPathsConfig;
+  defaultNavigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
   navigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
   initialRouteKey?: string;
 }
@@ -519,10 +521,12 @@ interface NavigationTabRouterConfigBase {
   backBehavior?: 'none' | 'initialRoute'; // defaults `initialRoute`
 }
 export interface NavigationTabRouterConfig extends NavigationTabRouterConfigBase {
-  navigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
+  defaultNavigationOptions?: NavigationScreenConfig<NavigationScreenOptions>;
+  navigationOptions?: NavigationTabRouterConfigBase;
 }
 export interface NavigationBottomTabRouterConfig extends NavigationTabRouterConfigBase {
-  navigationOptions?: NavigationScreenConfig<NavigationBottomTabScreenOptions>;
+  defaultNavigationOptions?: NavigationScreenConfig<NavigationBottomTabScreenOptions>;
+  navigationOptions?: NavigationTabRouterConfigBase;
 }
 export interface TabScene {
   route: NavigationRoute;
@@ -1250,6 +1254,16 @@ export function createNavigator<S, Options>(
 export function createNavigationContainer(
   Component: NavigationNavigator<any, any, any>
 ): NavigationContainer;
+
+/**
+ * Create an app container to wrap the root navigator
+ *
+ * @see https://github.com/react-navigation/react-navigation-native/blob/098e2e52b349d37357109d5aee545fa74699d3d4/src/createAppContainer.js#L64
+ */
+export function createAppContainer(
+  Component: NavigationNavigator<any, any, any>
+): NavigationContainer;
+
 /**
  * END MANUAL DEFINITIONS OUTSIDE OF TYPEDEFINITION.JS
  */

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 }) => <View />,
-    })
+    }),
+    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 = (
   <NavigationEvents

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

@@ -0,0 +1,669 @@
+import * as React from 'react';
+import {
+    Text,
+    TouchableOpacity,
+    View,
+    ViewStyle,
+} from 'react-native';
+import {
+    createDrawerNavigator,
+    createBottomTabNavigator,
+    DrawerItems,
+    DrawerItemsProps,
+    DrawerNavigatorConfig,
+    NavigationAction,
+    NavigationActions,
+    NavigationEvents,
+    NavigationBackAction,
+    NavigationInitAction,
+    NavigationNavigateAction,
+    NavigationProp,
+    NavigationResetAction,
+    NavigationRoute,
+    NavigationRouteConfigMap,
+    NavigationScreenProp,
+    NavigationScreenProps,
+    NavigationSetParamsAction,
+    NavigationStackAction,
+    NavigationStackScreenOptions,
+    NavigationStateRoute,
+    NavigationTabScreenOptions,
+    NavigationTransitionProps,
+    StackViewTransitionConfigs,
+    createStackNavigator,
+    StackNavigatorConfig,
+    createSwitchNavigator,
+    SwitchNavigatorConfig,
+    TabBarTop,
+    createTabNavigator,
+    TabNavigatorConfig,
+    Transitioner,
+    HeaderBackButton,
+    Header,
+    NavigationContainer,
+    NavigationParams,
+    NavigationPopAction,
+    NavigationPopToTopAction,
+    NavigationScreenComponent,
+    NavigationContainerComponent,
+    withNavigation,
+    NavigationInjectedProps,
+    withNavigationFocus,
+    NavigationFocusInjectedProps
+} 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() {
+        // Injected type checks
+        const props: NavigationInjectedProps<StartScreenNavigationParams> = this.props;
+        // route state...
+        const navigationState: NavigationRoute<StartScreenNavigationParams> = this.props.navigation.state;
+        const index: number = navigationState.index;
+        const key: string = navigationState.key;
+        const routeName: string = navigationState.routeName;
+        const path: string | undefined = navigationState.path;
+        let routes: NavigationRoute[];
+        if (isNavigationStateRoute(navigationState)) {
+            routes = navigationState.routes;
+        }
+        // params...
+        const navigationStateParams: StartScreenNavigationParams | undefined = this.props.navigation.state.params;
+        const id: number | undefined = this.props.navigation.state.params && this.props.navigation.state.params.id;
+        const s: string | undefined = 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() {
+        // Injected type checks
+        const props: NavigationInjectedProps<NextScreenNavigationParams> = this.props;
+        // route state...
+        const navigationState: NavigationRoute<NextScreenNavigationParams> = this.props.navigation.state;
+        const index: number = navigationState.index;
+        const key: string = navigationState.key;
+        const routeName: string = navigationState.routeName;
+        const path: string | undefined = navigationState.path;
+        let routes: NavigationRoute[];
+        if (isNavigationStateRoute(navigationState)) {
+            routes = navigationState.routes;
+        }
+        // params...
+        const navigationStateParams: NextScreenNavigationParams | undefined = navigationState.params;
+        const id = this.props.navigation.state.params && this.props.navigation.state.params.id;
+        const name = this.props.navigation.getParam('name', 'Peter');
+        return (
+            <View />
+        );
+    }
+}
+
+function isNavigationStateRoute<P>(route: NavigationRoute<P>): route is NavigationStateRoute<P> {
+    return !!(route as NavigationStateRoute<P>).routes;
+}
+
+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,
+        headerLayoutPreset: 'center',
+        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" },
+    navigationOptions: () => ({
+        tabBarOnPress: ({ scene, jumpToIndex }) => jumpToIndex(scene.index),
+        tabBarIcon: ({ horizontal }) => <View />,
+    })
+};
+
+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',
+    },
+    drawerLockMode: 'locked-open',
+};
+
+const BasicDrawerNavigator = createDrawerNavigator(
+    routeConfigMap,
+    stackNavigatorConfig,
+);
+
+const Drawer = (props: DrawerItemsProps) => (
+    <DrawerItems {...props} />
+);
+
+const DrawerNavigatorWithCustomDrawer = createDrawerNavigator(
+    routeConfigMap,
+    {
+        contentComponent: Drawer,
+    }
+);
+
+function renderBasicDrawerNavigator(): JSX.Element {
+    return (
+        <BasicDrawerNavigator
+            ref={(ref: any) => { }}
+            style={viewStyle}
+        />
+    );
+}
+
+interface ParamsOnStateProps {
+    navigation: NavigationScreenProp<{}, { foobar: string }>;
+}
+
+class ParamsOnState extends React.Component<ParamsOnStateProps> {
+    render() {
+        if (this.props.navigation.state.params) {
+            // $ExpectType string
+            this.props.navigation.state.params.foobar;
+        } else {
+            // $ExpectType undefined
+            this.props.navigation.state.params;
+        }
+
+        return <View />;
+    }
+}
+
+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
+ */
+const height = Header.HEIGHT;
+
+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 backAction: NavigationBackAction = NavigationActions.back({
+    key: "foo"
+});
+
+const setParamsAction: NavigationSetParamsAction = NavigationActions.setParams({
+    key: "foo",
+    params: {
+        foo: "bar"
+    }
+});
+
+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; }} />;
+    }
+}
+
+const BottomStack = createBottomTabNavigator({
+    Posts: {
+        screen: Page2,
+        navigationOptions: ({ navigation }: NavigationScreenProps) => {
+            let tabBarVisible = true;
+
+            if (navigation.state.index > 0) {
+                tabBarVisible = false;
+            }
+
+            return {
+                tabBarVisible
+            };
+        }
+    }
+}, {
+    navigationOptions: () => ({
+        tabBarOnPress: ({ defaultHandler }) => defaultHandler()
+    })
+});
+
+const CustomHeaderStack = createStackNavigator({
+    Page1: { screen: Page1 },
+    Page2: { screen: Page2 }
+},
+{
+    navigationOptions: {
+        header: headerProps => {
+            const { scene } = headerProps;
+            const { options } = scene.descriptor;
+            const { title, headerStyle, headerTitleStyle } = options;
+            return (
+                <View style={headerStyle}>
+                    <Text style={headerTitleStyle}>{title}</Text>
+                </View>
+            );
+        }
+    }
+});
+
+interface ScreenProps {
+    name: string;
+    optionalAge?: number;
+    onPlay(): void;
+}
+
+class SetParamsTest extends React.Component<NavigationScreenProps<ScreenProps>> {
+    componentDidMount() {
+        this.props.navigation.setParams({
+            onPlay: this.onPlay
+        });
+    }
+
+    onPlay = () => {
+        //
+    }
+
+    render() {
+        const name = this.props.navigation.getParam('name');
+        const age = this.props.navigation.getParam('optionalAge');
+
+        // $ExpectType number | undefined
+        this.props.navigation.getParam('optionalAge');
+
+        // $ExpectType number
+        this.props.navigation.getParam('optionalAge', 0);
+
+        return (
+            <Text>My name is {name} and I am {age} years old.</Text>
+        );
+    }
+}
+
+// Test withNavigation
+
+interface BackButtonProps { title: string; }
+class MyBackButton extends React.Component<BackButtonProps & NavigationInjectedProps> {
+    triggerBack() {
+        console.log("Not implemented, すみません");
+    }
+    render() {
+      return <button title={this.props.title} onClick={() => { this.props.navigation.goBack(); }} />;
+    }
+}
+
+// withNavigation returns a component that wraps MyBackButton and passes in the navigation prop.
+// If you have class methods, you should have a way to use them.
+const BackButtonWithNavigation = withNavigation(MyBackButton);
+const BackButtonInstance = <BackButtonWithNavigation
+    title="Back" onRef={ref => {
+        // ref is inferred as MyBackButton | null
+        if (!ref) return;
+        ref.triggerBack();
+    }}
+/>;
+
+function StatelessBackButton(props: BackButtonProps & NavigationInjectedProps) {
+  return <MyBackButton {...props} />;
+}
+
+// Wrapped stateless components don't accept an onRef
+const StatelessBackButtonWithNavigation = withNavigation(StatelessBackButton);
+const StatelessBackButtonInstance = <StatelessBackButtonWithNavigation title="Back" />;
+
+// The old way of passing in the props should still work
+const BackButtonWithNavigationWithExplicitProps = withNavigation<BackButtonProps>(MyBackButton);
+const BackButtonWithExplicitPropsInstance = <BackButtonWithNavigationWithExplicitProps
+    title="Back" onRef={ref => {
+        if (!ref) return;
+        // We can't infer the component type if we pass in the props
+        (ref as MyBackButton).triggerBack();
+    }}
+/>;
+
+// Test withNavigationFocus
+
+interface MyFocusedComponentProps { expectsFocus: boolean; }
+class MyFocusedComponent extends React.Component<MyFocusedComponentProps & NavigationFocusInjectedProps> {
+    render() {
+      return <button title={`${this.props.expectsFocus} vs ${this.props.isFocused}`} onClick={() => { this.props.navigation.goBack(); }} />;
+    }
+}
+
+// withNavigationFocus returns a component that wraps MyFocusedComponent and passes in the
+// navigation and isFocused prop
+const MyFocusedComponentWithNavigationFocus = withNavigationFocus(MyFocusedComponent);
+const MyFocusedComponentInstance = <MyFocusedComponentWithNavigationFocus
+    expectsFocus={true} onRef={ref => { const backButtonRef = ref; }}
+/>;
+
+// Test Screen with params
+
+interface MyScreenParams { title: string; }
+class MyScreen extends React.Component<NavigationInjectedProps<MyScreenParams>> {
+    render() {
+        const title = this.props.navigation.getParam('title');
+        return <button title={title} onClick={() => { this.props.navigation.goBack(); }} />;
+    }
+}
+
+// Test createStackNavigator
+
+createStackNavigator(
+    routeConfigMap,
+    {transitionConfig: () => ({screenInterpolator: StackViewTransitionConfigs.SlideFromRightIOS.screenInterpolator})}
+);
+
+// Test NavigationEvents component
+const ViewWithNavigationEvents = (
+  <NavigationEvents
+    onWillFocus={console.log}
+    onDidFocus={console.log}
+    onWillBlur={console.log}
+    onDidBlur={console.log}
+  />
+);

types/react-navigation/v2/tsconfig.json

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

types/react-navigation/v2/tslint.json

@@ -0,0 +1,7 @@
+{
+    "extends": "dtslint/dt.json",
+    "rules": {
+        // TODO
+        "no-any-union": false
+    }
+}