diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 1233ca39e3..561558d540 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.5 +// Type definitions for react-navigation 2.0 // Project: https://github.com/react-navigation/react-navigation // Definitions by: Huhuanming // mhcgrq @@ -16,11 +16,12 @@ // Armando Assuncao // Ciaran Liedeman // Edward Sammut Alessi +// Jérémy Magrin // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 /** - * Reference: https://github.com/react-navigation/react-navigation/tree/3f3ef6485c8932f49fddc3dd2c508629110bf2b6 + * Reference: https://github.com/react-navigation/react-navigation/tree/a37473c5e4833f48796ee6c7c9cb4a8ac49d9c06 * * 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 @@ -43,15 +44,24 @@ 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; + getScreenDetails: ( + navigationScene: NavigationScene + ) => NavigationScreenDetails; + leftInterpolator: (props: NavigationSceneRendererProps) => {}; + titleInterpolator: (props: NavigationSceneRendererProps) => {}; + rightInterpolator: (props: NavigationSceneRendererProps) => {}; style: StyleProp; } @@ -73,12 +83,14 @@ export interface NavigationState { * Index refers to the active child route in the routes array. */ index: number; - routes: any[]; + routes: NavigationRoute[]; } -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. @@ -100,7 +112,9 @@ export interface NavigationLeafRoute { params?: Params; } -export type NavigationStateRoute = NavigationLeafRoute & NavigationState; +export type NavigationStateRoute< + NavigationLeafRouteParams + > = NavigationLeafRoute & NavigationState; export type NavigationScreenOptionsGetter = ( navigation: NavigationScreenProp>, @@ -113,7 +127,10 @@ export interface NavigationRouter { * 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 @@ -122,14 +139,14 @@ export interface NavigationRouter { getActionForPathAndParams: ( path: string, params?: NavigationParams - ) => (NavigationAction | null); + ) => NavigationAction | null; getPathAndParamsForState: ( state: State ) => { - path: string, - params?: NavigationParams, - }; + path: string; + params?: NavigationParams; + }; getComponentForRouteName: (routeName: string) => NavigationComponent; @@ -147,11 +164,8 @@ export interface NavigationRouter { } export type NavigationScreenOption = - T - | (( - navigation: NavigationScreenProp, - config: T - ) => T); + | T + | ((navigation: NavigationScreenProp, config: T) => T); export interface NavigationScreenDetails { options: T; @@ -159,7 +173,9 @@ export interface NavigationScreenDetails { navigation: NavigationScreenProp; } -export type NavigationScreenOptions = NavigationStackScreenOptions & NavigationTabScreenOptions & NavigationDrawerScreenOptions; +export type NavigationScreenOptions = NavigationStackScreenOptions & + NavigationTabScreenOptions & + NavigationDrawerScreenOptions; export interface NavigationScreenConfigProps { navigation: NavigationScreenProp; @@ -167,30 +183,34 @@ export interface NavigationScreenConfigProps { } export type NavigationScreenConfig = - Options - | ((navigationOptionsContainer: NavigationScreenConfigProps & { - navigationOptions: NavigationScreenProp, - }) => Options); + | Options + | (( + navigationOptionsContainer: NavigationScreenConfigProps & { + navigationOptions: NavigationScreenProp; + } + ) => Options); export type NavigationComponent = - NavigationScreenComponent - | NavigationNavigator; + | NavigationScreenComponent + | NavigationNavigator + | any; export type NavigationScreenComponent< - Params = NavigationParams, - Options = {}, - Props = {} -> = React.ComponentType & Props> & -{ navigationOptions?: NavigationScreenConfig }; + Params = NavigationParams, + Options = {}, + Props = {} + > = React.ComponentType & Props> & { + navigationOptions?: NavigationScreenConfig; + }; export type NavigationNavigator< - State = NavigationState, - Options = {}, - Props = {} -> = React.ComponentType & Props> & { - router: NavigationRouter, - navigationOptions?: NavigationScreenConfig, -}; + State = NavigationState, + Options = {}, + Props = {} + > = React.ComponentType & Props> & { + router: NavigationRouter; + navigationOptions?: NavigationScreenConfig; + }; export interface NavigationParams { [key: string]: any; @@ -206,7 +226,8 @@ export interface NavigationNavigateActionPayload { key?: string; } -export interface NavigationNavigateAction extends NavigationNavigateActionPayload { +export interface NavigationNavigateAction + extends NavigationNavigateActionPayload { type: 'Navigation/NAVIGATE'; } @@ -226,7 +247,8 @@ export interface NavigationSetParamsActionPayload { params?: NavigationParams; } -export interface NavigationSetParamsAction extends NavigationSetParamsActionPayload { +export interface NavigationSetParamsAction + extends NavigationSetParamsActionPayload { type: 'Navigation/SET_PARAMS'; } @@ -271,40 +293,70 @@ 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; transitionConfig?: ( transitionProps: NavigationTransitionProps, prevTransitionProps: NavigationTransitionProps, - isModal: boolean, + isModal: boolean ) => TransitionConfig; - onTransitionStart?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => Promise | void; - onTransitionEnd?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => void; + onTransitionStart?: ( + transitionProps: NavigationTransitionProps, + prevTransitionProps?: NavigationTransitionProps + ) => Promise | void; + onTransitionEnd?: ( + transitionProps: NavigationTransitionProps, + prevTransitionProps?: NavigationTransitionProps + ) => void; +} + +/** + * Switch Navigator + */ + +export interface NavigationSwitchRouterConfig { + initialRouteName?: string; + initialRouteParams?: NavigationParams; + paths?: NavigationPathsConfig; + navigationOptions?: NavigationScreenConfig; + order?: string[]; + backBehavior?: 'none' | 'initialRoute'; // defaults to `'none'` + resetOnBlur?: boolean; // defaults to `true` } export interface NavigationStackScreenOptions { title?: string; - header?: (React.ReactElement | ((headerProps: HeaderProps) => React.ReactElement)) | null; + header?: + | ( + | React.ReactElement + | ((headerProps: HeaderProps) => React.ReactElement)) + | null; headerTransparent?: boolean; headerTitle?: string | React.ReactElement; headerTitleStyle?: StyleProp; + headerTitleAllowFontScaling?: boolean; headerTintColor?: string; headerLeft?: React.ReactElement; headerBackTitle?: string | null; + headerBackImage?: React.ReactElement; headerTruncatedBackTitle?: string; headerBackTitleStyle?: StyleProp; headerPressColorAndroid?: string; headerRight?: React.ReactElement; headerStyle?: StyleProp; + headerForceInset?: HeaderForceInset; headerBackground?: React.ReactNode | React.ReactType; gesturesEnabled?: boolean; gestureResponseDistance?: { vertical?: number; horizontal?: number }; + gestureDirection?: 'default' | 'inverted'; } export interface NavigationStackRouterConfig { @@ -317,7 +369,7 @@ export interface NavigationStackRouterConfig { } export type NavigationStackAction = - NavigationInitAction + | NavigationInitAction | NavigationNavigateAction | NavigationBackAction | NavigationSetParamsAction @@ -326,25 +378,30 @@ export type NavigationStackAction = | NavigationPopToTopAction; export type NavigationTabAction = - NavigationInitAction + | NavigationInitAction | NavigationNavigateAction | NavigationBackAction; export type NavigationAction = - NavigationInitAction + | NavigationInitAction | NavigationStackAction | NavigationTabAction; -export type NavigationRouteConfig = NavigationComponent | ({ - navigationOptions?: NavigationScreenConfig, - path?: string, -} & NavigationScreenRouteConfig); +export type NavigationRouteConfig = + | NavigationComponent + | ({ + navigationOptions?: NavigationScreenConfig; + 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; @@ -352,6 +409,7 @@ export interface NavigationPathsConfig { export interface NavigationTabRouterConfig { initialRouteName?: string; + initialRouteParams?: NavigationParams; paths?: NavigationPathsConfig; navigationOptions?: NavigationScreenConfig; order?: string[]; // todo: type these as the real route names rather than 'string' @@ -360,45 +418,48 @@ 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 - | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< - any - > | null)); + | React.ReactElement + | (( + options: { tintColor: string | null; focused: boolean } + ) => React.ReactElement | null); tabBarLabel?: - string - | React.ReactElement - | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< - any - > | string | null)); + | string + | React.ReactElement + | (( + options: { tintColor: string | null; focused: boolean } + ) => React.ReactElement | 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 - | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< - any - > | null)); + | React.ReactElement + | (( + options: { tintColor: string | null; focused: boolean } + ) => React.ReactElement | null); drawerLabel?: - string - | React.ReactElement - | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< - any - > | null)); + | string + | React.ReactElement + | (( + options: { tintColor: string | null; focused: boolean } + ) => React.ReactElement | null); + drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open'; } export interface NavigationRouteConfigMap { @@ -413,22 +474,20 @@ export interface NavigationProp { } export type EventType = -| 'willFocus' -| 'didFocus' -| 'willBlur' -| 'didBlur' -| 'action'; + | 'willFocus' + | 'didFocus' + | 'willBlur' + | 'didBlur' + | 'action'; export interface NavigationEventPayload { type: EventType; action: NavigationAction; state: NavigationState; - lastState: NavigationState; + lastState: NavigationState | null | undefined; } -export type NavigationEventCallback = ( - payload: NavigationEventPayload -) => void; +export type NavigationEventCallback = (payload: NavigationEventPayload) => void; export interface NavigationEventSubscription { remove: () => void; @@ -438,8 +497,14 @@ export interface NavigationScreenProp { state: S; dispatch: NavigationDispatch; goBack: (routeKey?: string | null) => boolean; + dismiss: () => boolean; navigate(options: { - routeName: string; + routeName: string | { + routeName: string; + params?: NavigationParams; + action?: NavigationNavigateAction; + key?: string; + }; params?: NavigationParams; action?: NavigationAction; key?: string; @@ -447,8 +512,11 @@ export interface NavigationScreenProp { navigate( routeNameOrOptions: string, params?: NavigationParams, - action?: NavigationAction, + action?: NavigationAction ): boolean; + openDrawer: () => any; + closeDrawer: () => any; + toggleDrawer: () => any; getParam: (param: T, fallback?: P[T]) => P[T]; setParams: (newParams: P) => boolean; addListener: ( @@ -467,6 +535,7 @@ export interface NavigationScreenProp { ) => boolean; pop: (n?: number, params?: { immediate?: boolean }) => boolean; popToTop: (params?: { immediate?: boolean }) => boolean; + isFocused: () => boolean; } export interface NavigationNavigatorProps { @@ -550,6 +619,14 @@ export interface TransitionConfig { // How to animate position and opacity of the screen // based on the value generated by the transitionSpec screenInterpolator?: (props: NavigationSceneRendererProps) => any; + // How to animate position and opacity of the header componetns + // based on the value generated by the transitionSpec + headerLeftInterpolator?: (props: NavigationSceneRendererProps) => any; + headerTitleInterpolator?: (props: NavigationSceneRendererProps) => any; + headerRightInterpolator?: (props: NavigationSceneRendererProps) => any; + // The style of the container. Useful when a scene doesn't have + // 100% opacity and the underlying container is visible. + containerStyle?: StyleProp; } export type NavigationAnimationSetter = ( @@ -558,7 +635,7 @@ export type NavigationAnimationSetter = ( lastState: NavigationState ) => void; -export type NavigationSceneRenderer = () => (React.ReactElement | null); +export type NavigationSceneRenderer = () => React.ReactElement | null; export type NavigationStyleInterpolator = ( props: NavigationSceneRendererProps @@ -567,50 +644,49 @@ 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 function addNavigationHelpers( - navigation: { - state: S; - dispatch: (action: NavigationAction) => any; - addListener?: ( - eventName: string, - callback: NavigationEventCallback - ) => NavigationEventSubscription; - } -): NavigationScreenProp; - -export interface NavigationContainerProps { +export interface NavigationContainerProps { uriPrefix?: string | RegExp; onNavigationStateChange?: ( prevNavigationState: NavigationState, nextNavigationState: NavigationState, - action: NavigationAction, - ) => void; + action: NavigationAction + ) => void | null | undefined; + navigation?: NavigationScreenProp; + persistenceKey?: string | null; + renderLoadingExperimental?: React.ComponentType; + screenProps?: any; + navigationOptions?: O; style?: StyleProp; } -export interface NavigationContainerComponent extends React.Component< +export interface NavigationContainerComponent + extends React.Component< NavigationContainerProps & NavigationNavigatorProps > { dispatch: NavigationDispatch; } -export interface NavigationContainer extends React.ComponentClass< +export interface NavigationContainer + extends React.ComponentClass< NavigationContainerProps & NavigationNavigatorProps > { - new(props: NavigationContainerProps & NavigationNavigatorProps, context?: any): NavigationContainerComponent; + new( + props: NavigationContainerProps & NavigationNavigatorProps, + context?: any + ): NavigationContainerComponent; router: NavigationRouter; screenProps: { [key: string]: any }; @@ -618,14 +694,21 @@ export interface NavigationContainer extends React.ComponentClass< 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, + stackConfig?: StackNavigatorConfig +): NavigationContainer; + +export function createStackNavigator( + routeConfigMap: NavigationRouteConfigMap, + stackConfig?: StackNavigatorConfig ): NavigationContainer; export interface SwitchNavigatorConfig { @@ -636,11 +719,18 @@ export interface SwitchNavigatorConfig { } // 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; @@ -655,21 +745,28 @@ export interface DrawerViewConfig { contentOptions?: any; style?: StyleProp; } -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, - labelStyle?: StyleProp, + activeTintColor?: string; + activeBackgroundColor?: string; + inactiveTintColor?: string; + inactiveBackgroundColor?: string; + style?: StyleProp; + labelStyle?: StyleProp; }; } export function DrawerNavigator( routeConfigMap: NavigationRouteConfigMap, - drawerConfig?: DrawerNavigatorConfig, + drawerConfig?: DrawerNavigatorConfig +): NavigationContainer; + +export function createDrawerNavigator( + routeConfigMap: NavigationRouteConfigMap, + drawerConfig?: DrawerNavigatorConfig ): NavigationContainer; /** @@ -681,23 +778,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, - labelStyle?: StyleProp, - iconStyle?: StyleProp, + activeTintColor?: string; + allowFontScaling?: boolean; + activeBackgroundColor?: string; + inactiveTintColor?: string; + inactiveBackgroundColor?: string; + showLabel?: boolean; + style?: StyleProp; + labelStyle?: StyleProp; + iconStyle?: StyleProp; // Top - showIcon?: boolean, - upperCaseLabel?: boolean, - pressColor?: string, - pressOpacity?: number, - scrollEnabled?: boolean, - tabStyle?: StyleProp, - indicatorStyle?: StyleProp, + showIcon?: boolean; + upperCaseLabel?: boolean; + pressColor?: string; + pressOpacity?: number; + scrollEnabled?: boolean; + tabStyle?: StyleProp; + indicatorStyle?: StyleProp; }; swipeEnabled?: boolean; animationEnabled?: boolean; @@ -705,16 +802,33 @@ 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, + 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 ): NavigationContainer; export interface TabBarTopProps { @@ -729,15 +843,17 @@ export interface TabBarTopProps { tabBarPosition: string; navigation: NavigationScreenProp; 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; labelStyle?: TextStyle; iconStyle?: ViewStyle; @@ -754,15 +870,17 @@ export interface TabBarBottomProps { position: AnimatedValue; navigation: NavigationScreenProp; 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; @@ -789,12 +907,18 @@ 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; } /** @@ -807,8 +931,14 @@ export interface TransitionerProps { prevTransitionProps?: NavigationTransitionProps ) => NavigationTransitionSpec; navigation: NavigationScreenProp; - onTransitionStart?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => Promise | void; - onTransitionEnd?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => void; + onTransitionStart?: ( + transitionProps: NavigationTransitionProps, + prevTransitionProps?: NavigationTransitionProps + ) => Promise | void; + onTransitionEnd?: ( + transitionProps: NavigationTransitionProps, + prevTransitionProps?: NavigationTransitionProps + ) => void; render: ( transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps @@ -826,7 +956,7 @@ export interface TransitionerState { export class Transitioner extends React.Component< TransitionerProps, TransitionerState -> { } + > { } /** * Tab Router @@ -853,12 +983,23 @@ export function StackRouter( * * @see https://github.com/react-navigation/react-navigation/blob/master/src/navigators/createNavigator.js */ -export function createNavigator( +export interface NavigationDescriptor { + key: string; + state: NavigationLeafRoute | NavigationStateRoute; + navigation: NavigationScreenProp; + getComponent: () => React.ComponentType; +} + +export type NavigationView = React.ComponentType<{ + descriptors: { [key: string]: NavigationDescriptor }; +} & NavigationInjectedProps>; + +export function createNavigator( + view: NavigationView, router: NavigationRouter, - routeConfigs?: NavigationRouteConfigMap, navigatorConfig?: {} | null, navigatorType?: NavigatorType -): (NavigationView: React.ComponentClass) => NavigationNavigator; +): any; /** * Create an HOC that injects the navigation and manages the navigation state @@ -879,7 +1020,10 @@ export function createNavigationContainer( * BEGIN CUSTOM CONVENIENCE INTERFACES */ -export interface NavigationScreenProps { +export interface NavigationScreenProps< + Params = NavigationParams, + Options = any + > { navigation: NavigationScreenProp, Params>; screenProps?: { [key: string]: any }; navigationOptions?: NavigationScreenConfig; @@ -936,6 +1080,7 @@ export interface SafeAreaViewProps extends ViewProps { horizontal?: SafeAreaViewForceInsetValue; vertical?: SafeAreaViewForceInsetValue; }; + children?: React.ReactNode; } export const SafeAreaView: React.ComponentClass; diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index b00b0a27fc..b59474bd11 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -5,7 +5,7 @@ import { ViewStyle, } from 'react-native'; import { - DrawerNavigator, + createDrawerNavigator, DrawerNavigatorConfig, NavigationAction, NavigationActions, @@ -22,15 +22,14 @@ import { NavigationStackScreenOptions, NavigationTabScreenOptions, NavigationTransitionProps, - StackNavigator, + createStackNavigator, StackNavigatorConfig, - SwitchNavigator, + createSwitchNavigator, SwitchNavigatorConfig, TabBarTop, - TabNavigator, + createTabNavigator, TabNavigatorConfig, Transitioner, - addNavigationHelpers, HeaderBackButton, Header, NavigationContainer, @@ -128,7 +127,7 @@ const routeConfigMap: NavigationRouteConfigMap = { screen: NextScreen, }, }; -export const AppNavigator = StackNavigator( +export const AppNavigator = createStackNavigator( routeConfigMap, { initialRouteName: ROUTE_NAME_START_SCREEN, @@ -147,7 +146,7 @@ const StatelessScreen: NavigationScreenComponent = (props StatelessScreen.navigationOptions = { title: 'Stateless' }; -const SimpleStackNavigator = StackNavigator( +const SimpleStackNavigator = createStackNavigator( { simple: { screen: StatelessScreen, @@ -155,20 +154,6 @@ const SimpleStackNavigator = StackNavigator( } ); -/** - * Router. - */ -const Router = (props: any) => ( - true, - state: {}, - }) - } - /> -); - /** * Tab navigator. */ @@ -204,7 +189,7 @@ const tabNavigatorConfigWithNavigationOptions: TabNavigatorConfig = { }, }; -const BasicTabNavigator = TabNavigator( +const BasicTabNavigator = createTabNavigator( routeConfigMap, tabNavigatorConfig, ); @@ -232,7 +217,7 @@ const stackNavigatorConfig: StackNavigatorConfig = { navigationOptions: stackNavigatorScreenOptions, }; -const BasicStackNavigator = StackNavigator( +const BasicStackNavigator = createStackNavigator( routeConfigMap, stackNavigatorConfig, ); @@ -252,7 +237,7 @@ const stackNavigatorConfigWithNavigationOptionsAsFunction: StackNavigatorConfig navigationOptions: ({navigationOptions, navigation, screenProps}) => (stackNavigatorScreenOptions), }; -const AdvancedStackNavigator = StackNavigator( +const AdvancedStackNavigator = createStackNavigator( routeConfigMap, stackNavigatorConfigWithNavigationOptionsAsFunction ); @@ -276,7 +261,7 @@ const switchNavigatorConfig: SwitchNavigatorConfig = { backBehavior: 'none' }; -const BasicSwitchNavigator = SwitchNavigator( +const BasicSwitchNavigator = createSwitchNavigator( routeConfigMap, switchNavigatorConfig, ); @@ -296,7 +281,7 @@ const switchNavigatorConfigWithInitialRoute: SwitchNavigatorConfig = { backBehavior: 'initialRoute' }; -const SwitchNavigatorWithInitialRoute = SwitchNavigator( +const SwitchNavigatorWithInitialRoute = createSwitchNavigator( routeConfigMap, switchNavigatorConfigWithInitialRoute, ); @@ -326,7 +311,7 @@ const drawerNavigatorConfig: DrawerNavigatorConfig = { }, }; -const BasicDrawerNavigator = DrawerNavigator( +const BasicDrawerNavigator = createDrawerNavigator( routeConfigMap, stackNavigatorConfig, ); @@ -449,7 +434,7 @@ const popToTopAction: NavigationPopToTopAction = NavigationActions.popToTop({ class Page1 extends React.Component { } -const RootNavigator: NavigationContainer = SwitchNavigator({ +const RootNavigator: NavigationContainer = createSwitchNavigator({ default: { getScreen: () => Page1 }, }); diff --git a/types/react-navigation/tsconfig.json b/types/react-navigation/tsconfig.json index ac0fcf1f1f..1afd5d30f6 100644 --- a/types/react-navigation/tsconfig.json +++ b/types/react-navigation/tsconfig.json @@ -9,12 +9,20 @@ "noImplicitThis": true, "strictNullChecks": true, "strictFunctionTypes": false, - "baseUrl": "../", + "baseUrl": "../../", "jsx": "react", "typeRoots": [ - "../" + "../../" ], "types": [], + "paths": { + "react-navigation": [ + "react-navigation/v2" + ], + "react-navigation/*": [ + "react-navigation/v2/*" + ] + }, "noEmit": true, "forceConsistentCasingInFileNames": true }, @@ -22,4 +30,4 @@ "index.d.ts", "react-navigation-tests.tsx" ] -} \ No newline at end of file +} diff --git a/types/react-navigation/tslint.json b/types/react-navigation/tslint.json index 3db14f85ea..b1439230db 100644 --- a/types/react-navigation/tslint.json +++ b/types/react-navigation/tslint.json @@ -1 +1,7 @@ -{ "extends": "dtslint/dt.json" } +{ + "extends": "dtslint/dt.json", + "rules": { + // TODO + "no-any-union": false + } +} diff --git a/types/react-navigation/v2/index.d.ts b/types/react-navigation/v1/index.d.ts similarity index 67% rename from types/react-navigation/v2/index.d.ts rename to types/react-navigation/v1/index.d.ts index 561558d540..1233ca39e3 100644 --- a/types/react-navigation/v2/index.d.ts +++ b/types/react-navigation/v1/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-navigation 2.0 +// Type definitions for react-navigation 1.5 // Project: https://github.com/react-navigation/react-navigation // Definitions by: Huhuanming // mhcgrq @@ -16,12 +16,11 @@ // Armando Assuncao // Ciaran Liedeman // Edward Sammut Alessi -// Jérémy Magrin // 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,24 +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; - getScreenDetails: ( - navigationScene: NavigationScene - ) => NavigationScreenDetails; - leftInterpolator: (props: NavigationSceneRendererProps) => {}; - titleInterpolator: (props: NavigationSceneRendererProps) => {}; - rightInterpolator: (props: NavigationSceneRendererProps) => {}; + router: NavigationRouter< + NavigationState, + NavigationStackScreenOptions + >; + getScreenDetails: (navigationScene: NavigationScene) => NavigationScreenDetails< + NavigationStackScreenOptions + >; style: StyleProp; } @@ -83,14 +73,12 @@ export interface NavigationState { * Index refers to the active child route in the routes array. */ index: number; - routes: NavigationRoute[]; + 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. @@ -112,9 +100,7 @@ export interface NavigationLeafRoute { params?: Params; } -export type NavigationStateRoute< - NavigationLeafRouteParams - > = NavigationLeafRoute & NavigationState; +export type NavigationStateRoute = NavigationLeafRoute & NavigationState; export type NavigationScreenOptionsGetter = ( navigation: NavigationScreenProp>, @@ -127,10 +113,7 @@ export interface NavigationRouter { * 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 @@ -139,14 +122,14 @@ export interface NavigationRouter { getActionForPathAndParams: ( path: string, params?: NavigationParams - ) => NavigationAction | null; + ) => (NavigationAction | null); getPathAndParamsForState: ( state: State ) => { - path: string; - params?: NavigationParams; - }; + path: string, + params?: NavigationParams, + }; getComponentForRouteName: (routeName: string) => NavigationComponent; @@ -164,8 +147,11 @@ export interface NavigationRouter { } export type NavigationScreenOption = - | T - | ((navigation: NavigationScreenProp, config: T) => T); + T + | (( + navigation: NavigationScreenProp, + config: T + ) => T); export interface NavigationScreenDetails { options: T; @@ -173,9 +159,7 @@ export interface NavigationScreenDetails { navigation: NavigationScreenProp; } -export type NavigationScreenOptions = NavigationStackScreenOptions & - NavigationTabScreenOptions & - NavigationDrawerScreenOptions; +export type NavigationScreenOptions = NavigationStackScreenOptions & NavigationTabScreenOptions & NavigationDrawerScreenOptions; export interface NavigationScreenConfigProps { navigation: NavigationScreenProp; @@ -183,34 +167,30 @@ export interface NavigationScreenConfigProps { } export type NavigationScreenConfig = - | Options - | (( - navigationOptionsContainer: NavigationScreenConfigProps & { - navigationOptions: NavigationScreenProp; - } - ) => Options); + Options + | ((navigationOptionsContainer: NavigationScreenConfigProps & { + navigationOptions: NavigationScreenProp, + }) => Options); export type NavigationComponent = - | NavigationScreenComponent - | NavigationNavigator - | any; + NavigationScreenComponent + | NavigationNavigator; export type NavigationScreenComponent< - Params = NavigationParams, - Options = {}, - Props = {} - > = React.ComponentType & Props> & { - navigationOptions?: NavigationScreenConfig; - }; + Params = NavigationParams, + Options = {}, + Props = {} +> = React.ComponentType & Props> & +{ navigationOptions?: NavigationScreenConfig }; export type NavigationNavigator< - State = NavigationState, - Options = {}, - Props = {} - > = React.ComponentType & Props> & { - router: NavigationRouter; - navigationOptions?: NavigationScreenConfig; - }; + State = NavigationState, + Options = {}, + Props = {} +> = React.ComponentType & Props> & { + router: NavigationRouter, + navigationOptions?: NavigationScreenConfig, +}; export interface NavigationParams { [key: string]: any; @@ -226,8 +206,7 @@ export interface NavigationNavigateActionPayload { key?: string; } -export interface NavigationNavigateAction - extends NavigationNavigateActionPayload { +export interface NavigationNavigateAction extends NavigationNavigateActionPayload { type: 'Navigation/NAVIGATE'; } @@ -247,8 +226,7 @@ export interface NavigationSetParamsActionPayload { params?: NavigationParams; } -export interface NavigationSetParamsAction - extends NavigationSetParamsActionPayload { +export interface NavigationSetParamsAction extends NavigationSetParamsActionPayload { type: 'Navigation/SET_PARAMS'; } @@ -293,70 +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; transitionConfig?: ( transitionProps: NavigationTransitionProps, prevTransitionProps: NavigationTransitionProps, - isModal: boolean + isModal: boolean, ) => TransitionConfig; - onTransitionStart?: ( - transitionProps: NavigationTransitionProps, - prevTransitionProps?: NavigationTransitionProps - ) => Promise | void; - onTransitionEnd?: ( - transitionProps: NavigationTransitionProps, - prevTransitionProps?: NavigationTransitionProps - ) => void; -} - -/** - * Switch Navigator - */ - -export interface NavigationSwitchRouterConfig { - initialRouteName?: string; - initialRouteParams?: NavigationParams; - paths?: NavigationPathsConfig; - navigationOptions?: NavigationScreenConfig; - order?: string[]; - backBehavior?: 'none' | 'initialRoute'; // defaults to `'none'` - resetOnBlur?: boolean; // defaults to `true` + onTransitionStart?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => Promise | void; + onTransitionEnd?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => void; } export interface NavigationStackScreenOptions { title?: string; - header?: - | ( - | React.ReactElement - | ((headerProps: HeaderProps) => React.ReactElement)) - | null; + header?: (React.ReactElement | ((headerProps: HeaderProps) => React.ReactElement)) | null; headerTransparent?: boolean; headerTitle?: string | React.ReactElement; headerTitleStyle?: StyleProp; - headerTitleAllowFontScaling?: boolean; headerTintColor?: string; headerLeft?: React.ReactElement; headerBackTitle?: string | null; - headerBackImage?: React.ReactElement; headerTruncatedBackTitle?: string; headerBackTitleStyle?: StyleProp; headerPressColorAndroid?: string; headerRight?: React.ReactElement; headerStyle?: StyleProp; - headerForceInset?: HeaderForceInset; headerBackground?: React.ReactNode | React.ReactType; gesturesEnabled?: boolean; gestureResponseDistance?: { vertical?: number; horizontal?: number }; - gestureDirection?: 'default' | 'inverted'; } export interface NavigationStackRouterConfig { @@ -369,7 +317,7 @@ export interface NavigationStackRouterConfig { } export type NavigationStackAction = - | NavigationInitAction + NavigationInitAction | NavigationNavigateAction | NavigationBackAction | NavigationSetParamsAction @@ -378,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; - path?: string; - } & NavigationScreenRouteConfig); +export type NavigationRouteConfig = NavigationComponent | ({ + navigationOptions?: NavigationScreenConfig, + 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; @@ -409,7 +352,6 @@ export interface NavigationPathsConfig { export interface NavigationTabRouterConfig { initialRouteName?: string; - initialRouteParams?: NavigationParams; paths?: NavigationPathsConfig; navigationOptions?: NavigationScreenConfig; order?: string[]; // todo: type these as the real route names rather than 'string' @@ -418,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 - | (( - options: { tintColor: string | null; focused: boolean } - ) => React.ReactElement | null); + React.ReactElement + | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< + any + > | null)); tabBarLabel?: - | string - | React.ReactElement - | (( - options: { tintColor: string | null; focused: boolean } - ) => React.ReactElement | string | null); + string + | React.ReactElement + | ((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 - | (( - options: { tintColor: string | null; focused: boolean } - ) => React.ReactElement | null); + React.ReactElement + | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< + any + > | null)); drawerLabel?: - | string - | React.ReactElement - | (( - options: { tintColor: string | null; focused: boolean } - ) => React.ReactElement | null); - drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open'; + string + | React.ReactElement + | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< + any + > | null)); } export interface NavigationRouteConfigMap { @@ -474,20 +413,22 @@ export interface NavigationProp { } 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; @@ -497,14 +438,8 @@ export interface NavigationScreenProp { 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; @@ -512,11 +447,8 @@ export interface NavigationScreenProp { navigate( routeNameOrOptions: string, params?: NavigationParams, - action?: NavigationAction + action?: NavigationAction, ): boolean; - openDrawer: () => any; - closeDrawer: () => any; - toggleDrawer: () => any; getParam: (param: T, fallback?: P[T]) => P[T]; setParams: (newParams: P) => boolean; addListener: ( @@ -535,7 +467,6 @@ export interface NavigationScreenProp { ) => boolean; pop: (n?: number, params?: { immediate?: boolean }) => boolean; popToTop: (params?: { immediate?: boolean }) => boolean; - isFocused: () => boolean; } export interface NavigationNavigatorProps { @@ -619,14 +550,6 @@ export interface TransitionConfig { // How to animate position and opacity of the screen // based on the value generated by the transitionSpec screenInterpolator?: (props: NavigationSceneRendererProps) => any; - // How to animate position and opacity of the header componetns - // based on the value generated by the transitionSpec - headerLeftInterpolator?: (props: NavigationSceneRendererProps) => any; - headerTitleInterpolator?: (props: NavigationSceneRendererProps) => any; - headerRightInterpolator?: (props: NavigationSceneRendererProps) => any; - // The style of the container. Useful when a scene doesn't have - // 100% opacity and the underlying container is visible. - containerStyle?: StyleProp; } export type NavigationAnimationSetter = ( @@ -635,7 +558,7 @@ export type NavigationAnimationSetter = ( lastState: NavigationState ) => void; -export type NavigationSceneRenderer = () => React.ReactElement | null; +export type NavigationSceneRenderer = () => (React.ReactElement | null); export type NavigationStyleInterpolator = ( props: NavigationSceneRendererProps @@ -644,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 { +export function addNavigationHelpers( + navigation: { + state: S; + dispatch: (action: NavigationAction) => any; + addListener?: ( + eventName: string, + callback: NavigationEventCallback + ) => NavigationEventSubscription; + } +): NavigationScreenProp; + +export interface NavigationContainerProps { uriPrefix?: string | RegExp; onNavigationStateChange?: ( prevNavigationState: NavigationState, nextNavigationState: NavigationState, - action: NavigationAction - ) => void | null | undefined; - navigation?: NavigationScreenProp; - persistenceKey?: string | null; - renderLoadingExperimental?: React.ComponentType; - screenProps?: any; - navigationOptions?: O; + action: NavigationAction, + ) => void; style?: StyleProp; } -export interface NavigationContainerComponent - extends React.Component< +export interface NavigationContainerComponent extends React.Component< NavigationContainerProps & NavigationNavigatorProps > { dispatch: NavigationDispatch; } -export interface NavigationContainer - extends React.ComponentClass< +export interface NavigationContainer extends React.ComponentClass< NavigationContainerProps & NavigationNavigatorProps > { - new( - props: NavigationContainerProps & NavigationNavigatorProps, - context?: any - ): NavigationContainerComponent; + new(props: NavigationContainerProps & NavigationNavigatorProps, context?: any): NavigationContainerComponent; router: NavigationRouter; screenProps: { [key: string]: any }; @@ -694,21 +618,14 @@ 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 { @@ -719,18 +636,11 @@ export interface SwitchNavigatorConfig { } // 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; @@ -745,28 +655,21 @@ export interface DrawerViewConfig { contentOptions?: any; style?: StyleProp; } -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; - labelStyle?: StyleProp; + activeTintColor?: string, + activeBackgroundColor?: string, + inactiveTintColor?: string, + inactiveBackgroundColor?: string, + style?: StyleProp, + labelStyle?: StyleProp, }; } export function DrawerNavigator( routeConfigMap: NavigationRouteConfigMap, - drawerConfig?: DrawerNavigatorConfig -): NavigationContainer; - -export function createDrawerNavigator( - routeConfigMap: NavigationRouteConfigMap, - drawerConfig?: DrawerNavigatorConfig + drawerConfig?: DrawerNavigatorConfig, ): NavigationContainer; /** @@ -778,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; - labelStyle?: StyleProp; - iconStyle?: StyleProp; + activeTintColor?: string, + allowFontScaling?: boolean, + activeBackgroundColor?: string, + inactiveTintColor?: string, + inactiveBackgroundColor?: string, + showLabel?: boolean, + style?: StyleProp, + labelStyle?: StyleProp, + iconStyle?: StyleProp, // Top - showIcon?: boolean; - upperCaseLabel?: boolean; - pressColor?: string; - pressOpacity?: number; - scrollEnabled?: boolean; - tabStyle?: StyleProp; - indicatorStyle?: StyleProp; + showIcon?: boolean, + upperCaseLabel?: boolean, + pressColor?: string, + pressOpacity?: number, + scrollEnabled?: boolean, + tabStyle?: StyleProp, + indicatorStyle?: StyleProp, }; swipeEnabled?: boolean; animationEnabled?: boolean; @@ -802,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 { @@ -843,17 +729,15 @@ export interface TabBarTopProps { tabBarPosition: string; navigation: NavigationScreenProp; 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; labelStyle?: TextStyle; iconStyle?: ViewStyle; @@ -870,17 +754,15 @@ export interface TabBarBottomProps { position: AnimatedValue; navigation: NavigationScreenProp; 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; @@ -907,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; } /** @@ -931,14 +807,8 @@ export interface TransitionerProps { prevTransitionProps?: NavigationTransitionProps ) => NavigationTransitionSpec; navigation: NavigationScreenProp; - onTransitionStart?: ( - transitionProps: NavigationTransitionProps, - prevTransitionProps?: NavigationTransitionProps - ) => Promise | void; - onTransitionEnd?: ( - transitionProps: NavigationTransitionProps, - prevTransitionProps?: NavigationTransitionProps - ) => void; + onTransitionStart?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => Promise | void; + onTransitionEnd?: (transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps) => void; render: ( transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps @@ -956,7 +826,7 @@ export interface TransitionerState { export class Transitioner extends React.Component< TransitionerProps, TransitionerState - > { } +> { } /** * Tab Router @@ -983,23 +853,12 @@ export function StackRouter( * * @see https://github.com/react-navigation/react-navigation/blob/master/src/navigators/createNavigator.js */ -export interface NavigationDescriptor { - key: string; - state: NavigationLeafRoute | NavigationStateRoute; - navigation: NavigationScreenProp; - getComponent: () => React.ComponentType; -} - -export type NavigationView = React.ComponentType<{ - descriptors: { [key: string]: NavigationDescriptor }; -} & NavigationInjectedProps>; - -export function createNavigator( - view: NavigationView, +export function createNavigator( router: NavigationRouter, + routeConfigs?: NavigationRouteConfigMap, navigatorConfig?: {} | null, navigatorType?: NavigatorType -): any; +): (NavigationView: React.ComponentClass) => NavigationNavigator; /** * Create an HOC that injects the navigation and manages the navigation state @@ -1020,10 +879,7 @@ export function createNavigationContainer( * BEGIN CUSTOM CONVENIENCE INTERFACES */ -export interface NavigationScreenProps< - Params = NavigationParams, - Options = any - > { +export interface NavigationScreenProps { navigation: NavigationScreenProp, Params>; screenProps?: { [key: string]: any }; navigationOptions?: NavigationScreenConfig; @@ -1080,7 +936,6 @@ export interface SafeAreaViewProps extends ViewProps { horizontal?: SafeAreaViewForceInsetValue; vertical?: SafeAreaViewForceInsetValue; }; - children?: React.ReactNode; } export const SafeAreaView: React.ComponentClass; diff --git a/types/react-navigation/v2/react-navigation-tests.tsx b/types/react-navigation/v1/react-navigation-tests.tsx similarity index 93% rename from types/react-navigation/v2/react-navigation-tests.tsx rename to types/react-navigation/v1/react-navigation-tests.tsx index b59474bd11..b00b0a27fc 100644 --- a/types/react-navigation/v2/react-navigation-tests.tsx +++ b/types/react-navigation/v1/react-navigation-tests.tsx @@ -5,7 +5,7 @@ import { ViewStyle, } from 'react-native'; import { - createDrawerNavigator, + DrawerNavigator, DrawerNavigatorConfig, NavigationAction, NavigationActions, @@ -22,14 +22,15 @@ import { NavigationStackScreenOptions, NavigationTabScreenOptions, NavigationTransitionProps, - createStackNavigator, + StackNavigator, StackNavigatorConfig, - createSwitchNavigator, + SwitchNavigator, SwitchNavigatorConfig, TabBarTop, - createTabNavigator, + TabNavigator, TabNavigatorConfig, Transitioner, + addNavigationHelpers, HeaderBackButton, Header, NavigationContainer, @@ -127,7 +128,7 @@ const routeConfigMap: NavigationRouteConfigMap = { screen: NextScreen, }, }; -export const AppNavigator = createStackNavigator( +export const AppNavigator = StackNavigator( routeConfigMap, { initialRouteName: ROUTE_NAME_START_SCREEN, @@ -146,7 +147,7 @@ const StatelessScreen: NavigationScreenComponent = (props StatelessScreen.navigationOptions = { title: 'Stateless' }; -const SimpleStackNavigator = createStackNavigator( +const SimpleStackNavigator = StackNavigator( { simple: { screen: StatelessScreen, @@ -154,6 +155,20 @@ const SimpleStackNavigator = createStackNavigator( } ); +/** + * Router. + */ +const Router = (props: any) => ( + true, + state: {}, + }) + } + /> +); + /** * Tab navigator. */ @@ -189,7 +204,7 @@ const tabNavigatorConfigWithNavigationOptions: TabNavigatorConfig = { }, }; -const BasicTabNavigator = createTabNavigator( +const BasicTabNavigator = TabNavigator( routeConfigMap, tabNavigatorConfig, ); @@ -217,7 +232,7 @@ const stackNavigatorConfig: StackNavigatorConfig = { navigationOptions: stackNavigatorScreenOptions, }; -const BasicStackNavigator = createStackNavigator( +const BasicStackNavigator = StackNavigator( routeConfigMap, stackNavigatorConfig, ); @@ -237,7 +252,7 @@ const stackNavigatorConfigWithNavigationOptionsAsFunction: StackNavigatorConfig navigationOptions: ({navigationOptions, navigation, screenProps}) => (stackNavigatorScreenOptions), }; -const AdvancedStackNavigator = createStackNavigator( +const AdvancedStackNavigator = StackNavigator( routeConfigMap, stackNavigatorConfigWithNavigationOptionsAsFunction ); @@ -261,7 +276,7 @@ const switchNavigatorConfig: SwitchNavigatorConfig = { backBehavior: 'none' }; -const BasicSwitchNavigator = createSwitchNavigator( +const BasicSwitchNavigator = SwitchNavigator( routeConfigMap, switchNavigatorConfig, ); @@ -281,7 +296,7 @@ const switchNavigatorConfigWithInitialRoute: SwitchNavigatorConfig = { backBehavior: 'initialRoute' }; -const SwitchNavigatorWithInitialRoute = createSwitchNavigator( +const SwitchNavigatorWithInitialRoute = SwitchNavigator( routeConfigMap, switchNavigatorConfigWithInitialRoute, ); @@ -311,7 +326,7 @@ const drawerNavigatorConfig: DrawerNavigatorConfig = { }, }; -const BasicDrawerNavigator = createDrawerNavigator( +const BasicDrawerNavigator = DrawerNavigator( routeConfigMap, stackNavigatorConfig, ); @@ -434,7 +449,7 @@ const popToTopAction: NavigationPopToTopAction = NavigationActions.popToTop({ class Page1 extends React.Component { } -const RootNavigator: NavigationContainer = createSwitchNavigator({ +const RootNavigator: NavigationContainer = SwitchNavigator({ default: { getScreen: () => Page1 }, }); diff --git a/types/react-navigation/v2/tsconfig.json b/types/react-navigation/v1/tsconfig.json similarity index 65% rename from types/react-navigation/v2/tsconfig.json rename to types/react-navigation/v1/tsconfig.json index 1afd5d30f6..ac0fcf1f1f 100644 --- a/types/react-navigation/v2/tsconfig.json +++ b/types/react-navigation/v1/tsconfig.json @@ -9,20 +9,12 @@ "noImplicitThis": true, "strictNullChecks": true, "strictFunctionTypes": false, - "baseUrl": "../../", + "baseUrl": "../", "jsx": "react", "typeRoots": [ - "../../" + "../" ], "types": [], - "paths": { - "react-navigation": [ - "react-navigation/v2" - ], - "react-navigation/*": [ - "react-navigation/v2/*" - ] - }, "noEmit": true, "forceConsistentCasingInFileNames": true }, @@ -30,4 +22,4 @@ "index.d.ts", "react-navigation-tests.tsx" ] -} +} \ No newline at end of file diff --git a/types/react-navigation/v1/tslint.json b/types/react-navigation/v1/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-navigation/v1/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/react-navigation/v2/tslint.json b/types/react-navigation/v2/tslint.json deleted file mode 100644 index b1439230db..0000000000 --- a/types/react-navigation/v2/tslint.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "dtslint/dt.json", - "rules": { - // TODO - "no-any-union": false - } -}