diff --git a/packages/react-navigation/.flowconfig b/packages/react-navigation/.flowconfig index ddac272f..461dd571 100644 --- a/packages/react-navigation/.flowconfig +++ b/packages/react-navigation/.flowconfig @@ -41,7 +41,7 @@ experimental.strict_type_args=true munge_underscores=true -module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' +module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '/stubs/RelativeImageStub.js.flow' module.file_ext=.js module.file_ext=.jsx module.file_ext=.json diff --git a/packages/react-navigation/flow-typed/react-native.js b/packages/react-navigation/flow-typed/react-native.js index 06d85854..d1b5881a 100644 --- a/packages/react-navigation/flow-typed/react-native.js +++ b/packages/react-navigation/flow-typed/react-native.js @@ -5,18 +5,18 @@ declare module 'react-native' { declare type Color = string | number; declare type Transform = - { perspective: number } | - { scale: number } | - { scaleX: number } | - { scaleY: number } | - { translateX: number } | - { translateY: number } | - { rotate: string } | - { rotateX: string } | - { rotateY: string } | - { rotateZ: string } | - { skewX: string } | - { skewY: string }; + { perspective: number | AnimatedInterpolation | AnimatedValue } | + { scale: number | AnimatedInterpolation | AnimatedValue } | + { scaleX: number | AnimatedInterpolation | AnimatedValue } | + { scaleY: number | AnimatedInterpolation | AnimatedValue } | + { translateX: number | AnimatedInterpolation | AnimatedValue } | + { translateY: number | AnimatedInterpolation | AnimatedValue } | + { rotate: string | AnimatedInterpolation | AnimatedValue } | + { rotateX: string | AnimatedInterpolation | AnimatedValue } | + { rotateY: string | AnimatedInterpolation | AnimatedValue } | + { rotateZ: string | AnimatedInterpolation | AnimatedValue } | + { skewX: string | AnimatedInterpolation | AnimatedValue } | + { skewY: string | AnimatedInterpolation | AnimatedValue }; declare type TransformPropTypes = {| transform?: Array @@ -580,7 +580,7 @@ declare module 'react-native' { declare type StylePropTypes = {| ...LayoutPropTypes, ...ShadowPropTypes, - ...TransformPropTypes, + ...$Exact, ...ExtraImageStylePropTypes, ...ExtraTextStylePropTypes, ...ExtraViewStylePropTypes, @@ -588,8 +588,8 @@ declare module 'react-native' { declare type StyleId = number; - declare type Styles = {[key: string]: StylePropTypes}; - declare type StyleRuleSet = {[key: $Keys]: StyleId}; + declare export type StyleDefinition = {[key: string]: StylePropTypes}; + declare type StyleRuleSet = {[key: $Keys]: StyleId}; declare type StyleProp = false | null | void | T | V | Array>; declare export var StyleSheet: {| @@ -597,7 +597,7 @@ declare module 'react-native' { absoluteFill: StyleId, absoluteFillObject: Object, flatten: (style: StyleProp) => StylePropTypes, - create(styles: S): StyleRuleSet, + create(styles: S): StyleRuleSet, setStyleAttributePreprocessor(property: string, process: (nextProp: mixed) => mixed): void, |}; @@ -671,8 +671,8 @@ declare module 'react-native' { declare type ViewDefaultProps = { }; - - declare type ViewProps = { + + declare type RCTViewAttributes = { accessible?: boolean, accessibilityLabel?: React$PropType$Primitive, accessibilityComponentType?: AccessibilityComponentType, @@ -684,6 +684,23 @@ declare module 'react-native' { onMagicTap?: Function, testID?: string, nativeID?: string, + pointerEvents?: 'box-none'| 'none'| 'box-only'| 'auto', + removeClippedSubviews?: boolean, + renderToHardwareTextureAndroid?: boolean, + shouldRasterizeIOS?: boolean, + collapsable?: boolean, + needsOffscreenAlphaCompositing?: boolean, + hitSlop?: EdgeInsetsProp, + /** + * Invoked on mount and layout changes with + * + * `{nativeEvent: {layout: {x, y, width, height}}}` + */ + onLayout?: Function, + } + + declare export type ViewProps = { + ...$Exact, onResponderGrant?: Function, onResponderMove?: Function, onResponderReject?: Function, @@ -694,18 +711,11 @@ declare module 'react-native' { onStartShouldSetResponderCapture?: Function, onMoveShouldSetResponder?: Function, onMoveShouldSetResponderCapture?: Function, - hitSlop?: EdgeInsetsProp, - pointerEvents?: 'box-none'| 'none'| 'box-only'| 'auto', - style?: StyleProp, - removeClippedSubviews?: boolean, - renderToHardwareTextureAndroid?: boolean, - shouldRasterizeIOS?: boolean, - collapsable?: boolean, - needsOffscreenAlphaCompositing?: boolean, + style?: StyleProp, children?: React$Element<*>, }; - declare export class View extends React$Component { + declare class BaseView extends React$Component { blur(): void, focus(): void, measure(callback: MeasureOnSuccessCallback): void, @@ -715,8 +725,22 @@ declare module 'react-native' { onSuccess: MeasureLayoutOnSuccessCallback, onFail: () => void, ): void, - setNativeProps(nativeProps: ViewProps): void, + setNativeProps(nativeProps: P): void, } + + declare export class View extends BaseView {} + + declare export type AnimatedViewStylePropTypes = { + ...$Exact, + ...({ [key: $Keys]: AnimatedValue | AnimatedInterpolation }) + }; + + declare type AnimatedViewProps = { + ...$Exact, + style: StyleProp, + } + + declare class AnimatedView extends BaseView {} declare type TextDefaultProps = { accessible: true, @@ -725,7 +749,8 @@ declare module 'react-native' { disabled: false, }; - declare type TextProps = { + declare export type TextProps = { + ...$Exact, /** * When `numberOfLines` is set, this prop defines how text will be truncated. * `numberOfLines` must be set in conjunction with this prop. @@ -759,12 +784,6 @@ declare module 'react-native' { * @platform android */ textBreakStrategy?: 'simple' | 'highQuality' | 'balanced', - /** - * Invoked on mount and layout changes with - * - * `{nativeEvent: {layout: {x, y, width, height}}}` - */ - onLayout?: Function, /** * This function is called on press. * @@ -842,7 +861,7 @@ declare module 'react-native' { children?: React$Element<*>, }; - declare export class Text extends React$Component { + declare class BaseText extends React$Component { blur(): void, focus(): void, measure(callback: MeasureOnSuccessCallback): void, @@ -852,8 +871,22 @@ declare module 'react-native' { onSuccess: MeasureLayoutOnSuccessCallback, onFail: () => void, ): void, - setNativeProps(nativeProps: TextProps): void, + setNativeProps(nativeProps: P): void, } + + declare export class Text extends BaseText {} + + declare type AnimatedTextStylePropTypes = { + ...$Exact, + ...({ [key: $Keys]: AnimatedValue | AnimatedInterpolation }) + }; + + declare type AnimatedTextProps = { + ...$Exact, + style: StyleProp, + }; + + declare class AnimatedText extends BaseText {} declare type ImageUriSourcePropType = { uri: string, @@ -1056,7 +1089,7 @@ declare module 'react-native' { scale: number, }; - declare export class Image extends React$Component { + declare class BaseImage extends React$Component { static resizeMode: ImageResizeModeEnum, /** * Retrieve the width and height (in pixels) of an image prior to displaying it. @@ -1113,12 +1146,26 @@ declare module 'react-native' { onSuccess: MeasureLayoutOnSuccessCallback, onFail: () => void, ): void, - setNativeProps(nativeProps: ImageProps): void, + setNativeProps(nativeProps: P): void, } + + declare export class Image extends BaseImage {} + + declare type AnimatedImageStylePropTypes = { + ...$Exact, + ...({ [key: $Keys]: AnimatedValue | AnimatedInterpolation }) + }; + + declare type AnimatedImageProps = { + ...$Exact, + style: StyleProp, + }; + + declare class AnimatedImage extends BaseView {} declare type ScrollViewProps = { - ...ViewProps, + ...$Exact, /** * Controls whether iOS should automatically adjust the content inset * for scroll views that are placed behind a navigation bar or @@ -1417,9 +1464,9 @@ declare module 'react-native' { overScrollMode?: 'auto' | 'always' | 'never', } - declare export class ScrollView extends React$Component { + declare export class BaseScrollView extends React$Component { // TODO(lmr): ScrollResponder.Mixin? - setNativeProps(props: ScrollViewProps): void, + setNativeProps(props: P): void, /** * Returns a reference to the underlying scroll responder, which supports @@ -1462,7 +1509,21 @@ declare module 'react-native' { options?: { animated?: boolean }, ): void, } - + + declare export class ScrollView extends BaseScrollView {} + + declare type AnimatedScrollViewStyleProps = { + ...$Exact, + ...({ [key: $Keys]: AnimatedValue | AnimatedInterpolation }) + }; + + declare type AnimatedScrollViewProps = { + ...$Exact, + style: StyleProp, + }; + + declare class AnimatedScrollView extends BaseView {} + declare export var Platform: {| OS: 'ios' | 'android', Version: number, @@ -2011,7 +2072,7 @@ declare module 'react-native' { * see [Issue#7070](https://github.com/facebook/react-native/issues/7070) * for more detail. * - * [Styles](docs/style.html) + * [StyleDefinition](docs/style.html) */ style?: StyleProp, /** @@ -2490,7 +2551,8 @@ declare module 'react-native' { setDeadline(deadline: number): void, |}; - declare type EasingFunction = (t: number) => number; + declare type EasingFunction = (t?: number) => number; + declare type EasingFunctionGenerator = (s: number) => EasingFunction; declare export var Easing: {| step0: (n: number) => EasingFunction, @@ -2506,7 +2568,7 @@ declare module 'react-native' { * n = 4: http://easings.net/#easeInQuart * n = 5: http://easings.net/#easeInQuint */ - poly: EasingFunction, + poly: EasingFunctionGenerator, /** * A sinusoidal function. @@ -2595,10 +2657,6 @@ declare module 'react-native' { inOut(easing: EasingFunction): EasingFunction, |}; - - - - declare type ExtrapolateType = 'extend' | 'identity' | 'clamp'; declare type InterpolationConfigType = { inputRange: Array, @@ -2681,6 +2739,12 @@ declare module 'react-native' { declare type ValueListenerCallback = (state: {value: number}) => void; declare class AnimatedValue extends AnimatedWithChildren { + __isNative: boolean, + __getValue: () => number, + __getAnimatedValue: () => number, + + _listeners: { [key: string]: mixed }, + constructor(value: number): void, /** * Directly set the value. This will stop any animations running on the value @@ -2883,7 +2947,7 @@ declare module 'react-native' { } - declare var Animated: {| + declare export var Animated: {| /** * Standard value class for driving animations. Typically initialized with * `new Animated.Value(0);` @@ -3049,6 +3113,11 @@ declare module 'react-native' { */ forkEvent(event: ?AnimatedEvent | ?Function, listener: Function): AnimatedEvent | Function, unforkEvent(event: ?AnimatedEvent | ?Function, listener: Function): void , + + Text: Class, + View: Class, + Image: Class, + ScrollView: Class, |}; declare export function findNodeHandle(componentOrHandle: any): ?number; @@ -3135,7 +3204,12 @@ declare module 'react-native' { tvParallaxProperties?: Object, }; - declare export class TouchableOpacity extends React$Component { + declare type TouchableOpacityDefaultProps = { + activeOpacity: number, + focusedOpacity: number, + }; + + declare export class TouchableOpacity extends React$Component { static defaultProps: { activeOpacity: 0.2, focusedOpacity: 0.7, @@ -3220,8 +3294,8 @@ declare module 'react-native' { */ background: { type: 'RippleAndroid', - color?: number, - borderless?: boolean, + color: number, + borderless: boolean, } | { type: 'ThemeAttrAndroid', attribute: string, @@ -3238,8 +3312,13 @@ declare module 'react-native' { */ useForeground?: boolean, }; + + declare type TouchableNativeFeedbackDefaultProps = { + activeOpacity: number, + underlayColor: string, + }; - declare export class TouchableNativeFeedback extends React$Component { + declare export class TouchableNativeFeedback extends React$Component { static defaultProps: { activeOpacity: 0.85, underlayColor: 'black', @@ -4318,7 +4397,7 @@ declare module 'react-native' { // declare export var Image: any; // declare export var Dimensions: any; // declare export var ScrollView: any; - // declare export var Animated: any; // yes // TODO(lmr): View/Text/Image/ScrollView + // declare export var Animated: any; // yes // declare export var Alert: any; // yes // declare export var TouchableHighlight: any; // declare export var ActivityIndicator: any; diff --git a/packages/react-navigation/package.json b/packages/react-navigation/package.json index 4adb6e7e..2babd59e 100644 --- a/packages/react-navigation/package.json +++ b/packages/react-navigation/package.json @@ -41,6 +41,18 @@ "lib-rn", "src" ], + "peerDependencies": { + "react": "*", + "react-native": "*" + }, + "dependencies": { + "clamp": "^1.0.1", + "hoist-non-react-statics": "^1.2.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.5.10", + "react-native-drawer-layout-polyfill": "^1.3.1", + "react-native-tab-view": "^0.0.66" + }, "devDependencies": { "babel-cli": "^6.24.1", "babel-core": "^6.24.1", @@ -61,27 +73,15 @@ "eslint-plugin-jsx-a11y": "^5.0.1", "eslint-plugin-prettier": "^2.0.1", "eslint-plugin-react": "^7.0.1", - "flow-bin": "0.42.0", + "flow-bin": "^0.49.1", "jest": "^20.0.1", "prettier": "^1.3.1", "prettier-eslint": "^6.2.2", - "react": "16.0.0-alpha.6", - "react-native": "^0.44.0", + "react": "16.0.0-alpha.12", + "react-native": "^0.45.1", "react-native-vector-icons": "^4.1.1", "react-test-renderer": "^15.4.2" }, - "peerDependencies": { - "react": "*", - "react-native": "*" - }, - "dependencies": { - "clamp": "^1.0.1", - "hoist-non-react-statics": "^1.2.0", - "path-to-regexp": "^1.7.0", - "prop-types": "^15.5.10", - "react-native-drawer-layout-polyfill": "^1.3.1", - "react-native-tab-view": "^0.0.66" - }, "jest": { "notify": true, "preset": "react-native", diff --git a/packages/react-navigation/src/PlatformHelpers.js b/packages/react-navigation/src/PlatformHelpers.web.js similarity index 100% rename from packages/react-navigation/src/PlatformHelpers.js rename to packages/react-navigation/src/PlatformHelpers.web.js diff --git a/packages/react-navigation/src/TypeDefinition.js b/packages/react-navigation/src/TypeDefinition.js index 8c81a4c2..5759d40e 100644 --- a/packages/react-navigation/src/TypeDefinition.js +++ b/packages/react-navigation/src/TypeDefinition.js @@ -2,13 +2,29 @@ import React from 'react'; -// @todo when we split types into common, native and web, -// we can properly change Animated.Value to its real value -type AnimatedValue = *; +import { + Animated, + type ViewProps, + type TextProps, + type StyleDefinition, + type AnimatedViewStylePropTypes, +} from 'react-native'; + +export type ViewStyleProp = $PropertyType; +export type TextStyleProp = $PropertyType; +export type AnimatedViewStyleProp = $PropertyType< + $PropertyType, + 'style' +>; +export type AnimatedTextStyleProp = $PropertyType< + $PropertyType, + 'style' +>; export type HeaderMode = 'float' | 'screen' | 'none'; -export type HeaderProps = NavigationSceneRendererProps & { +export type HeaderProps = { + ...$Exact, mode: HeaderMode, router: NavigationRouter< NavigationState, @@ -18,7 +34,7 @@ export type HeaderProps = NavigationSceneRendererProps & { getScreenDetails: NavigationScene => NavigationScreenDetails< NavigationStackScreenOptions >, - style: Style, + style: ViewStyleProp, }; /** @@ -66,7 +82,8 @@ export type NavigationLeafRoute = { params?: NavigationParams, }; -export type NavigationStateRoute = NavigationLeafRoute & { +export type NavigationStateRoute = { + ...$Exact, index: number, routes: Array, }; @@ -122,14 +139,6 @@ export type NavigationScreenOption = config: T ) => T); -export type Style = - | { [key: string]: any } - | number - | false - | null - | void - | Array