diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 0e6bb2d94c..9ec404a6fb 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-navigation 1.2 +// Type definitions for react-navigation 1.5 // Project: https://github.com/react-navigation/react-navigation // Definitions by: Huhuanming // mhcgrq @@ -45,7 +45,6 @@ export interface HeaderProps extends NavigationSceneRendererProps { mode: HeaderMode; router: NavigationRouter< NavigationState, - NavigationAction, NavigationStackScreenOptions >; getScreenDetails: (navigationScene: NavigationScene) => NavigationScreenDetails< @@ -75,9 +74,9 @@ export interface NavigationState { routes: any[]; } -export type NavigationRoute = NavigationLeafRoute | NavigationStateRoute; +export type NavigationRoute = NavigationLeafRoute | NavigationStateRoute; -export interface NavigationLeafRoute { +export interface NavigationLeafRoute { /** * React's key used by some navigators. No need to specify these manually, * they will be defined by the router. @@ -96,23 +95,23 @@ export interface NavigationLeafRoute { * Params passed to this route when navigating to it, * e.g. `{ car_id: 123 }` in a route that displays a car. */ - params?: NavigationParams; + params?: Params; } -export type NavigationStateRoute = NavigationLeafRoute & NavigationState; +export type NavigationStateRoute = NavigationLeafRoute & NavigationState; export type NavigationScreenOptionsGetter = ( - navigation: NavigationScreenProp, + navigation: NavigationScreenProp>, screenProps?: { [key: string]: any } ) => Options; -export interface NavigationRouter { +export interface NavigationRouter { /** * The reducer that outputs the new navigation state for a given action, with * an optional previous state. When the action is considered handled but the * state is unchanged, the output state is null. */ - getStateForAction: (action: Action, 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 @@ -121,7 +120,7 @@ export interface NavigationRouter { getActionForPathAndParams: ( path: string, params?: NavigationParams - ) => (Action | null); + ) => (NavigationAction | null); getPathAndParamsForState: ( state: State @@ -175,16 +174,22 @@ export type NavigationScreenConfig = export type NavigationComponent = NavigationScreenComponent - | NavigationNavigator; + | NavigationNavigator; -export interface NavigationScreenComponent extends React.ComponentClass { - navigationOptions?: NavigationScreenConfig; -} +export type NavigationScreenComponent< + Options = {}, + Props = {} +> = React.ComponentType & Props> & +({} | { navigationOptions: NavigationScreenConfig }); -export interface NavigationNavigator extends React.ComponentClass { - router?: NavigationRouter; - navigationOptions?: NavigationScreenConfig; -} +export type NavigationNavigator< + State = NavigationState, + Options = {}, + Props = {} +> = React.ComponentType & Props> & { + router: NavigationRouter, + navigationOptions?: NavigationScreenConfig, +}; export interface NavigationParams { [key: string]: any; @@ -452,10 +457,10 @@ export interface NavigationScreenProp { popToTop: (params?: { immediate?: boolean }) => boolean; } -export interface NavigationNavigatorProps { +export interface NavigationNavigatorProps { navigation?: NavigationProp; screenProps?: { [key: string]: any }; - navigationOptions?: any; + navigationOptions?: O; } /** @@ -587,7 +592,7 @@ export interface NavigationContainerProps { export interface NavigationContainer extends React.ComponentClass< NavigationContainerProps & NavigationNavigatorProps > { - router: NavigationRouter; + router: NavigationRouter; screenProps: { [key: string]: any }; navigationOptions: any; state: { nav: NavigationState | null }; @@ -810,7 +815,7 @@ export class Transitioner extends React.Component< export function TabRouter( routeConfigs: NavigationRouteConfigMap, config: NavigationTabRouterConfig -): NavigationRouter; +): NavigationRouter; /** * Stack Router @@ -820,19 +825,19 @@ export function TabRouter( export function StackRouter( routeConfigs: NavigationRouteConfigMap, config: NavigationTabRouterConfig -): NavigationRouter; +): NavigationRouter; /** * Create Navigator * * @see https://github.com/react-navigation/react-navigation/blob/master/src/navigators/createNavigator.js */ -export function createNavigator( - router: NavigationRouter, +export function createNavigator( + router: NavigationRouter, routeConfigs?: NavigationRouteConfigMap, navigatorConfig?: {} | null, navigatorType?: NavigatorType -): (NavigationView: React.ComponentClass) => NavigationNavigator; +): (NavigationView: React.ComponentClass) => NavigationNavigator; /** * Create an HOC that injects the navigation and manages the navigation state @@ -843,7 +848,7 @@ export function createNavigator( * @see https://github.com/react-navigation/react-navigation/blob/master/src/createNavigationContainer.js */ export function createNavigationContainer( - Component: NavigationNavigator + Component: NavigationNavigator ): NavigationContainer; /** * END MANUAL DEFINITIONS OUTSIDE OF TYPEDEFINITION.JS @@ -853,8 +858,8 @@ export function createNavigationContainer( * BEGIN CUSTOM CONVENIENCE INTERFACES */ -export interface NavigationScreenProps { - navigation: NavigationScreenProp; +export interface NavigationScreenProps { + navigation: NavigationScreenProp>; screenProps?: { [key: string]: any }; navigationOptions?: NavigationScreenConfig; } diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index d0e65dfc8e..5c03253d35 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -36,6 +36,7 @@ import { NavigationParams, NavigationPopAction, NavigationPopToTopAction, + NavigationScreenComponent, } from 'react-navigation'; // Constants @@ -48,14 +49,19 @@ const viewStyle: ViewStyle = { const ROUTE_NAME_START_SCREEN = "StartScreen"; +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 { +class StartScreen extends React.Component> { render() { // Implicit type checks. - const navigationStateParams = this.props.navigation.state.params; + 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; @@ -84,10 +90,15 @@ class StartScreen extends React.Component { const ROUTE_NAME_NEXT_SCREEN = "NextScreen"; -class NextScreen extends React.Component { +interface NextScreenNavigationParams { + id: number; + name: string; +} + +class NextScreen extends React.Component> { render() { // Implicit type checks. - const navigationStateParams = this.props.navigation.state.params; + 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.state.params && this.props.navigation.state.params.name; @@ -100,7 +111,7 @@ class NextScreen extends React.Component { const navigationOptions = { headerBackTitle: null, }; -const initialRouteParams: NavigationParams = { +const initialRouteParams: StartScreenNavigationParams = { id: 1, s: "Start", }; @@ -123,6 +134,16 @@ export const AppNavigator = StackNavigator( }, ); +const StatelessScreen: NavigationScreenComponent = () => ; + +const SimpleStackNavigator = StackNavigator( + { + simple: { + screen: StatelessScreen, + }, + } +); + /** * Router. */