From e9da83fdebed0086f5a4d31414d2ae234521436f Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Tue, 13 Jun 2017 23:46:52 -0700 Subject: [PATCH 01/14] [react-navigation] Update with latest flow typings --- types/react-navigation/index.d.ts | 691 +++++++++++------------------- 1 file changed, 256 insertions(+), 435 deletions(-) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index e343d092c6..ac160a587d 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -1,34 +1,33 @@ // Type definitions for react-navigation 1.0 // Project: https://github.com/react-community/react-navigation -// Definitions by: Huhuanming , mhcgrq +// Definitions by: Huhuanming +// mhcgrq +// abrahambotros // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -import * as React from 'react' +import * as React from 'react'; import { - Animated, ViewStyle, - TextStyle -} from 'react-native' +} from 'react-native'; -export type HeaderMode = 'float' | 'screen' | 'none' +// @todo when we split types into common, native and web, +// we can properly change Animated.Value to its real value +type AnimatedValue = any; -export function addNavigationHelpers(params: any): any - -type SubViewProps = NavigationSceneRendererProps & { - onNavigateBack?: () => void, -} - -type SubViewRenderer = (subViewProps: SubViewProps) => React.ReactElement | undefined +export type HeaderMode = 'float' | 'screen' | 'none'; export type HeaderProps = NavigationSceneRendererProps & { mode: HeaderMode, - onNavigateBack?: () => void, - renderLeftComponent: SubViewRenderer, - renderRightComponent: SubViewRenderer, - renderTitleComponent: SubViewRenderer, - tintColor?: string, - router: NavigationRouter, -} + router: NavigationRouter< + NavigationState, + NavigationAction, + NavigationStackScreenOptions + >, + getScreenDetails: (navigationScene: NavigationScene) => NavigationScreenDetails< + NavigationStackScreenOptions + >, + style: Style, +}; /** * NavigationState is a tree of routes for a single navigator, where each child @@ -43,15 +42,17 @@ export type HeaderProps = NavigationSceneRendererProps & { * The state for the root navigator of our app represents the whole navigation * state for the whole app. */ -export interface NavigationState { +export type NavigationState = { /** * Index refers to the active child route in the routes array. */ index: number, - routes: any[], -} + routes: Array, +}; -export interface NavigationRoute

{ +export type NavigationRoute = NavigationLeafRoute | NavigationStateRoute; + +export type NavigationLeafRoute = { /** * React's key used by some navigators. No need to specify these manually, * they will be defined by the router. @@ -70,558 +71,378 @@ export interface NavigationRoute

{ * Params passed to this route when navigating to it, * e.g. `{ car_id: 123 }` in a route that displays a car. */ - params: P, -} + params?: NavigationParams, +}; -export interface NavigationRouter { +export type NavigationStateRoute = NavigationLeafRoute & { + index: number, + routes: Array, +}; + +export type NavigationScreenOptionsGetter = ( + navigation: NavigationScreenProp, + screenProps?: {} +) => Options; + +export type 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?: NavigationState, - ) => NavigationState | undefined, + getStateForAction: (action: Action, lastState: (State | null)) => (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 | undefined, + getActionForPathAndParams: ( + path: string, + params?: NavigationParams + ) => (Action | null), - getPathAndParamsForState: (state: NavigationState) => { path: string, params?: NavigationParams }, + getPathAndParamsForState: ( + state: State + ) => { + path: string, + params?: NavigationParams, + }, getComponentForRouteName: (routeName: string) => NavigationComponent, - getComponentForState: (state: NavigationState) => NavigationComponent, + getComponentForState: (state: State) => NavigationComponent, /** - * Gets the screen config for a given navigation screen prop. + * Gets the screen navigation options for a given screen. * - * For example, we could get the config for a 'Foo' screen when the + * For example, we could get the config for the 'Foo' screen when the * `navigation.state` is: * * {routeName: 'Foo', key: '123'} */ - getScreenConfig: ( - navigation: NavigationScreenProp, - optionName: string, - ) => any, // todo, fix this any type to become a key of NavigationScreenConfig -} + getScreenOptions: NavigationScreenOptionsGetter, +}; -type NavigationFunc = (navigation: NavigationScreenProp, config: E) => E +export type NavigationScreenOption = + | T + | (( + navigation: NavigationScreenProp, + config: T + ) => T); -export type NavigationScreenOption = T | NavigationFunc +export type Style = ViewStyle; -export interface HeaderConfig { - /** - * Title string used by the navigation bar, or a custom component - */ - title?: string | React.ReactElement; +export type NavigationScreenDetails = { + options: T, + state: NavigationRoute, + navigation: NavigationScreenProp, +}; - /** - * Whether the navigation bar is visible. - */ - visible?: boolean; - - /** - * Renders a custom right component - */ - right?: React.ReactElement, - - /** - * Renders a custom left component - */ - left?: React.ReactElement - - /** - * Style passed into navigation bar container - */ - style?: ViewStyle, - - /** - * Style passed into navigation bar title - */ - titleStyle?: TextStyle, - - // // Style of title text - // titleTextStyle?: $NavigationThunk, - // // Tint color of navigation bar contents - // tintColor?: $NavigationThunk, - // // Navigation bar height - // height?: $NavigationThunk, - // // Navigation bar translucentcy - // translucent?: $NavigationThunk, - // // Renders a custom left component - // renderLeft?: React.Element<*> | - // (navigation: NavigationProp<*>, canGoBack: boolean) => React.Element<*>, - // // Renders a custom navigation bar background - // renderBackground?: $NavigationThunk>, -} - -export interface TabBarConfig { - /** - * Icon used by the tab bar. - */ - icon?: (options: { tintColor: string, focused: boolean }) => React.ReactElement | undefined; - /** - * Label text used by the tab bar. - */ - label?: string | React.ReactElement; -} - -export interface DrawerConfig { - /** - * Icon used by the drawer. - */ - icon?: (options: { tintColor: string, focused: boolean }) => React.ReactElement | undefined; - /** - * Label text used by the drawer. - */ - label?: string; -} - -export interface CardStackConfig { - /** - * Whether you can use gestures to dismiss this screen. - * Defaults to true on iOS, false on Android. - */ - gesturesEnabled?: boolean; -} - -export interface NavigationScreenOptions { - /** - * Title is rendered by certain navigators, e.g. the tab navigator, - * or on web as the title of the browser tab. - */ - title?: NavigationScreenOption; - /** - * Options passed to the navigation bar for this screen. - */ - header?: NavigationScreenOption; - /** - * Options passed to the tab bar for this screen. - */ - tabBar?: NavigationScreenOption; - /** - * Options passed to the drawer for this screen. - */ - drawer?: NavigationScreenOption; - /** - * Options passed to the card stack for this screen. - */ - cardStack?: NavigationScreenOption; -} - -export interface NavigationScreenConfig { +export type NavigationScreenOptions = { title?: string, - header?: HeaderConfig, - tabBar?: TabBarConfig, - drawer?: DrawerConfig; -} +}; -export type NavigationComponent = NavigationScreenComponent | NavigationNavigator +export type NavigationScreenConfigProps = { + navigation: NavigationScreenProp, + screenProps: Object, +}; -export type NavigationScreenComponent = React.ComponentClass & { - navigationOptions?: NavigationScreenOptions, -} +export type NavigationScreenConfig = + | Options + | (NavigationScreenConfigProps & + ((navigationOptionsContainer: { + navigationOptions: NavigationScreenProp< + NavigationRoute, + NavigationAction + >, + }) => Options)); -export type NavigationNavigator = React.ComponentClass & { - router?: NavigationRouter, - navigationOptions?: NavigationScreenOptions, -} +export type NavigationComponent = + | NavigationScreenComponent + | NavigationNavigator; -export interface NavigationParams { - [key: string]: any, -} +export type NavigationScreenComponent = React.ComponentClass & { + navigationOptions?: NavigationScreenConfig, +}; -export interface NavigationNavigateAction { - type?: 'Navigation/NAVIGATE', +export type NavigationNavigator = React.ComponentClass & { + router?: NavigationRouter, + navigationOptions?: NavigationScreenConfig, +}; + +export type NavigationParams = { + [key: string]: string, +}; + +export type NavigationNavigateAction = { + type: 'Navigation/NAVIGATE', routeName: string, params?: NavigationParams, // The action to run inside the sub-router action?: NavigationNavigateAction, -} +}; -export interface NavigationBackAction { - type?: 'Navigation/BACK', - key?: string, -} +export type NavigationBackAction = { + type: 'Navigation/BACK', + key?: string | null, +}; -export interface NavigationSetParamsAction { - type?: 'Navigation/SET_PARAMS', +export type NavigationSetParamsAction = { + type: 'Navigation/SET_PARAMS', // 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 NavigationInitAction { - type?: 'Navigation/INIT', +export type NavigationInitAction = { + type: 'Navigation/INIT', params?: NavigationParams, -} +}; -export interface NavigationResetAction { - type?: 'Navigation/RESET', +export type NavigationResetAction = { + type: 'Navigation/RESET', index: number, - actions: NavigationNavigateAction[], -} + key?: string | null, + actions: Array, +}; -export interface NavigationUriAction { - type?: 'Navigation/URI', +export type NavigationUriAction = { + type: 'Navigation/URI', uri: string, -} +}; -export interface NavigationContainerOptions { - // This is used to extract the path from the URI passed to the app for a deep link - URIPrefix?: string, -} - -export interface NavigationContainerConfig { - containerOptions?: NavigationContainerOptions, -} - -export interface NavigationStackViewConfig { +export type NavigationStackViewConfig = { mode?: 'card' | 'modal', headerMode?: HeaderMode, - headerComponent?: React.ComponentClass, - cardStyle?: ViewStyle, + cardStyle?: Style, + transitionConfig?: () => TransitionConfig, onTransitionStart?: () => void, onTransitionEnd?: () => void, -} +}; -export interface NavigationStackRouterConfig { +export type NavigationStackScreenOptions = NavigationScreenOptions & { + header?: (React.ReactElement | ((headerProps: HeaderProps) => React.ReactElement)) | null, + headerTitle?: string | React.ReactElement, + headerTitleStyle?: Style, + headerTintColor?: string, + headerLeft?: React.ReactElement, + headerBackTitle?: string, + headerTruncatedBackTitle?: string, + headerBackTitleStyle?: Style, + headerPressColorAndroid?: string, + headerRight?: React.ReactElement, + headerStyle?: Style, + gesturesEnabled?: boolean, +}; + +export type NavigationStackRouterConfig = { initialRouteName?: string, initialRouteParams?: NavigationParams, paths?: NavigationPathsConfig, - navigationOptions?: NavigationScreenOptions, -} + navigationOptions?: NavigationScreenConfig, +}; export type NavigationStackAction = - NavigationInitAction + | NavigationInitAction | NavigationNavigateAction | NavigationBackAction | NavigationSetParamsAction - | NavigationResetAction + | NavigationResetAction; export type NavigationTabAction = - NavigationInitAction + | NavigationInitAction | NavigationNavigateAction - | NavigationBackAction + | NavigationBackAction; export type NavigationAction = - NavigationInitAction + | NavigationInitAction | NavigationStackAction - | NavigationTabAction - -export namespace NavigationActions { - function navigate(options: NavigationNavigateAction): NavigationNavigateAction; - function reset(options: NavigationResetAction): NavigationResetAction; - function back(options?: NavigationBackAction): NavigationBackAction; - function setParams(options: NavigationSetParamsAction): NavigationSetParamsAction; -} + | NavigationTabAction; export type NavigationRouteConfig = T & { - navigationOptions?: NavigationScreenOptions, + navigationOptions?: NavigationScreenConfig, path?: string, -} +}; -export interface NavigationPathsConfig { +export type NavigationScreenRouteConfig = + | { + screen: NavigationComponent, + } + | { + getScreen: () => NavigationComponent, + }; + +export type NavigationPathsConfig = { [routeName: string]: string, -} +}; -export interface NavigationTabRouterConfig { +export type NavigationTabRouterConfig = { initialRouteName?: string, paths?: NavigationPathsConfig, - navigationOptions?: NavigationScreenOptions, - order?: string[], // todo: type these as the real route names rather than 'string' + navigationOptions?: NavigationScreenConfig, + order?: Array, // 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 NavigationRouteConfigMap { +export type NavigationTabScreenOptions = NavigationScreenOptions & { + tabBarIcon?: + | React.ReactElement + | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< + any + > | null)), + tabBarLabel?: + | string + | React.ReactElement + | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< + any + > | null)), + tabBarVisible?: boolean, +}; + +export type NavigationDrawerScreenOptions = NavigationScreenOptions & { + drawerIcon?: + | React.ReactElement + | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< + any + > | null)), + drawerLabel?: + | React.ReactElement + | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< + any + > | null)), +}; + +export type NavigationRouteConfigMap = { [routeName: string]: NavigationRouteConfig, -} +}; -export type NavigationDispatch = (action: A) => boolean +export type NavigationDispatch = (action: A) => boolean; -export interface NavigationProp { +export type NavigationProp = { state: S, dispatch: NavigationDispatch, -} +}; -export type NavigationScreenProp = NavigationProp & { - goBack: (routeKey?: string) => boolean, - navigate: (routeName: string, params?: NavigationParams, action?: NavigationAction) => boolean, +export type NavigationScreenProp = { + state: S, + dispatch: NavigationDispatch, + goBack: (routeKey?: (string | null)) => boolean, + navigate: ( + routeName: string, + params?: NavigationParams, + action?: NavigationAction + ) => boolean, setParams: (newParams: NavigationParams) => boolean, -} +}; -export interface NavigationNavigatorProps

{ - navigation: NavigationProp, NavigationAction>, -} +export type NavigationNavigatorProps = { + navigation: NavigationProp, + screenProps: any, + navigationOptions: any, +}; /** * Gestures, Animations, and Interpolators */ -export type NavigationAnimatedValue = Animated.Value +export type NavigationGestureDirection = 'horizontal' | 'vertical'; -export type NavigationGestureDirection = 'horizontal' | 'vertical' - -export interface NavigationLayout { - height: NavigationAnimatedValue, +export type NavigationLayout = { + height: AnimatedValue, initHeight: number, initWidth: number, isMeasured: boolean, - width: NavigationAnimatedValue, -} + width: AnimatedValue, +}; -export interface NavigationScene { +export type NavigationScene = { index: number, isActive: boolean, isStale: boolean, key: string, - route: any, -} + route: NavigationRoute, +}; -export interface NavigationTransitionProps { - // The layout of the transitioner of the scenes. +export type NavigationTransitionProps = { + // The layout of the screen container layout: NavigationLayout, - // The navigation state of the transitioner. - navigationState: NavigationState, + // The destination navigation state of the transition + navigation: NavigationScreenProp, // The progressive index of the transitioner's navigation state. - position: NavigationAnimatedValue, + 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: NavigationAnimatedValue, + progress: AnimatedValue, // All the scenes of the transitioner. - scenes: NavigationScene[], + scenes: Array, // The active scene, corresponding to the route at - // `navigationState.routes[navigationState.index]`. When rendering + // `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, - navigation: NavigationScreenProp, - // The gesture distance for `horizontal` and `vertical` transitions - gestureResponseDistance?: number, -} + screenProps?: {}, +}; // 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 type NavigationSceneRendererProps = NavigationTransitionProps; -export interface NavigationPanHandlers { - onMoveShouldSetResponder: () => void, - onMoveShouldSetResponderCapture: () => void, - onResponderEnd: () => void, - onResponderGrant: () => void, - onResponderMove: () => void, - onResponderReject: () => void, - onResponderRelease: () => void, - onResponderStart: () => void, - onResponderTerminate: () => void, - onResponderTerminationRequest: () => void, - onStartShouldSetResponder: () => void, - onStartShouldSetResponderCapture: () => void, -} - -export interface NavigationTransitionSpec { +export type NavigationTransitionSpec = { duration?: number, // An easing function from `Easing`. - easing?: () => any, + easing?: (t: number) => number, // A timing function such as `Animated.timing`. - timing?: (value: NavigationAnimatedValue, config: any) => any, -} + timing?: (value: AnimatedValue, config: any) => any, +}; + +/** + * Describes a visual transition from one screen to another. + */ +export type 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) => Object, +}; export type NavigationAnimationSetter = ( - position: NavigationAnimatedValue, + position: AnimatedValue, newState: NavigationState, - lastState: NavigationState, -) => void + lastState: NavigationState +) => void; -export type NavigationSceneRenderer = ( - props: NavigationSceneRendererProps, -) => React.ReactElement +export type NavigationSceneRenderer = () => (React.ReactElement | null); export type NavigationStyleInterpolator = ( - props: NavigationSceneRendererProps, -) => ViewStyle + props: NavigationSceneRendererProps +) => Style; -export interface LayoutEvent { +export type LayoutEvent = { nativeEvent: { layout: { - x: number; - y: number; - width: number; - height: number; + x: number, + y: number, + width: number, + height: number, }, - } -} - -interface NavigationContainerProps { - screenProps?: any - navigation?: NavigationProp - onNavigationStateChange?: ( - preNavigationState: NavigationState, - nextNavigationState: NavigationState, - ) => void -} - -interface NavigationContainerState { - nav?: NavigationState -} - -export interface NavigationContainer extends React.ComponentClass< - NavigationContainerProps -> { - router: NavigationRouter -} - -export type StackNavigatorConfig = - NavigationContainerConfig - & NavigationStackViewConfig - & NavigationStackRouterConfig; - -// Return createNavigationContainer -export function StackNavigator( - routeConfigMap: NavigationRouteConfigMap, - stackConfig?: StackNavigatorConfig, -): NavigationContainer - -/** - * Drawer Navigator - */ -export interface DrawNavigatorConfig { - drawerWidth?: number, - drawerPosition?: 'left'|'right', - contentComponent?: React.ReactElement, - contentOptions?: { - activeTintColor?: string, - activeBackgroundColor?: string, - inactiveTintColor?: string, - inactiveBackgroundColor?: string, - style?: ViewStyle, - labelStyle?: TextStyle - } -} - -export function DrawerNavigator( - routeConfigMap: NavigationRouteConfigMap, - drawConfig?: DrawNavigatorConfig, -): NavigationContainer; - -/** - * Tab Navigator - */ -export interface TabNavigatorConfig { - tabBarComponent?: React.ReactElement, - tabBarPosition?: 'top'|'bottom', - swipeEnabled?: boolean, - animationEnabled?: boolean, - lazy?: boolean, - tabBarOptions?: { - activeTintColor?: string, - activeBackgroundColor?: string, - inactiveTintColor?: string, - inactiveBackgroundColor?: string, - showLabel?: boolean, - style?: ViewStyle, - labelStyle?: TextStyle, - - // Top - showIcon?: boolean, - upperCaseLabel?: boolean, - pressColor?: string, - pressOpacity?: number, - scrollEnabled?: boolean, - tabStyle?: ViewStyle, - indicatorStyle?: ViewStyle - } - initialRouteName?: string, - order?: string[], - paths?: any // TODO: better def - backBehavior?: 'initialRoute'|'none' -} - -export function TabNavigator( - routeConfigMap: NavigationRouteConfigMap, - drawConfig?: TabNavigatorConfig, -): NavigationContainer; -/** - * Screen Options - */ -export interface StackNavigatorScreenOptions { - title?: string; - headerVisible?: boolean; - headerTitle?: string|React.ReactElement; - headerBackTitle?: string; - headerTruncatedBackTitle?: string; - headerRight?: React.ReactElement; - headerLeft?: React.ReactElement; - headerStyle?: ViewStyle; - headerTitleStyle?: ViewStyle; - headerTintColor?: string; - headerPressColorAndroid?: string; - gesturesEnabled?: boolean; -} - -export interface TabNavigatorScreenOptions { - title?: string; - tabBarVisible?: boolean; - tabBarIcon?: React.ReactElement - | ((options: { focused: boolean, tintColor: string }) => React.ReactElement); - tabBarLabel?: string - | React.ReactElement - | ((options: { focused: boolean, tintColor: string }) => React.ReactElement); -} - -export interface DrawerNavigatorScreenOptions { - title?: string; - drawerLabel?: string - |React.ReactElement - | ((options: {focused: boolean, tintColor: string}) => React.ReactElement) - ; - drawerIcon?: React.ReactElement - | ((options: {focused: boolean, tintColor: string}) => React.ReactElement) - ; -} - -export type NavigationNavigateActionCreator = (options: NavigationNavigateAction) => boolean; -export type NavigationResetActionCreator = (options: NavigationResetAction) => boolean; -export type NavigationBackActionCreator = (options?: NavigationBackAction) => boolean; -export type NavigationSetParamsActionCreator = (options: NavigationSetParamsAction) => boolean; - -export interface NavigationComponentProps { - screenProps: any - navigation: { - dispatch: any - goBack: NavigationBackActionCreator - navigate: NavigationNavigateActionCreator - setParams: NavigationSetParamsActionCreator - state: { - key: string - routeName: string, - params: T, - }, - } -} - -export const TabBarTop: React.ReactElement; -export const TabBarBottom: React.ReactElement; + }, +}; From 19d0ec2398c2c29219970e17be5a9d4f941685ab Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Wed, 14 Jun 2017 21:05:01 -0700 Subject: [PATCH 02/14] [react-navigation] Additional fixes and cleanup for defs outside TypeDefinition.js --- types/react-navigation/index.d.ts | 106 ++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index ac160a587d..792a6a5bea 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -5,8 +5,13 @@ // abrahambotros // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +/************************************* + * BEGIN FLOW TYPEDEFINITION.JS PORT * + *************************************/ + import * as React from 'react'; import { + TextStyle, ViewStyle, } from 'react-native'; @@ -446,3 +451,104 @@ export type LayoutEvent = { }, }, }; + +/*********************************** + * END FLOW TYPEDEFINITION.JS PORT * + ***********************************/ + +// From createNavigationContainer.js +interface NavigationContainerProps { + uriPrefix?: string | RegExp, + onNavigationStateChange?: ( + prevNav: NavigationState, + nav: NavigationState, + action: NavigationAction, + ) => void, +} + +export interface NavigationContainer extends React.Component< + NavigationContainerProps & NavigationNavigatorProps, + { nav: NavigationState | null } +> { + router: NavigationRouter +} + +export interface StackNavigatorConfig extends NavigationStackViewConfig, NavigationStackRouterConfig { + containerOptions?: any, +} + +// Return createNavigationContainer +export function StackNavigator( + routeConfigMap: NavigationRouteConfigMap, + stackConfig?: StackNavigatorConfig, +): NavigationContainer + +/** + * Drawer Navigator + */ +export interface DrawerViewConfig { + drawerWidth: number, + drawerPosition: 'left' | 'right', + contentComponent: React.ComponentClass, + contentOptions?: any, + style?: ViewStyle, +} +export interface DrawerNavigatorConfig extends NavigationTabRouterConfig, DrawerViewConfig { + containerConfig?: any, + contentOptions?: { + activeTintColor?: string, + activeBackgroundColor?: string, + inactiveTintColor?: string, + inactiveBackgroundColor?: string, + style?: ViewStyle, + labelStyle?: TextStyle, + } +} + +export function DrawerNavigator( + routeConfigMap: NavigationRouteConfigMap, + drawerConfig?: DrawerNavigatorConfig, +): NavigationContainer; + +/** + * Tab Navigator + */ + +// From views/TabView/TabView.js +export interface TabViewConfig { + tabBarComponent?: React.ComponentClass, + tabBarPosition?: 'top' | 'bottom', + tabBarOptions?: { + activeTintColor?: string, + activeBackgroundColor?: string, + inactiveTintColor?: string, + inactiveBackgroundColor?: string, + showLabel?: boolean, + style?: ViewStyle, + labelStyle?: TextStyle, + + // Top + showIcon?: boolean, + upperCaseLabel?: boolean, + pressColor?: string, + pressOpacity?: number, + scrollEnabled?: boolean, + tabStyle?: ViewStyle, + indicatorStyle?: ViewStyle + }, + swipeEnabled?: boolean, + animationEnabled?: boolean, + lazy?: boolean, +} + +// From navigators/TabNavigator.js +export interface TabNavigatorConfig extends NavigationTabRouterConfig, TabViewConfig { } + +// From navigators/TabNavigator.js +export function TabNavigator( + routeConfigMap: NavigationRouteConfigMap, + drawConfig?: TabNavigatorConfig, +): NavigationContainer; + +export const TabBarTop: React.ReactElement; +export const TabBarBottom: React.ReactElement; From 4312a93b457f0a3a12eb539038d93cfe1ef2cb44 Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Wed, 14 Jun 2017 21:17:09 -0700 Subject: [PATCH 03/14] [react-navigation] Fix flow Object -> TS any --- types/react-navigation/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 792a6a5bea..70bb306d1d 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -149,7 +149,7 @@ export type NavigationScreenOptions = { export type NavigationScreenConfigProps = { navigation: NavigationScreenProp, - screenProps: Object, + screenProps: any, }; export type NavigationScreenConfig = @@ -426,7 +426,7 @@ export type TransitionConfig = { transitionSpec?: NavigationTransitionSpec, // How to animate position and opacity of the screen // based on the value generated by the transitionSpec - screenInterpolator?: (props: NavigationSceneRendererProps) => Object, + screenInterpolator?: (props: NavigationSceneRendererProps) => any, }; export type NavigationAnimationSetter = ( From 9be2563bfc81f9127474f0c319c54532a3321517 Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Wed, 14 Jun 2017 21:42:24 -0700 Subject: [PATCH 04/14] [react-navigation] Typed generic for NavigationRoute * Also add NavigationParamsGeneric and screenProps additional placeholder types * Add custom/convenience wrapper section, including NavigationScreenProps --- types/react-navigation/index.d.ts | 86 +++++++++++++++++++------------ 1 file changed, 54 insertions(+), 32 deletions(-) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 70bb306d1d..615954c913 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -5,9 +5,15 @@ // abrahambotros // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -/************************************* - * BEGIN FLOW TYPEDEFINITION.JS PORT * - *************************************/ +/** + * BEGIN FLOW TYPEDEFINITION.JS PORT + * Reference: https://github.com/react-community/react-navigation/commit/f3a958dca1180af87611a35fb64dbd8dd57da898 + * + * NOTE: Please update the commit/link above when updating to a new Flow + * TypeDefinition.js reference, so we can conveniently just look at diffs on + * TypeDefinition.js between this latest reference point and the one you are + * using when making new updates. + */ import * as React from 'react'; import { @@ -52,12 +58,12 @@ export type NavigationState = { * Index refers to the active child route in the routes array. */ index: number, - routes: Array, + routes: Array, }; -export type NavigationRoute = NavigationLeafRoute | NavigationStateRoute; +export type NavigationRoute = NavigationLeafRoute | NavigationStateRoute; -export type NavigationLeafRoute = { +export type NavigationLeafRoute = { /** * React's key used by some navigators. No need to specify these manually, * they will be defined by the router. @@ -76,17 +82,17 @@ export type NavigationLeafRoute = { * Params passed to this route when navigating to it, * e.g. `{ car_id: 123 }` in a route that displays a car. */ - params?: NavigationParams, + params?: Params, }; -export type NavigationStateRoute = NavigationLeafRoute & { +export type NavigationStateRoute = NavigationLeafRoute & { index: number, - routes: Array, + routes: Array>, }; export type NavigationScreenOptionsGetter = ( - navigation: NavigationScreenProp, - screenProps?: {} + navigation: NavigationScreenProp, Action>, + screenProps?: { [key: string]: any } ) => Options; export type NavigationRouter = { @@ -103,14 +109,14 @@ export type NavigationRouter = { */ getActionForPathAndParams: ( path: string, - params?: NavigationParams + params?: NavigationParamsGeneric ) => (Action | null), getPathAndParamsForState: ( state: State ) => { path: string, - params?: NavigationParams, + params?: NavigationParamsGeneric, }, getComponentForRouteName: (routeName: string) => NavigationComponent, @@ -131,7 +137,7 @@ export type NavigationRouter = { export type NavigationScreenOption = | T | (( - navigation: NavigationScreenProp, + navigation: NavigationScreenProp, NavigationAction>, config: T ) => T); @@ -139,8 +145,8 @@ export type Style = ViewStyle; export type NavigationScreenDetails = { options: T, - state: NavigationRoute, - navigation: NavigationScreenProp, + state: NavigationRoute, + navigation: NavigationScreenProp, NavigationAction>, }; export type NavigationScreenOptions = { @@ -148,8 +154,8 @@ export type NavigationScreenOptions = { }; export type NavigationScreenConfigProps = { - navigation: NavigationScreenProp, - screenProps: any, + navigation: NavigationScreenProp, NavigationAction>, + screenProps: { [key: string]: any } }; export type NavigationScreenConfig = @@ -157,7 +163,7 @@ export type NavigationScreenConfig = | (NavigationScreenConfigProps & ((navigationOptionsContainer: { navigationOptions: NavigationScreenProp< - NavigationRoute, + NavigationRoute, NavigationAction >, }) => Options)); @@ -175,14 +181,14 @@ export type NavigationNavigator = React.ComponentClas navigationOptions?: NavigationScreenConfig, }; -export type NavigationParams = { +export type NavigationParamsGeneric = { [key: string]: string, }; export type NavigationNavigateAction = { type: 'Navigation/NAVIGATE', routeName: string, - params?: NavigationParams, + params?: any, // The action to run inside the sub-router action?: NavigationNavigateAction, @@ -200,12 +206,12 @@ export type NavigationSetParamsAction = { key: string, // The new params to merge into the existing route params - params?: NavigationParams, + params?: any, }; export type NavigationInitAction = { type: 'Navigation/INIT', - params?: NavigationParams, + params?: any, }; export type NavigationResetAction = { @@ -246,7 +252,7 @@ export type NavigationStackScreenOptions = NavigationScreenOptions & { export type NavigationStackRouterConfig = { initialRouteName?: string, - initialRouteParams?: NavigationParams, + initialRouteParams?: any, paths?: NavigationPathsConfig, navigationOptions?: NavigationScreenConfig, }; @@ -340,15 +346,15 @@ export type NavigationScreenProp = { goBack: (routeKey?: (string | null)) => boolean, navigate: ( routeName: string, - params?: NavigationParams, + params?: NavigationParamsGeneric, action?: NavigationAction ) => boolean, - setParams: (newParams: NavigationParams) => boolean, + setParams: (newParams: NavigationParamsGeneric) => boolean, }; export type NavigationNavigatorProps = { navigation: NavigationProp, - screenProps: any, + screenProps: { [key: string]: any } navigationOptions: any, }; @@ -371,7 +377,7 @@ export type NavigationScene = { isActive: boolean, isStale: boolean, key: string, - route: NavigationRoute, + route: NavigationRoute, }; export type NavigationTransitionProps = { @@ -402,7 +408,7 @@ export type NavigationTransitionProps = { scene: NavigationScene, index: number, - screenProps?: {}, + screenProps?: { [key: string]: any } }; // The scene renderer props are nearly identical to the props used for rendering @@ -452,9 +458,10 @@ export type LayoutEvent = { }, }; -/*********************************** - * END FLOW TYPEDEFINITION.JS PORT * - ***********************************/ +/** + * END FLOW TYPEDEFINITION.JS PORT + */ + // From createNavigationContainer.js interface NavigationContainerProps { @@ -552,3 +559,18 @@ export function TabNavigator( export const TabBarTop: React.ReactElement; export const TabBarBottom: React.ReactElement; + + +/** + * BEGIN CUSTOM CONVENIENCE INTERFACES + */ + +export interface NavigationScreenProps { + navigation: NavigationScreenProp, NavigationAction>, + screenProps: { [key: string]: any }, + navigationOptions: any, +} + +/** + * END CUSTOM CONVENIENCE INTERFACES + */ From e5843ac8f5e492298e8974ee8413cd426d7f6cd4 Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Wed, 14 Jun 2017 22:52:14 -0700 Subject: [PATCH 05/14] [react-navigation] Misc fixes and improvements --- types/react-navigation/index.d.ts | 40 ++++++++++--------- .../react-navigation-tests.tsx | 7 ++-- 2 files changed, 26 insertions(+), 21 deletions(-) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 615954c913..82de567263 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -61,7 +61,7 @@ export type NavigationState = { routes: Array, }; -export type NavigationRoute = NavigationLeafRoute | NavigationStateRoute; +export type NavigationRoute = NavigationLeafRoute | NavigationStateRoute; export type NavigationLeafRoute = { /** @@ -85,7 +85,7 @@ export type NavigationLeafRoute = { params?: Params, }; -export type NavigationStateRoute = NavigationLeafRoute & { +export type NavigationStateRoute = NavigationLeafRoute & { index: number, routes: Array>, }; @@ -109,14 +109,14 @@ export type NavigationRouter = { */ getActionForPathAndParams: ( path: string, - params?: NavigationParamsGeneric + params?: NavigationParams ) => (Action | null), getPathAndParamsForState: ( state: State ) => { path: string, - params?: NavigationParamsGeneric, + params?: NavigationParams, }, getComponentForRouteName: (routeName: string) => NavigationComponent, @@ -181,7 +181,7 @@ export type NavigationNavigator = React.ComponentClas navigationOptions?: NavigationScreenConfig, }; -export type NavigationParamsGeneric = { +export type NavigationParams = { [key: string]: string, }; @@ -346,16 +346,16 @@ export type NavigationScreenProp = { goBack: (routeKey?: (string | null)) => boolean, navigate: ( routeName: string, - params?: NavigationParamsGeneric, + params?: any, action?: NavigationAction ) => boolean, - setParams: (newParams: NavigationParamsGeneric) => boolean, + setParams: (newParams: NavigationParams) => boolean, }; export type NavigationNavigatorProps = { - navigation: NavigationProp, - screenProps: { [key: string]: any } - navigationOptions: any, + navigation?: NavigationProp, + screenProps?: { [key: string]: any } + navigationOptions?: any, }; /** @@ -462,6 +462,8 @@ export type LayoutEvent = { * END FLOW TYPEDEFINITION.JS PORT */ +// From addNavigatorHelpers.js +export function addNavigationHelpers(navigation: NavigationProp): NavigationScreenProp; // From createNavigationContainer.js interface NavigationContainerProps { @@ -473,11 +475,13 @@ interface NavigationContainerProps { ) => void, } -export interface NavigationContainer extends React.Component< - NavigationContainerProps & NavigationNavigatorProps, - { nav: NavigationState | null } +export interface NavigationContainer extends React.ComponentClass< + NavigationContainerProps & NavigationNavigatorProps > { router: NavigationRouter + screenProps: { [key: string]: any }, + navigationOptions: any, + state: { nav: NavigationState | null }, } export interface StackNavigatorConfig extends NavigationStackViewConfig, NavigationStackRouterConfig { @@ -488,7 +492,7 @@ export interface StackNavigatorConfig extends NavigationStackViewConfig, Navigat export function StackNavigator( routeConfigMap: NavigationRouteConfigMap, stackConfig?: StackNavigatorConfig, -): NavigationContainer +): NavigationContainer; /** * Drawer Navigator @@ -515,7 +519,7 @@ export interface DrawerNavigatorConfig extends NavigationTabRouterConfig, Drawer export function DrawerNavigator( routeConfigMap: NavigationRouteConfigMap, drawerConfig?: DrawerNavigatorConfig, -): NavigationContainer; +): NavigationContainer; /** * Tab Navigator @@ -555,10 +559,10 @@ export interface TabNavigatorConfig extends NavigationTabRouterConfig, TabViewCo export function TabNavigator( routeConfigMap: NavigationRouteConfigMap, drawConfig?: TabNavigatorConfig, -): NavigationContainer; +): NavigationContainer; -export const TabBarTop: React.ReactElement; -export const TabBarBottom: React.ReactElement; +export const TabBarTop: React.ComponentClass; +export const TabBarBottom: React.ComponentClass; /** diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index 2493d92f84..884d57e4f0 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import { View } from 'react-native'; import { addNavigationHelpers, + NavigationStackAction, + NavigationTabScreenOptions, StackNavigator, - TabNavigatorScreenOptions, TabNavigatorConfig, TabBarTop, TabBarBottom, @@ -26,14 +27,14 @@ const Router = (props: any) => ( { return true; }, state: {}, }) } /> ); -const tabNavigatorScreenOptions: TabNavigatorScreenOptions = { +const tabNavigatorScreenOptions: NavigationTabScreenOptions = { title: 'title', tabBarVisible: true, tabBarIcon: , From e34616fd3c94b0b4a1fc8a13c2becd801cdd97ba Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Wed, 14 Jun 2017 22:58:27 -0700 Subject: [PATCH 06/14] [react-navigation] Improve test, add screen component props type checks --- types/react-navigation/index.d.ts | 9 ++++++ .../react-navigation-tests.tsx | 28 ++++++++++++++++--- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 82de567263..ffd543f261 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -462,6 +462,11 @@ export type LayoutEvent = { * END FLOW TYPEDEFINITION.JS PORT */ + +/** + * BEGIN MANUAL DEFINITIONS OUTSIDE OF TYPEDEFINITION.JS + */ + // From addNavigatorHelpers.js export function addNavigationHelpers(navigation: NavigationProp): NavigationScreenProp; @@ -564,6 +569,10 @@ export function TabNavigator( export const TabBarTop: React.ComponentClass; export const TabBarBottom: React.ComponentClass; +/** + * END MANUAL DEFINITIONS OUTSIDE OF TYPEDEFINITION.JS + */ + /** * BEGIN CUSTOM CONVENIENCE INTERFACES diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index 884d57e4f0..b95092d5e0 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { View } from 'react-native'; import { addNavigationHelpers, + NavigationScreenProps, NavigationStackAction, NavigationTabScreenOptions, StackNavigator, @@ -10,14 +11,33 @@ import { TabBarBottom, } from 'react-navigation'; -const Start = ( - -); +/** + * @class StartScreen @extends React.Component + * @desc Simple screen component class with typed component props that should + * receive the navigation prop from the AppNavigator. + */ +interface StartScreenComponentProps { + id: number, + s: string, +} +interface StartScreenProps extends NavigationScreenProps { } +class StartScreen extends React.Component { + render() { + // Implicit type checks. + const navigationStateParams: StartScreenComponentProps = this.props.navigation.state.params; + const id = this.props.navigation.state.params.id; + const s = this.props.navigation.state.params.s; + + return ( + + ); + } +} export const AppNavigator = StackNavigator({ StartImage: { path: 'startImage', - screen: Start, + screen: StartScreen, }, }, { initialRouteName: 'StartImage', From 4ba39d401688251ef3421d440e4c0bda142e7390 Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Thu, 15 Jun 2017 08:40:23 -0700 Subject: [PATCH 07/14] [react-navigation] Fix linter errors --- types/react-navigation/index.d.ts | 34 +++++++++---------- .../react-navigation-tests.tsx | 2 +- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index ffd543f261..f2c5ff3591 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -135,7 +135,7 @@ export type NavigationRouter = { }; export type NavigationScreenOption = - | T + T | (( navigation: NavigationScreenProp, NavigationAction>, config: T @@ -159,7 +159,7 @@ export type NavigationScreenConfigProps = { }; export type NavigationScreenConfig = - | Options + Options | (NavigationScreenConfigProps & ((navigationOptionsContainer: { navigationOptions: NavigationScreenProp< @@ -169,7 +169,7 @@ export type NavigationScreenConfig = }) => Options)); export type NavigationComponent = - | NavigationScreenComponent + NavigationScreenComponent | NavigationNavigator; export type NavigationScreenComponent = React.ComponentClass & { @@ -226,14 +226,14 @@ export type NavigationUriAction = { uri: string, }; -export type NavigationStackViewConfig = { +export interface NavigationStackViewConfig { mode?: 'card' | 'modal', headerMode?: HeaderMode, cardStyle?: Style, transitionConfig?: () => TransitionConfig, onTransitionStart?: () => void, onTransitionEnd?: () => void, -}; +} export type NavigationStackScreenOptions = NavigationScreenOptions & { header?: (React.ReactElement | ((headerProps: HeaderProps) => React.ReactElement)) | null, @@ -250,27 +250,27 @@ export type NavigationStackScreenOptions = NavigationScreenOptions & { gesturesEnabled?: boolean, }; -export type NavigationStackRouterConfig = { +export interface NavigationStackRouterConfig { initialRouteName?: string, initialRouteParams?: any, paths?: NavigationPathsConfig, navigationOptions?: NavigationScreenConfig, -}; +} export type NavigationStackAction = - | NavigationInitAction + NavigationInitAction | NavigationNavigateAction | NavigationBackAction | NavigationSetParamsAction | NavigationResetAction; export type NavigationTabAction = - | NavigationInitAction + NavigationInitAction | NavigationNavigateAction | NavigationBackAction; export type NavigationAction = - | NavigationInitAction + NavigationInitAction | NavigationStackAction | NavigationTabAction; @@ -280,7 +280,7 @@ export type NavigationRouteConfig = T & { }; export type NavigationScreenRouteConfig = - | { + { screen: NavigationComponent, } | { @@ -291,7 +291,7 @@ export type NavigationPathsConfig = { [routeName: string]: string, }; -export type NavigationTabRouterConfig = { +export interface NavigationTabRouterConfig { initialRouteName?: string, paths?: NavigationPathsConfig, navigationOptions?: NavigationScreenConfig, @@ -299,16 +299,16 @@ export type NavigationTabRouterConfig = { // Does the back button cause the router to switch to the initial tab backBehavior?: 'none' | 'initialRoute', // defaults `initialRoute` -}; +} export type NavigationTabScreenOptions = NavigationScreenOptions & { tabBarIcon?: - | React.ReactElement + React.ReactElement | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< any > | null)), tabBarLabel?: - | string + string | React.ReactElement | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< any @@ -318,12 +318,12 @@ export type NavigationTabScreenOptions = NavigationScreenOptions & { export type NavigationDrawerScreenOptions = NavigationScreenOptions & { drawerIcon?: - | React.ReactElement + React.ReactElement | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< any > | null)), drawerLabel?: - | React.ReactElement + React.ReactElement | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement< any > | null)), diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index b95092d5e0..535a7a04af 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -47,7 +47,7 @@ const Router = (props: any) => ( { return true; }, + dispatch: (action: NavigationStackAction): boolean => true, state: {}, }) } From cf39e7e9bd7e233527ba8b86504d30c02815776e Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Thu, 15 Jun 2017 08:48:33 -0700 Subject: [PATCH 08/14] [react-navigation] Add test to navigate to next screen --- .../react-navigation-tests.tsx | 39 ++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index 535a7a04af..3a4e02a16c 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -1,5 +1,8 @@ import * as React from 'react'; -import { View } from 'react-native'; +import { + TouchableOpacity, + View, +} from 'react-native'; import { addNavigationHelpers, NavigationScreenProps, @@ -28,6 +31,40 @@ class StartScreen extends React.Component { const id = this.props.navigation.state.params.id; const s = this.props.navigation.state.params.s; + return ( + + + + ); + } + private navigateToNextScreen = (): void => { + this.props.navigation.navigate( + ROUTE_NAME_NEXT_SCREEN, + { + id: this.props.navigation.state.params.id, + name: this.props.navigation.state.params.s, + } as NextScreenComponentProps, + ); + + } +} + +/** + * @class NextScreen @extends React.Component + */ +const ROUTE_NAME_NEXT_SCREEN = "NextScreen"; +interface NextScreenComponentProps { + id: number, + name: string, +} +interface NextScreenProps extends NavigationScreenProps { } +class NextScreen extends React.Component { + render() { + // Implicit type checks. + const navigationStateParams: NextScreenComponentProps = this.props.navigation.state.params; + const id = this.props.navigation.state.params.id; + const name = this.props.navigation.state.params.name; + return ( ); From 28fc9fb21badc7211009614bc7ae552aa41208e5 Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Thu, 15 Jun 2017 08:52:18 -0700 Subject: [PATCH 09/14] [react-navigation] NavigationParams fixes --- types/react-navigation/index.d.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index f2c5ff3591..5f53ea7b97 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -181,14 +181,14 @@ export type NavigationNavigator = React.ComponentClas navigationOptions?: NavigationScreenConfig, }; -export type NavigationParams = { - [key: string]: string, -}; +export interface NavigationParams { + [key: string]: any, +} export type NavigationNavigateAction = { type: 'Navigation/NAVIGATE', routeName: string, - params?: any, + params?: NavigationParams, // The action to run inside the sub-router action?: NavigationNavigateAction, @@ -206,12 +206,12 @@ export type NavigationSetParamsAction = { key: string, // The new params to merge into the existing route params - params?: any, + params?: NavigationParams, }; export type NavigationInitAction = { type: 'Navigation/INIT', - params?: any, + params?: NavigationParams, }; export type NavigationResetAction = { @@ -252,7 +252,7 @@ export type NavigationStackScreenOptions = NavigationScreenOptions & { export interface NavigationStackRouterConfig { initialRouteName?: string, - initialRouteParams?: any, + initialRouteParams?: NavigationParams, paths?: NavigationPathsConfig, navigationOptions?: NavigationScreenConfig, } @@ -346,7 +346,7 @@ export type NavigationScreenProp = { goBack: (routeKey?: (string | null)) => boolean, navigate: ( routeName: string, - params?: any, + params?: NavigationParams, action?: NavigationAction ) => boolean, setParams: (newParams: NavigationParams) => boolean, From 9f822c4b0781a6e14ee9ad1f65abc4b87572a089 Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Thu, 15 Jun 2017 09:00:56 -0700 Subject: [PATCH 10/14] [react-navigation] Update reference commit link to tree link --- types/react-navigation/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 5f53ea7b97..d2bf9882de 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -7,7 +7,7 @@ /** * BEGIN FLOW TYPEDEFINITION.JS PORT - * Reference: https://github.com/react-community/react-navigation/commit/f3a958dca1180af87611a35fb64dbd8dd57da898 + * Reference: https://github.com/react-community/react-navigation/tree/52a2846e77119148320bcea83b8982a8bc6acce3 * * NOTE: Please update the commit/link above when updating to a new Flow * TypeDefinition.js reference, so we can conveniently just look at diffs on From dbdfb4a24fe0a9b481945e9046e351018d901fd7 Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Thu, 15 Jun 2017 09:41:00 -0700 Subject: [PATCH 11/14] [react-navigation] Move NavigationActions namespace, add todo for possibly removal --- types/react-navigation/index.d.ts | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 5f86c8ed58..237813ec0d 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -274,14 +274,6 @@ export type NavigationAction = | NavigationStackAction | NavigationTabAction; -export namespace NavigationActions { - function init(options?: NavigationInitAction): NavigationInitAction; - function navigate(options: NavigationNavigateAction): NavigationNavigateAction; - function reset(options: NavigationResetAction): NavigationResetAction; - function back(options?: NavigationBackAction): NavigationBackAction; - function setParams(options: NavigationSetParamsAction): NavigationSetParamsAction; -} - export type NavigationRouteConfig = T & { navigationOptions?: NavigationScreenConfig, path?: string, @@ -577,6 +569,20 @@ export function TabNavigator( export const TabBarTop: React.ComponentClass; export const TabBarBottom: React.ComponentClass; +/** + * NavigationActions + * @todo Is this necessary, or can we remove? Not referenced anywhere else here, but it seems a + * recent commit or two touches these. Can anyone provide a strong use case for keeping this in? + */ +export namespace NavigationActions { + function init(options?: NavigationInitAction): NavigationInitAction; + function navigate(options: NavigationNavigateAction): NavigationNavigateAction; + function reset(options: NavigationResetAction): NavigationResetAction; + function back(options?: NavigationBackAction): NavigationBackAction; + function setParams(options: NavigationSetParamsAction): NavigationSetParamsAction; +} + + /** * END MANUAL DEFINITIONS OUTSIDE OF TYPEDEFINITION.JS */ From c5ab866dbccbdb4924946ac4f50ecc76841576c5 Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Sun, 18 Jun 2017 15:21:51 -0700 Subject: [PATCH 12/14] [react-navigation] Minor fixes --- types/react-navigation/index.d.ts | 8 ++++---- .../react-navigation-tests.tsx | 19 ++++++++++++------- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/types/react-navigation/index.d.ts b/types/react-navigation/index.d.ts index 237813ec0d..89ffec3a09 100644 --- a/types/react-navigation/index.d.ts +++ b/types/react-navigation/index.d.ts @@ -592,10 +592,10 @@ export namespace NavigationActions { * BEGIN CUSTOM CONVENIENCE INTERFACES */ -export interface NavigationScreenProps { - navigation: NavigationScreenProp, NavigationAction>, - screenProps: { [key: string]: any }, - navigationOptions: any, +export interface NavigationScreenProps { + navigation: NavigationScreenProp, NavigationAction>, + screenProps?: { [key: string]: any }, + navigationOptions?: NavigationScreenConfig, } /** diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index 3a4e02a16c..5fe48aef1b 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -19,15 +19,15 @@ import { * @desc Simple screen component class with typed component props that should * receive the navigation prop from the AppNavigator. */ -interface StartScreenComponentProps { +interface StartScreenNavigationParams { id: number, s: string, } -interface StartScreenProps extends NavigationScreenProps { } +interface StartScreenProps extends NavigationScreenProps { } class StartScreen extends React.Component { render() { // Implicit type checks. - const navigationStateParams: StartScreenComponentProps = this.props.navigation.state.params; + const navigationStateParams: StartScreenNavigationParams = this.props.navigation.state.params; const id = this.props.navigation.state.params.id; const s = this.props.navigation.state.params.s; @@ -43,7 +43,7 @@ class StartScreen extends React.Component { { id: this.props.navigation.state.params.id, name: this.props.navigation.state.params.s, - } as NextScreenComponentProps, + } as NextScreenNavigationParams, ); } @@ -53,15 +53,15 @@ class StartScreen extends React.Component { * @class NextScreen @extends React.Component */ const ROUTE_NAME_NEXT_SCREEN = "NextScreen"; -interface NextScreenComponentProps { +interface NextScreenNavigationParams { id: number, name: string, } -interface NextScreenProps extends NavigationScreenProps { } +interface NextScreenProps extends NavigationScreenProps { } class NextScreen extends React.Component { render() { // Implicit type checks. - const navigationStateParams: NextScreenComponentProps = this.props.navigation.state.params; + const navigationStateParams: NextScreenNavigationParams = this.props.navigation.state.params; const id = this.props.navigation.state.params.id; const name = this.props.navigation.state.params.name; @@ -71,6 +71,10 @@ class NextScreen extends React.Component { } } +const initialRouteParams: StartScreenNavigationParams = { + id: 1, + s: "Start", +}; export const AppNavigator = StackNavigator({ StartImage: { path: 'startImage', @@ -78,6 +82,7 @@ export const AppNavigator = StackNavigator({ }, }, { initialRouteName: 'StartImage', + initialRouteParams, }); const Router = (props: any) => ( From 56020af82175db6e4645874ceeb5c59cfff2bc97 Mon Sep 17 00:00:00 2001 From: abrahambotros Date: Sat, 24 Jun 2017 09:22:23 -0700 Subject: [PATCH 13/14] [react-navigation] Fix and extend tests --- .../react-navigation-tests.tsx | 104 ++++++++++++++---- 1 file changed, 83 insertions(+), 21 deletions(-) diff --git a/types/react-navigation/react-navigation-tests.tsx b/types/react-navigation/react-navigation-tests.tsx index b3370f412d..835e63d756 100644 --- a/types/react-navigation/react-navigation-tests.tsx +++ b/types/react-navigation/react-navigation-tests.tsx @@ -2,14 +2,19 @@ import * as React from 'react'; import { TouchableOpacity, View, + ViewStyle, } from 'react-native'; import { addNavigationHelpers, + NavigationRouteConfigMap, NavigationScreenProp, NavigationScreenProps, NavigationStackAction, + NavigationStackScreenOptions, NavigationTabScreenOptions, StackNavigator, + StackNavigatorConfig, + TabNavigator, TabNavigatorConfig, TabBarTop, Transitioner, @@ -18,11 +23,21 @@ import { NavigationTransitionProps, } from 'react-navigation'; +// Constants +const viewStyle: ViewStyle = { + flex: 1, + margin: 42, + padding: 0, + backgroundColor: "white", +}; + + /** * @class StartScreen @extends React.Component * @desc Simple screen component class with typed component props that should * receive the navigation prop from the AppNavigator. */ +const ROUTE_NAME_START_SCREEN = "StartScreen"; interface StartScreenNavigationParams { id: number, s: string, @@ -79,30 +94,39 @@ const initialRouteParams: StartScreenNavigationParams = { id: 1, s: "Start", }; -export const AppNavigator = StackNavigator({ - StartImage: { - path: 'startImage', +const routeConfigMap: NavigationRouteConfigMap = { + [ROUTE_NAME_START_SCREEN]: { + path: "start", screen: StartScreen, }, -}, { - initialRouteName: 'StartImage', - initialRouteParams, -}); + [ROUTE_NAME_NEXT_SCREEN]: { + path: "next", + screen: NextScreen, + }, +}; +export const AppNavigator = StackNavigator( + routeConfigMap, + { + initialRouteName: ROUTE_NAME_START_SCREEN, + initialRouteParams, + }, +); /** * Router. */ const Router = (props: any) => ( - true, - state: {}, - }) - } + true, + state: {}, + }) + } /> ); + /** * Tab navigator. */ @@ -112,11 +136,55 @@ const tabNavigatorScreenOptions: NavigationTabScreenOptions = { tabBarVisible: true, tabBarIcon: , tabBarLabel: 'label', -} +}; const tabNavigatorConfig: TabNavigatorConfig = { lazy: true, tabBarComponent: TabBarTop, + tabBarOptions: tabNavigatorScreenOptions, +}; + +const BasicTabNavigator = TabNavigator( + routeConfigMap, + tabNavigatorConfig, +); + +function renderBasicTabNavigator(): JSX.Element { + return ( + { }} + style={viewStyle} + /> + ); +} + + +/** + * Stack navigator. + */ + +const stackNavigatorScreenOptions: NavigationStackScreenOptions = { + title: 'title', +}; + +const stackNavigatorConfig: StackNavigatorConfig = { + mode: "card", + headerMode: "screen", + navigationOptions: stackNavigatorScreenOptions, +}; + +const BasicStackNavigator = StackNavigator( + routeConfigMap, + stackNavigatorConfig, +); + +function renderBasicStackNavigator(): JSX.Element { + return ( + { }} + style={viewStyle} + /> + ); } @@ -151,9 +219,3 @@ class CustomTransitioner extends React.Component return {} } } - -const BasicStackNavigation = StackNavigator({ - StartScreen: { screen: Start } -}); - - From 2f8bbfbe2847aee9d643ba0d6fa1caf0dbc1733e Mon Sep 17 00:00:00 2001 From: Nathan Shively-Sanders Date: Mon, 26 Jun 2017 09:50:14 -0700 Subject: [PATCH 14/14] Add dom lib reference to react-navigation --- types/react-navigation/tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/types/react-navigation/tsconfig.json b/types/react-navigation/tsconfig.json index e670f06667..ad15863a78 100644 --- a/types/react-navigation/tsconfig.json +++ b/types/react-navigation/tsconfig.json @@ -2,7 +2,8 @@ "compilerOptions": { "module": "commonjs", "lib": [ - "es6" + "es6", + "dom" ], "noImplicitAny": true, "noImplicitThis": true,