// Type definitions for react-navigation 3.0.0 // Project: https://github.com/react-navigation/react-navigation // Definitions by: Huhuanming // mhcgrq // fangpenlin // petejkim // Kyle Roach // phanalpha // charlesfamu // Tim Wang // Qibang Sun // Sergei Butko: // Veit Lehmann: // Steven Miller // Armando Assuncao // Ciaran Liedeman // Edward Sammut Alessi // Jérémy Magrin // Luca Campana // Ullrich Schaefer // Linus Unnebäck // Yosuke Seki // Jake // Gustavo Brunoro // Denis Frezzato // Mickael Wegerich // Max Davidson // Lachlan Young // Jason Killian // Jan Hesters // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import * as React from 'react'; import { Animated, TextStyle, ViewProps, ViewStyle, StyleProp, FlatListProps, ScrollViewProps, ScrollResponderMixin, Constructor } from 'react-native'; import { Context } from 'create-react-context'; /** * Current Navigation context */ export type NavigationContext = Context; // @todo when we split types into common, native and web, // we can properly change Animated.Value to its real value export type AnimatedValue = any; export class FlatList extends React.Component & NavigationInjectedProps> { /** * Exports some data, e.g. for perf investigations or analytics. */ getMetrics: () => { contentLength: number; totalRows: number; renderedRows: number; visibleRows: number; }; /** * Scrolls to the end of the content. May be janky without `getItemLayout` prop. */ scrollToEnd: (params?: { animated?: boolean }) => void; /** * Scrolls to the item at the specified index such that it is positioned in the viewable area * such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle. * Cannot scroll to locations outside the render window without specifying the getItemLayout prop. */ scrollToIndex: (params: { animated?: boolean; index: number; viewOffset?: number; viewPosition?: number }) => void; /** * Requires linear scan through data - use `scrollToIndex` instead if possible. * May be janky without `getItemLayout` prop. */ scrollToItem: (params: { animated?: boolean; item: ItemT; viewPosition?: number }) => void; /** * Scroll to a specific content pixel offset, like a normal `ScrollView`. */ scrollToOffset: (params: { animated?: boolean; offset: number }) => void; /** * Tells the list an interaction has occured, which should trigger viewability calculations, * e.g. if waitForInteractions is true and the user has not scrolled. This is typically called * by taps on items or by navigation actions. */ recordInteraction: () => void; } declare class ScrollViewComponent extends React.Component {} declare const ScrollViewBase: Constructor & typeof ScrollViewComponent; export class ScrollView extends ScrollViewBase { /** * Scrolls to a given x, y offset, either immediately or with a smooth animation. * Syntax: * * scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true}) * * Note: The weird argument signature is due to the fact that, for historical reasons, * the function also accepts separate arguments as as alternative to the options object. * This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. */ scrollTo(y?: number | { x?: number; y?: number; animated?: boolean }, x?: number, animated?: boolean): void; /** * A helper function that scrolls to the end of the scrollview; * If this is a vertical ScrollView, it scrolls to the bottom. * If this is a horizontal ScrollView scrolls to the right. * * The options object has an animated prop, that enables the scrolling animation or not. * The animated prop defaults to true */ scrollToEnd(options?: { animated: boolean }): void; /** * Returns a reference to the underlying scroll responder, which supports * operations like `scrollTo`. All ScrollView-like components should * implement this method so that they can be composed while providing access * to the underlying scroll responder's methods. */ getScrollResponder(): JSX.Element; getScrollableNode(): any; // Undocumented getInnerViewNode(): any; // Deprecated, do not use. scrollWithoutAnimationTo?: (y: number, x: number) => void; } 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) => {}; style: StyleProp; } /** * NavigationState is a tree of routes for a single navigator, where each child * route may either be a NavigationScreenRoute or a NavigationRouterRoute. * NavigationScreenRoute represents a leaf screen, while the * NavigationRouterRoute represents the state of a child navigator. * * NOTE: NavigationState is a state tree local to a single navigator and * its child navigators (via the routes field). * If we're in navigator nested deep inside the app, the state will only be the * state for that navigator. * The state for the root navigator of our app represents the whole navigation * state for the whole app. */ export interface NavigationState { /** * Index refers to the active child route in the routes array. */ index: number; routes: NavigationRoute[]; } export interface DrawerNavigationState extends NavigationState { isDrawerOpen: boolean; isTransitioning: boolean; } export type NavigationRoute = | NavigationLeafRoute | NavigationStateRoute; export interface NavigationLeafRoute { /** * React's key used by some navigators. No need to specify these manually, * they will be defined by the router. */ key: string; /** * Index that represents the depth of the stack */ index: number; /** * For example 'Home'. * This is used as a key in a route config when creating a navigator. */ routeName: string; /** * Path is an advanced feature used for deep linking and on the web. */ path?: string; /** * Params passed to this route when navigating to it, * e.g. `{ car_id: 123 }` in a route that displays a car. */ params?: Params; } export type NavigationStateRoute< NavigationLeafRouteParams > = NavigationLeafRoute & NavigationState; export type NavigationScreenOptionsGetter = ( navigation: NavigationScreenProp>, screenProps?: { [key: string]: any } ) => Options; 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: NavigationAction, lastState?: State ) => State | null; /** * Maps a URI-like string to an action. This can be mapped to a state * using `getStateForAction`. */ getActionForPathAndParams: ( path: string, params?: NavigationParams ) => NavigationAction | null; getPathAndParamsForState: ( state: State ) => { path: string; params?: NavigationParams; }; getComponentForRouteName: (routeName: string) => NavigationComponent; getComponentForState: (state: State) => NavigationComponent; /** * Gets the screen navigation options for a given screen. * * For example, we could get the config for the 'Foo' screen when the * `navigation.state` is: * * {routeName: 'Foo', key: '123'} */ getScreenOptions: NavigationScreenOptionsGetter; } export type NavigationScreenOption = | T | ((navigation: NavigationScreenProp, config: T) => T); export interface NavigationScreenDetails { options: T; state: NavigationRoute; navigation: NavigationScreenProp; } export type NavigationScreenOptions = NavigationStackScreenOptions & NavigationTabScreenOptions & NavigationDrawerScreenOptions; export interface NavigationScreenConfigProps { navigation: NavigationScreenProp; screenProps: { [key: string]: any }; } export type NavigationScreenConfig = | Options | (( navigationOptionsContainer: NavigationScreenConfigProps & { navigationOptions: NavigationScreenProp; } ) => Options); export type NavigationComponent = | NavigationScreenComponent | NavigationNavigator | any; export type NavigationScreenComponent< Params = NavigationParams, Options = {}, Props = {} > = React.ComponentType & Props> & { navigationOptions?: NavigationScreenConfig; }; export type NavigationNavigator< State = NavigationState, Options = {}, Props = {} > = React.ComponentType & Props> & { router: NavigationRouter; navigationOptions?: NavigationScreenConfig; }; export interface NavigationParams { [key: string]: any; } export interface NavigationNavigateActionPayload { routeName: string; params?: NavigationParams; // The action to run inside the sub-router action?: NavigationNavigateAction; key?: string; } export interface NavigationNavigateAction extends NavigationNavigateActionPayload { type: 'Navigation/NAVIGATE'; } export interface NavigationBackActionPayload { key?: string | null; } export interface NavigationBackAction extends NavigationBackActionPayload { type: 'Navigation/BACK'; } export interface NavigationSetParamsActionPayload { // The key of the route where the params should be set key: string; // The new params to merge into the existing route params params?: NavigationParams; } export interface NavigationSetParamsAction extends NavigationSetParamsActionPayload { type: 'Navigation/SET_PARAMS'; } export interface NavigationInitActionPayload { params?: NavigationParams; } export interface NavigationInitAction extends NavigationInitActionPayload { type: 'Navigation/INIT'; } export interface NavigationReplaceActionPayload { key?: string; newKey?: string; routeName: string; params?: NavigationParams; action?: NavigationNavigateAction; } export interface NavigationReplaceAction { type: 'Navigation/REPLACE'; key: string; routeName: string; params?: NavigationParams; action?: NavigationNavigateAction; } export interface NavigationCompleteTransitionActionPayload { key?: string; } export interface NavigationCompleteTransitionAction { type: 'Navigation/COMPLETE_TRANSITION'; key: string; } export interface NavigationResetActionPayload { index: number; key?: string | null; actions: NavigationNavigateAction[]; } export interface NavigationResetAction extends NavigationResetActionPayload { type: 'Navigation/RESET'; } export interface NavigationUriActionPayload { uri: string; } export interface NavigationUriAction extends NavigationUriActionPayload { type: 'Navigation/URI'; } export interface NavigationPopActionPayload { // n: the number of routes to pop of the stack n?: number; immediate?: boolean; } export interface NavigationPopAction extends NavigationPopActionPayload { type: 'Navigation/POP'; } export interface NavigationPopToTopActionPayload { key?: string; immediate?: boolean; } export interface NavigationPopToTopAction extends NavigationPopToTopActionPayload { type: 'Navigation/POP_TO_TOP'; } export interface NavigationPushActionPayload { routeName: string; params?: NavigationParams; action?: NavigationNavigateAction; key?: string; } export interface NavigationPushAction { type: 'Navigation/PUSH'; routeName: string; params?: NavigationParams; action?: NavigationNavigateAction; key?: string; } export interface NavigationOpenDrawerAction { key?: string; type: 'Navigation/OPEN_DRAWER'; } export interface NavigationCloseDrawerAction { key?: string; type: 'Navigation/CLOSE_DRAWER'; } export interface NavigationToggleDrawerAction { key?: string; type: 'Navigation/TOGGLE_DRAWER'; } export interface NavigationStackViewConfig { mode?: 'card' | 'modal'; headerMode?: HeaderMode; headerBackTitleVisible?: boolean; headerTransitionPreset?: 'fade-in-place' | 'uikit'; headerLayoutPreset?: 'left' | 'center'; cardStyle?: StyleProp; cardShadowEnabled?: boolean; cardOverlayEnabled?: boolean; transitionConfig?: ( transitionProps: NavigationTransitionProps, prevTransitionProps: NavigationTransitionProps, 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; defaultNavigationOptions?: 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; headerTransparent?: boolean; headerTitle?: string | React.ReactElement; headerTitleStyle?: StyleProp; headerTitleAllowFontScaling?: boolean; headerTintColor?: string; headerLeft?: | React.ReactElement | ((backButtonProps: HeaderBackButtonProps) => React.ReactElement) | null; headerBackTitle?: string | null; headerBackImage?: React.ReactElement; headerTruncatedBackTitle?: string; headerBackTitleStyle?: StyleProp; headerPressColorAndroid?: string; headerRight?: React.ReactElement | null; headerStyle?: StyleProp; headerForceInset?: HeaderForceInset; headerBackground?: React.ReactNode | React.ReactType; headerBackgroundTransitionPreset?: 'toggle' | 'fade' | 'translate'; gesturesEnabled?: boolean; gestureResponseDistance?: { vertical?: number; horizontal?: number }; gestureDirection?: 'default' | 'inverted'; } export interface NavigationStackRouterConfig { headerTransitionPreset?: 'fade-in-place' | 'uikit'; initialRouteName?: string; initialRouteParams?: NavigationParams; paths?: NavigationPathsConfig; defaultNavigationOptions?: NavigationScreenConfig; navigationOptions?: NavigationScreenConfig; initialRouteKey?: string; } export type NavigationStackAction = | NavigationInitAction | NavigationNavigateAction | NavigationBackAction | NavigationSetParamsAction | NavigationResetAction | NavigationReplaceAction | NavigationPopAction | NavigationPushAction | NavigationPopToTopAction | NavigationCompleteTransitionAction; export type NavigationTabAction = | NavigationInitAction | NavigationNavigateAction | NavigationBackAction; export type NavigationDrawerAction = | NavigationOpenDrawerAction | NavigationCloseDrawerAction | NavigationToggleDrawerAction; export type NavigationAction = | NavigationInitAction | NavigationStackAction | NavigationTabAction | NavigationDrawerAction; export type NavigationRouteConfig = | NavigationComponent | ({ navigationOptions?: NavigationScreenConfig; path?: string; params?: NavigationParams; } & NavigationScreenRouteConfig); export type NavigationScreenRouteConfig = | NavigationComponent | { screen: NavigationComponent; } | { getScreen: () => NavigationComponent; }; export interface NavigationPathsConfig { [routeName: string]: string; } // tslint:disable-next-line:strict-export-declare-modifiers interface NavigationTabRouterConfigBase { initialRouteName?: string; initialRouteParams?: NavigationParams; paths?: NavigationPathsConfig; order?: string[]; // todo: type these as the real route names rather than 'string' // Does the back button cause the router to switch to the initial tab backBehavior?: 'none' | 'initialRoute'; // defaults `initialRoute` } export interface NavigationTabRouterConfig extends NavigationTabRouterConfigBase { defaultNavigationOptions?: NavigationScreenConfig; navigationOptions?: NavigationScreenConfig; } export interface NavigationBottomTabRouterConfig extends NavigationTabRouterConfigBase { defaultNavigationOptions?: NavigationScreenConfig; navigationOptions?: NavigationScreenConfig; } export interface TabScene { route: NavigationRoute; focused: boolean; index: number; tintColor?: string; } // tslint:disable-next-line:strict-export-declare-modifiers interface NavigationTabScreenOptionsBase { title?: string; tabBarIcon?: | React.ReactElement | (( options: { tintColor: string | null; focused: boolean; horizontal: boolean } ) => React.ReactElement | null); tabBarLabel?: | string | React.ReactElement | (( options: { tintColor: string | null; focused: boolean } ) => React.ReactElement | string | null); tabBarVisible?: boolean; tabBarTestIDProps?: { testID?: string; accessibilityLabel?: string }; } export interface NavigationTabScreenOptions extends NavigationTabScreenOptionsBase { swipeEnabled?: boolean; tabBarOnPress?: ( options: { previousScene: TabScene; scene: TabScene; jumpToIndex: (index: number) => void; } ) => void; tabBarOnLongPress?: ( options: { previousScene: TabScene; scene: TabScene; jumpToIndex: (index: number) => void; } ) => void; } export interface NavigationBottomTabScreenOptions extends NavigationTabScreenOptionsBase { tabBarOnPress?: ( options: { navigation: NavigationScreenProp; defaultHandler: () => void; } ) => void; tabBarOnLongPress?: ( options: { navigation: NavigationScreenProp; defaultHandler: () => void; } ) => void; } export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open'; export interface NavigationDrawerScreenOptions { title?: string; drawerIcon?: | React.ReactElement | (( options: { tintColor: string | null; focused: boolean } ) => React.ReactElement | null); drawerLabel?: | string | React.ReactElement | (( options: { tintColor: string | null; focused: boolean } ) => React.ReactElement | null); drawerLockMode?: DrawerLockMode; } export interface NavigationRouteConfigMap { [routeName: string]: NavigationRouteConfig; } export type NavigationDispatch = (action: NavigationAction) => boolean; export interface NavigationProp { state: S; dispatch: NavigationDispatch; } export type EventType = | 'willFocus' | 'didFocus' | 'willBlur' | 'didBlur' | 'action'; export interface NavigationEventPayload { type: EventType; action: NavigationAction; state: NavigationState; lastState: NavigationState | null | undefined; } export type NavigationEventCallback = (payload: NavigationEventPayload) => void; export interface NavigationEventSubscription { remove: () => void; } export interface NavigationEventsProps extends ViewProps { navigation?: NavigationNavigator; onWillFocus?: NavigationEventCallback; onDidFocus?: NavigationEventCallback; onWillBlur?: NavigationEventCallback; onDidBlur?: NavigationEventCallback; } export const NavigationEvents: React.ComponentType; export interface NavigationScreenProp { state: S & { params?: P }; dispatch: NavigationDispatch; goBack: (routeKey?: string | null) => boolean; dismiss: () => boolean; navigate(options: { routeName: string | { routeName: string; params?: NavigationParams; action?: NavigationNavigateAction; key?: string; }; params?: NavigationParams; action?: NavigationAction; key?: string; }): boolean; navigate( routeNameOrOptions: string, params?: NavigationParams, action?: NavigationAction ): boolean; openDrawer: () => any; closeDrawer: () => any; toggleDrawer: () => any; getParam(param: T, fallback: NonNullable): NonNullable; getParam(param: T): P[T]; setParams: (newParams: Partial

) => boolean; addListener: ( eventName: EventType, callback: NavigationEventCallback ) => NavigationEventSubscription; push: ( routeName: string, params?: NavigationParams, action?: NavigationNavigateAction ) => boolean; replace: ( routeName: string, params?: NavigationParams, action?: NavigationNavigateAction ) => boolean; pop: (n?: number, params?: { immediate?: boolean }) => boolean; popToTop: (params?: { immediate?: boolean }) => boolean; isFocused: () => boolean; } export interface NavigationNavigatorProps { navigation?: NavigationProp; screenProps?: { [key: string]: any }; navigationOptions?: O; } /** * Gestures, Animations, and Interpolators */ export type NavigationGestureDirection = 'horizontal' | 'vertical'; export interface NavigationLayout { height: AnimatedValue; initHeight: number; initWidth: number; isMeasured: boolean; width: AnimatedValue; } export interface NavigationScene { index: number; isActive: boolean; isStale: boolean; key: string; route: NavigationRoute; descriptor: NavigationDescriptor; } export interface NavigationTransitionProps { // The layout of the screen container layout: NavigationLayout; // The destination navigation state of the transition navigation: NavigationScreenProp; // The progressive index of the transitioner's navigation state. position: AnimatedValue; // The value that represents the progress of the transition when navigation // state changes from one to another. Its numberic value will range from 0 // to 1. // progress.__getAnimatedValue() < 1 : transtion is happening. // progress.__getAnimatedValue() == 1 : transtion completes. progress: AnimatedValue; // All the scenes of the transitioner. scenes: NavigationScene[]; // The active scene, corresponding to the route at // `navigation.state.routes[navigation.state.index]`. When rendering // NavigationSceneRendererPropsIndex, the scene does not refer to the active // scene, but instead the scene that is being rendered. The index always // is the index of the scene scene: NavigationScene; index: number; screenProps?: { [key: string]: any }; } // The scene renderer props are nearly identical to the props used for rendering // a transition. The exception is that the passed scene is not the active scene // but is instead the scene that the renderer should render content for. export type NavigationSceneRendererProps = NavigationTransitionProps; export interface NavigationTransitionSpec { duration?: number; // An easing function from `Easing`. easing?: (t: number) => number; // A timing function such as `Animated.timing`. timing?: (value: AnimatedValue, config: any) => any; } /** * Describes a visual transition from one screen to another. */ export interface TransitionConfig { // The basics properties of the animation, such as duration and easing transitionSpec?: NavigationTransitionSpec; // 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 TransitionConfigurer = ( transitionProps: NavigationTransitionProps, prevTransitionProps: NavigationTransitionProps, isModal: boolean ) => TransitionConfig; export interface StackViewTransitionConfigsType { defaultTransitionConfig: TransitionConfigurer; getTransitionConfig: ( transitionConfigurer: TransitionConfigurer, transitionProps: NavigationTransitionProps, prevTransitionProps: NavigationTransitionProps, isModal: boolean ) => TransitionConfig; SlideFromRightIOS: TransitionConfig; ModalSlideFromBottomIOS: TransitionConfig; FadeInFromBottomAndroid: TransitionConfig; FadeOutToBottomAndroid: TransitionConfig; } export const StackViewTransitionConfigs: StackViewTransitionConfigsType; export type NavigationAnimationSetter = ( position: AnimatedValue, newState: NavigationState, lastState: NavigationState ) => void; export type NavigationSceneRenderer = () => React.ReactElement | null; export type NavigationStyleInterpolator = ( props: NavigationSceneRendererProps ) => ViewStyle; export interface LayoutEvent { nativeEvent: { layout: { x: number; y: number; width: number; height: number; }; }; } export type NavigatorType = | 'react-navigation/STACK' | 'react-navigation/TABS' | 'react-navigation/DRAWER'; 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; style?: StyleProp; } export interface NavigationContainerComponent extends React.Component< NavigationContainerProps & NavigationNavigatorProps > { dispatch: NavigationDispatch; } export interface NavigationContainer extends React.ComponentClass< NavigationContainerProps & NavigationNavigatorProps > { new( props: NavigationContainerProps & NavigationNavigatorProps, context?: any ): NavigationContainerComponent; router: NavigationRouter; screenProps: { [key: string]: any }; navigationOptions: any; state: { nav: NavigationState | null }; } 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 ): NavigationContainer; export interface SwitchNavigatorConfig { initialRouteName: string; resetOnBlur?: boolean; paths?: NavigationPathsConfig; backBehavior?: 'none' | 'initialRoute'; } // Return createNavigationContainer export type _SwitchNavigatorConfig = NavigationSwitchRouterConfig; export function SwitchNavigator( routeConfigMap: NavigationRouteConfigMap, switchConfig?: SwitchNavigatorConfig ): NavigationContainer; export function createSwitchNavigator( routeConfigMap: NavigationRouteConfigMap, switchConfig?: SwitchNavigatorConfig ): NavigationContainer; // DrawerItems export const DrawerItems: React.ReactType; /** * Drawer Navigator */ export interface DrawerViewConfig { drawerBackgroundColor?: string; drawerWidth?: number; drawerPosition?: 'left' | 'right'; contentComponent?: React.ReactType; contentOptions?: any; style?: StyleProp; unmountInactiveRoutes?: boolean; drawerType?: 'front' | 'back' | 'side'; } export interface DrawerNavigatorConfig extends NavigationTabRouterConfig, DrawerViewConfig { containerConfig?: any; contentOptions?: { items?: string[]; activeItemKey?: string; activeTintColor?: string; activeBackgroundColor?: string; inactiveTintColor?: string; inactiveBackgroundColor?: string; onItemPress?: (route: string) => any; itemsContainerStyle?: StyleProp; itemStyle?: StyleProp; labelStyle?: StyleProp; activeLabelStyle?: StyleProp; inactiveLabelStyle?: StyleProp; iconContainerStyle?: StyleProp; }; drawerLockMode?: DrawerLockMode; } export function DrawerNavigator( routeConfigMap: NavigationRouteConfigMap, drawerConfig?: DrawerNavigatorConfig ): NavigationContainer; export function createDrawerNavigator( routeConfigMap: NavigationRouteConfigMap, drawerConfig?: DrawerNavigatorConfig ): NavigationContainer; /** * Tab Navigator */ // From views/TabView/TabView.js 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; // Top showIcon?: boolean; upperCaseLabel?: boolean; pressColor?: string; pressOpacity?: number; scrollEnabled?: boolean; tabStyle?: StyleProp; indicatorStyle?: StyleProp; }; swipeEnabled?: boolean; animationEnabled?: boolean; lazy?: boolean; } // From navigators/TabNavigator.js export interface TabNavigatorConfig extends NavigationTabRouterConfig, TabViewConfig { lazy?: boolean; removeClippedSubviews?: boolean; initialLayout?: { height: number; width: number }; } export interface BottomTabNavigatorConfig extends NavigationBottomTabRouterConfig, TabViewConfig { lazy?: boolean; removeClippedSubviews?: boolean; initialLayout?: { height: number; width: number }; } // From navigators/TabNavigator.js export function TabNavigator( routeConfigMap: NavigationRouteConfigMap, drawConfig?: TabNavigatorConfig ): NavigationContainer; export function createAppContainer( routeConfigMap: NavigationRouteConfigMap, ): NavigationContainer; export function createTabNavigator( routeConfigMap: NavigationRouteConfigMap, drawConfig?: TabNavigatorConfig ): NavigationContainer; export function createBottomTabNavigator( routeConfigMap: NavigationRouteConfigMap, drawConfig?: BottomTabNavigatorConfig ): NavigationContainer; export function createMaterialTopTabNavigator( routeConfigMap: NavigationRouteConfigMap, drawConfig?: TabNavigatorConfig ): NavigationContainer; export interface TabBarTopProps { activeTintColor: string; inactiveTintColor: string; indicatorStyle: StyleProp; showIcon: boolean; showLabel: boolean; upperCaseLabel: boolean; allowFontScaling: boolean; position: AnimatedValue; tabBarPosition: string; navigation: NavigationScreenProp; jumpToIndex: (index: number) => void; getLabel: (scene: TabScene) => React.ReactNode | string; getOnPress: ( previousScene: NavigationRoute, scene: TabScene ) => ( args: { previousScene: NavigationRoute; scene: TabScene; jumpToIndex: (index: number) => void; } ) => void; renderIcon: (scene: TabScene) => React.ReactElement; labelStyle?: TextStyle; iconStyle?: ViewStyle; } export interface TabBarBottomProps { activeTintColor: string; activeBackgroundColor: string; adaptive?: boolean; inactiveTintColor: string; inactiveBackgroundColor: string; showLabel?: boolean; allowFontScaling: boolean; position: AnimatedValue; navigation: NavigationScreenProp; jumpToIndex: (index: number) => void; getLabel: (scene: TabScene) => React.ReactNode | string; getOnPress: ( previousScene: NavigationRoute, scene: TabScene ) => ( args: { previousScene: NavigationRoute; scene: TabScene; jumpToIndex: (index: number) => void; } ) => void; getTestIDProps: (scene: TabScene) => (scene: TabScene) => any; renderIcon: (scene: TabScene) => React.ReactNode; style?: ViewStyle; animateStyle?: ViewStyle; labelStyle?: TextStyle; tabStyle?: ViewStyle; showIcon?: boolean; } export const TabBarTop: React.ComponentType; export const TabBarBottom: React.ComponentType; /** * NavigationActions */ export namespace NavigationActions { const BACK: 'Navigation/BACK'; const INIT: 'Navigation/INIT'; const NAVIGATE: 'Navigation/NAVIGATE'; const SET_PARAMS: 'Navigation/SET_PARAMS'; function init(options?: NavigationInitActionPayload): NavigationInitAction; function navigate( options: NavigationNavigateActionPayload ): NavigationNavigateAction; function back(options?: NavigationBackActionPayload): NavigationBackAction; function setParams( options: NavigationSetParamsActionPayload ): NavigationSetParamsAction; } /** * DrawerActions */ export namespace DrawerActions { const OPEN_DRAWER: 'Navigation/OPEN_DRAWER'; const CLOSE_DRAWER: 'Navigation/CLOSE_DRAWER'; const TOGGLE_DRAWER: 'Navigation/TOGGLE_DRAWER'; function openDrawer(): NavigationOpenDrawerAction; function closeDrawer(): NavigationCloseDrawerAction; function toggleDrawer(): NavigationToggleDrawerAction; } /** * StackActions */ export namespace StackActions { const POP: 'Navigation/POP'; const POP_TO_TOP: 'Navigation/POP_TO_TOP'; const PUSH: 'Navigation/PUSH'; const RESET: 'Navigation/RESET'; const REPLACE: 'Navigation/REPLACE'; const COMPLETE_TRANSITION: 'Navigation/COMPLETE_TRANSITION'; function pop(options: NavigationPopActionPayload): NavigationPopAction; function popToTop( options: NavigationPopToTopActionPayload ): NavigationPopToTopAction; function push(options: NavigationPushActionPayload): NavigationPushAction; function reset(options: NavigationResetActionPayload): NavigationResetAction; function replace( options: NavigationReplaceActionPayload ): NavigationReplaceAction; function completeTransition( payload: NavigationCompleteTransitionActionPayload ): NavigationCompleteTransitionAction; } /** * Transitioner * @desc From react-navigation/src/views/Transitioner.js */ export interface TransitionerProps { configureTransition: ( transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps ) => NavigationTransitionSpec; navigation: NavigationScreenProp; onTransitionStart?: ( transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps ) => Promise | void; onTransitionEnd?: ( transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps ) => void; render: ( transitionProps: NavigationTransitionProps, prevTransitionProps?: NavigationTransitionProps ) => any; style?: StyleProp; } export interface TransitionerState { layout: NavigationLayout; position: Animated.Value; progress: Animated.Value; scenes: NavigationScene[]; } export class Transitioner extends React.Component< TransitionerProps, TransitionerState > { } /** * Tab Router * * @desc from react-navigation/src/routers/TabRouter.js */ export function TabRouter( routeConfigs: NavigationRouteConfigMap, config: NavigationTabRouterConfig ): NavigationRouter; /** * Stack Router * * @desc from react-navigation/src/routers/StackRouter.js */ export function StackRouter( routeConfigs: NavigationRouteConfigMap, config: NavigationTabRouterConfig ): NavigationRouter; /** * Create Navigator * * @see https://github.com/react-navigation/react-navigation/blob/master/src/navigators/createNavigator.js */ export interface NavigationDescriptor { key: string; state: NavigationLeafRoute | NavigationStateRoute; navigation: NavigationScreenProp; options: NavigationScreenOptions; getComponent: () => React.ComponentType; } export type NavigationView = React.ComponentType<{ descriptors: { [key: string]: NavigationDescriptor }; } & NavigationInjectedProps>; export function createNavigator( view: NavigationView, router: NavigationRouter, navigatorConfig?: {} | null, navigatorType?: NavigatorType ): any; /** * Create an HOC that injects the navigation and manages the navigation state * in case it's not passed from above. * This allows to use e.g. the StackNavigator and TabNavigator as root-level * components. * * @see https://github.com/react-navigation/react-navigation/blob/master/src/createNavigationContainer.js */ export function createNavigationContainer( Component: NavigationNavigator ): NavigationContainer; /** * END MANUAL DEFINITIONS OUTSIDE OF TYPEDEFINITION.JS */ /** * BEGIN CUSTOM CONVENIENCE INTERFACES */ export interface NavigationScreenProps< Params = NavigationParams, Options = any > { navigation: NavigationScreenProp, Params>; screenProps?: { [key: string]: any }; navigationOptions?: NavigationScreenConfig; } /** * END CUSTOM CONVENIENCE INTERFACES */ /* * Header */ // src/views/HeaderBackButton.js export interface HeaderBackButtonProps { onPress?: () => void; pressColorAndroid?: string; title?: string; titleStyle?: StyleProp; tintColor?: string; truncatedTitle?: string; width?: number; } export const HeaderBackButton: React.ComponentClass; /** * Header Component */ export class Header extends React.Component { static HEIGHT: number; } export type Omit = Pick>; export type InferProps> = T extends React.ComponentType ? P : never; export interface NavigationInjectedProps

{ navigation: NavigationScreenProp; } // If the wrapped component is a class, we can get a ref to it export function withNavigation>( Component: T, ): React.ComponentType, keyof NavigationInjectedProps> & { onRef?: React.Ref> }>; export function withNavigation>( Component: T, ): React.ComponentType, keyof NavigationInjectedProps>>; // For backwards compatibility export function withNavigation( Component: React.ComponentType)>, ): React.ComponentType>> }>; export interface NavigationFocusInjectedProps

extends NavigationInjectedProps

{ isFocused: boolean; } // If the wrapped component is a class, we can get a ref to it export function withNavigationFocus>( Component: T, ): React.ComponentType, keyof NavigationFocusInjectedProps> & { onRef?: React.Ref> }>; export function withNavigationFocus>( Component: T, ): React.ComponentType, keyof NavigationFocusInjectedProps>>; // For backwards compatibility export function withNavigationFocus( Component: React.ComponentType>, ): React.ComponentType>> }>; /** * SafeAreaView Component */ export type SafeAreaViewForceInsetValue = 'always' | 'never'; export interface SafeAreaViewProps extends ViewProps { forceInset?: { top?: SafeAreaViewForceInsetValue; bottom?: SafeAreaViewForceInsetValue; left?: SafeAreaViewForceInsetValue; right?: SafeAreaViewForceInsetValue; horizontal?: SafeAreaViewForceInsetValue; vertical?: SafeAreaViewForceInsetValue; }; children?: React.ReactNode; } export const SafeAreaView: React.ComponentClass; export interface HeaderStyleInterPolator { forLayout: any; forLeft: any; forLeftButton: any; forLeftLabel: any; forCenterFromLeft: any; forCenter: any; forRight: any; forBackground: any; forBackgroundWithInactiveHidden: any; forBackgroundWithFade: any; forBackgroundWithTranslation: any; } export const getActiveChildNavigationOptions: any;