From 813af145366990671f2bcfeff1acb339d59f1e42 Mon Sep 17 00:00:00 2001 From: Danny Cochran Date: Wed, 12 Jul 2017 12:29:24 -0700 Subject: [PATCH 1/4] update react-native so styles can be arrays 1) apply the ViewStyleProp to all components 2) abstract a TextStyle prop and use it wherever appropriate --- types/react-native/index.d.ts | 57 ++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index 1b78fb408c..c877409b82 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -890,7 +890,7 @@ export interface TextProperties extends TextPropertiesIOS, TextPropertiesAndroid /** * @see https://facebook.github.io/react-native/docs/text.html#style */ - style?: TextStyle | Array + style?: TextStyleProp; /** * Used to locate this view in end-to-end tests. @@ -1219,7 +1219,7 @@ export interface TextInputProperties extends ViewProperties, TextInputIOSPropert /** * Styles */ - style?: TextStyle | Array + style?: TextStyleProp; /** * Used to locate this view in end-to-end tests @@ -1658,6 +1658,7 @@ export interface ViewPropertiesAndroid { } export type ViewStyleProp = ViewStyle | Array; +export type TextStyleProp = TextStyle | Array; /** * @see https://facebook.github.io/react-native/docs/view.html#props @@ -1886,7 +1887,7 @@ export interface KeyboardAvoidingViewProps extends ViewProperties { /** * The style of the content container(View) when behavior is 'position'. */ - contentContainerStyle?: ViewStyle + contentContainerStyle?: ViewStyleProp; /** * This is the distance between the top of the user screen and the react native view, @@ -2108,7 +2109,7 @@ export interface WebViewProperties extends ViewProperties, WebViewPropertiesAndr */ startInLoadingState?: boolean - style?: ViewStyle + style?: ViewStyleProp; // Deprecated: Use the `source` prop instead. url?: string @@ -2255,7 +2256,7 @@ export interface NavigatorIOSProperties { * The default wrapper style for components in the navigator. * A common use case is to set the backgroundColor for every page */ - itemWrapperStyle?: ViewStyle + itemWrapperStyle?: ViewStyleProp /** * Boolean value that indicates whether the interactive pop gesture is @@ -2298,7 +2299,7 @@ export interface NavigatorIOSProperties { /** * NOT IN THE DOC BUT IN THE EXAMPLES */ - style?: ViewStyle + style?: ViewStyleProp } /** @@ -2388,7 +2389,7 @@ export interface ActivityIndicatorProperties extends ViewProperties { */ size?: number | 'small' | 'large' - style?: ViewStyle + style?: ViewStyleProp; } export interface ActivityIndicatorStatic extends NativeMethodsMixin, React.ClassicComponentClass { @@ -2428,7 +2429,7 @@ export interface ActivityIndicatorIOSProperties extends ViewProperties { */ size?: 'small' | 'large' - style?: ViewStyle + style?: ViewStyleProp; } /** @@ -2642,7 +2643,7 @@ export interface PickerPropertiesIOS extends ViewProperties { * Style to apply to each of the item labels. * @platform ios */ - itemStyle?: ViewStyle, + itemStyle?: ViewStyleProp, } export interface PickerPropertiesAndroid extends ViewProperties { @@ -2693,7 +2694,7 @@ export interface PickerProperties extends PickerPropertiesIOS, PickerPropertiesA */ selectedValue?: any - style?: ViewStyle + style?: ViewStyleProp; /** * Used to locate this view in end-to-end tests. @@ -2725,7 +2726,7 @@ export interface PickerStatic extends React.ComponentClass { */ export interface PickerIOSProperties extends ViewProperties { - itemStyle?: TextStyle + itemStyle?: TextStyleProp; onValueChange?: ( value: string | number ) => void selectedValue?: string | number } @@ -3025,7 +3026,7 @@ export interface SliderProperties extends SliderPropertiesIOS, SliderPropertiesA /** * Used to style and layout the Slider. See StyleSheet.js and ViewStylePropTypes.js for more info. */ - style?: ViewStyle + style?: ViewStyleProp; /** * Used to locate this view in UI automation tests. @@ -3472,7 +3473,7 @@ export interface FlatListProperties extends ScrollViewProperties { /** * Optional custom style for multi-item rows generated when numColumns > 1 */ - columnWrapperStyle?: ViewStyle + columnWrapperStyle?: ViewStyleProp; /** * When false tapping outside of the focused text input when the keyboard @@ -4082,7 +4083,7 @@ export interface MapViewProperties extends ViewProperties { * Used to style and layout the MapView. * See StyleSheet.js and ViewStylePropTypes.js for more info. */ - style?: ViewStyle + style?: ViewStyleProp; /** * If false the user won't be able to pinch/zoom the map. @@ -4653,7 +4654,7 @@ export interface NavigatorProperties { /** * Styles to apply to the container of each scene */ - sceneStyle?: ViewStyle + sceneStyle?: ViewStyleProp; } @@ -4850,7 +4851,7 @@ export namespace NavigatorStatic { routeMapper?: NavigationBarRouteMapper navState?: NavState navigationStyles?: NavigationBarStyle - style?: ViewStyle + style?: ViewStyleProp; } export interface NavigationBarStatic extends React.ComponentClass { @@ -4888,7 +4889,7 @@ export namespace NavigatorStatic { navigator?: Navigator routeMapper?: BreadcrumbNavigationBarRouteMapper navState?: NavState - style?: ViewStyle + style?: ViewStyleProp; } export interface BreadcrumbNavigationBarStatic extends React.ComponentClass { @@ -5240,7 +5241,7 @@ export interface TabBarItemProperties extends ViewProperties { /** * React style object. */ - style?: ViewStyle + style?: ViewStyleProp; /** * Items comes with a few predefined system icons. @@ -5965,7 +5966,7 @@ export interface ScrollViewProperties extends ViewProperties, ScrollViewProperti * } * }); */ - contentContainerStyle?: ViewStyle + contentContainerStyle?: ViewStyleProp; /** * When true the scroll view's children are arranged horizontally in a row @@ -7657,7 +7658,7 @@ export interface SwitchProperties extends SwitchPropertiesIOS { * Default value is false. */ value?: boolean - style?: ViewStyle + style?: ViewStyleProp; } /** @@ -8230,7 +8231,7 @@ export interface NavigationHeaderProps extends NavigationSceneRendererProps { renderLeftComponent?: SubViewRenderer, renderRightComponent?: SubViewRenderer, renderTitleComponent?: SubViewRenderer, - style?: ViewStyle, + style?: ViewStyleProp, viewProps?: any, statusBarHeight?: number | NavigationAnimatedValue } @@ -8242,8 +8243,8 @@ export interface NavigationHeaderStatic extends React.ComponentClass ViewStyle; + cardStyleInterpolator?: (props: NavigationSceneRendererProps) => ViewStyleProp; /** * Direction of the cards movement. Value could be `horizontal` or * `vertical`. Default value is `horizontal`. @@ -8305,7 +8306,7 @@ export interface NavigationCardStackProps { /** * Custom style applied to the cards stack. */ - style?: ViewStyle, + style?: ViewStyleProp, } // Object Instances @@ -8375,7 +8376,7 @@ export interface NavigationCardProps extends React.ComponentClass { @@ -8561,7 +8562,7 @@ export interface ARTShapeProps { } export interface ARTSurfaceProps { - style: ViewStyle, + style: ViewStyleProp, width: number, height: number } From 98fcea0318f7f141e1c6fbf2fe57794e926d6c60 Mon Sep 17 00:00:00 2001 From: Danny Cochran Date: Wed, 12 Jul 2017 13:52:55 -0700 Subject: [PATCH 2/4] use generic StyleProp --- types/react-native/index.d.ts | 72 ++++++++++++++++++----------------- 1 file changed, 38 insertions(+), 34 deletions(-) diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index c877409b82..162ae6525b 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -1,3 +1,8 @@ +/** + * TODO: Remove this once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/17990/commits + * is merged into react-native types. + */ + // Type definitions for react-native 0.46 // Project: https://github.com/facebook/react-native // Definitions by: Eloy Durán @@ -890,7 +895,7 @@ export interface TextProperties extends TextPropertiesIOS, TextPropertiesAndroid /** * @see https://facebook.github.io/react-native/docs/text.html#style */ - style?: TextStyleProp; + style?: StyleProp; /** * Used to locate this view in end-to-end tests. @@ -1219,7 +1224,7 @@ export interface TextInputProperties extends ViewProperties, TextInputIOSPropert /** * Styles */ - style?: TextStyleProp; + style?: StyleProp; /** * Used to locate this view in end-to-end tests @@ -1657,8 +1662,7 @@ export interface ViewPropertiesAndroid { } -export type ViewStyleProp = ViewStyle | Array; -export type TextStyleProp = TextStyle | Array; +export type StyleProp = T | Array; /** * @see https://facebook.github.io/react-native/docs/view.html#props @@ -1739,7 +1743,7 @@ export interface ViewProperties extends ViewPropertiesAndroid, ViewPropertiesIOS */ removeClippedSubviews?: boolean - style?: ViewStyleProp; + style?: StyleProp; /** * Used to locate this view in end-to-end tests. @@ -1887,7 +1891,7 @@ export interface KeyboardAvoidingViewProps extends ViewProperties { /** * The style of the content container(View) when behavior is 'position'. */ - contentContainerStyle?: ViewStyleProp; + contentContainerStyle?: StyleProp; /** * This is the distance between the top of the user screen and the react native view, @@ -2109,7 +2113,7 @@ export interface WebViewProperties extends ViewProperties, WebViewPropertiesAndr */ startInLoadingState?: boolean - style?: ViewStyleProp; + style?: StyleProp; // Deprecated: Use the `source` prop instead. url?: string @@ -2256,7 +2260,7 @@ export interface NavigatorIOSProperties { * The default wrapper style for components in the navigator. * A common use case is to set the backgroundColor for every page */ - itemWrapperStyle?: ViewStyleProp + itemWrapperStyle?: StyleProp /** * Boolean value that indicates whether the interactive pop gesture is @@ -2299,7 +2303,7 @@ export interface NavigatorIOSProperties { /** * NOT IN THE DOC BUT IN THE EXAMPLES */ - style?: ViewStyleProp + style?: StyleProp } /** @@ -2389,7 +2393,7 @@ export interface ActivityIndicatorProperties extends ViewProperties { */ size?: number | 'small' | 'large' - style?: ViewStyleProp; + style?: StyleProp; } export interface ActivityIndicatorStatic extends NativeMethodsMixin, React.ClassicComponentClass { @@ -2429,7 +2433,7 @@ export interface ActivityIndicatorIOSProperties extends ViewProperties { */ size?: 'small' | 'large' - style?: ViewStyleProp; + style?: StyleProp; } /** @@ -2643,7 +2647,7 @@ export interface PickerPropertiesIOS extends ViewProperties { * Style to apply to each of the item labels. * @platform ios */ - itemStyle?: ViewStyleProp, + itemStyle?: StyleProp, } export interface PickerPropertiesAndroid extends ViewProperties { @@ -2694,7 +2698,7 @@ export interface PickerProperties extends PickerPropertiesIOS, PickerPropertiesA */ selectedValue?: any - style?: ViewStyleProp; + style?: StyleProp; /** * Used to locate this view in end-to-end tests. @@ -2726,7 +2730,7 @@ export interface PickerStatic extends React.ComponentClass { */ export interface PickerIOSProperties extends ViewProperties { - itemStyle?: TextStyleProp; + itemStyle?: StyleProp; onValueChange?: ( value: string | number ) => void selectedValue?: string | number } @@ -3026,7 +3030,7 @@ export interface SliderProperties extends SliderPropertiesIOS, SliderPropertiesA /** * Used to style and layout the Slider. See StyleSheet.js and ViewStylePropTypes.js for more info. */ - style?: ViewStyleProp; + style?: StyleProp; /** * Used to locate this view in UI automation tests. @@ -3391,7 +3395,7 @@ export interface ImageProperties extends ImagePropertiesIOS, ImagePropertiesAndr * * Style */ - style?: ImageStyle | Array; + style?: StyleProp; /** * A unique identifier for this element to be used in UI Automation testing scripts. @@ -3473,7 +3477,7 @@ export interface FlatListProperties extends ScrollViewProperties { /** * Optional custom style for multi-item rows generated when numColumns > 1 */ - columnWrapperStyle?: ViewStyleProp; + columnWrapperStyle?: StyleProp; /** * When false tapping outside of the focused text input when the keyboard @@ -4083,7 +4087,7 @@ export interface MapViewProperties extends ViewProperties { * Used to style and layout the MapView. * See StyleSheet.js and ViewStylePropTypes.js for more info. */ - style?: ViewStyleProp; + style?: StyleProp; /** * If false the user won't be able to pinch/zoom the map. @@ -4318,7 +4322,7 @@ export interface TouchableWithoutFeedbackProperties extends TouchableWithoutFeed /** * //FIXME: not in doc but available in examples */ - style?: ViewStyleProp + style?: StyleProp /** * When the scroll view is disabled, this defines how far your @@ -4376,7 +4380,7 @@ export interface TouchableHighlightProperties extends TouchableWithoutFeedbackPr /** * @see https://facebook.github.io/react-native/docs/view.html#style */ - style?: ViewStyleProp + style?: StyleProp /** * The color of the underlay that will show through when the touch is active. @@ -4654,7 +4658,7 @@ export interface NavigatorProperties { /** * Styles to apply to the container of each scene */ - sceneStyle?: ViewStyleProp; + sceneStyle?: StyleProp; } @@ -4851,7 +4855,7 @@ export namespace NavigatorStatic { routeMapper?: NavigationBarRouteMapper navState?: NavState navigationStyles?: NavigationBarStyle - style?: ViewStyleProp; + style?: StyleProp; } export interface NavigationBarStatic extends React.ComponentClass { @@ -4889,7 +4893,7 @@ export namespace NavigatorStatic { navigator?: Navigator routeMapper?: BreadcrumbNavigationBarRouteMapper navState?: NavState - style?: ViewStyleProp; + style?: StyleProp; } export interface BreadcrumbNavigationBarStatic extends React.ComponentClass { @@ -5241,7 +5245,7 @@ export interface TabBarItemProperties extends ViewProperties { /** * React style object. */ - style?: ViewStyleProp; + style?: StyleProp; /** * Items comes with a few predefined system icons. @@ -5966,7 +5970,7 @@ export interface ScrollViewProperties extends ViewProperties, ScrollViewProperti * } * }); */ - contentContainerStyle?: ViewStyleProp; + contentContainerStyle?: StyleProp; /** * When true the scroll view's children are arranged horizontally in a row @@ -7658,7 +7662,7 @@ export interface SwitchProperties extends SwitchPropertiesIOS { * Default value is false. */ value?: boolean - style?: ViewStyleProp; + style?: StyleProp; } /** @@ -8231,7 +8235,7 @@ export interface NavigationHeaderProps extends NavigationSceneRendererProps { renderLeftComponent?: SubViewRenderer, renderRightComponent?: SubViewRenderer, renderTitleComponent?: SubViewRenderer, - style?: ViewStyleProp, + style?: StyleProp, viewProps?: any, statusBarHeight?: number | NavigationAnimatedValue } @@ -8243,8 +8247,8 @@ export interface NavigationHeaderStatic extends React.ComponentClass, + textStyle?: StyleProp, viewProps?: any } @@ -8255,11 +8259,11 @@ export interface NavigationCardStackProps { /** * Custom style applied to the card. */ - cardStyle?: ViewStyleProp; + cardStyle?: StyleProp; /** * Custom style interpolator for the card. */ - cardStyleInterpolator?: (props: NavigationSceneRendererProps) => ViewStyleProp; + cardStyleInterpolator?: (props: NavigationSceneRendererProps) => StyleProp; /** * Direction of the cards movement. Value could be `horizontal` or * `vertical`. Default value is `horizontal`. @@ -8306,7 +8310,7 @@ export interface NavigationCardStackProps { /** * Custom style applied to the cards stack. */ - style?: ViewStyleProp, + style?: StyleProp, } // Object Instances @@ -8376,7 +8380,7 @@ export interface NavigationCardProps extends React.ComponentClass, } export interface NavigationCardStackStatic extends React.ComponentClass { @@ -8562,7 +8566,7 @@ export interface ARTShapeProps { } export interface ARTSurfaceProps { - style: ViewStyleProp, + style: StyleProp, width: number, height: number } From 9d0bd651c0f0433b1ab145b649f22e56e6a153f0 Mon Sep 17 00:00:00 2001 From: Danny Cochran Date: Wed, 12 Jul 2017 13:53:56 -0700 Subject: [PATCH 3/4] remove comment from local branch --- types/react-native/index.d.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index 162ae6525b..ea788d6775 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -1,8 +1,3 @@ -/** - * TODO: Remove this once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/17990/commits - * is merged into react-native types. - */ - // Type definitions for react-native 0.46 // Project: https://github.com/facebook/react-native // Definitions by: Eloy Durán From 9fd8521de121632e23f8b790ff6c204845a727ce Mon Sep 17 00:00:00 2001 From: Danny Cochran Date: Thu, 13 Jul 2017 10:54:39 -0700 Subject: [PATCH 4/4] remove semi-colons --- types/react-native/index.d.ts | 42 +++++++++++++++++------------------ 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index ea788d6775..df5fe7b50f 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -890,7 +890,7 @@ export interface TextProperties extends TextPropertiesIOS, TextPropertiesAndroid /** * @see https://facebook.github.io/react-native/docs/text.html#style */ - style?: StyleProp; + style?: StyleProp /** * Used to locate this view in end-to-end tests. @@ -1219,7 +1219,7 @@ export interface TextInputProperties extends ViewProperties, TextInputIOSPropert /** * Styles */ - style?: StyleProp; + style?: StyleProp /** * Used to locate this view in end-to-end tests @@ -1657,7 +1657,7 @@ export interface ViewPropertiesAndroid { } -export type StyleProp = T | Array; +export type StyleProp = T | Array /** * @see https://facebook.github.io/react-native/docs/view.html#props @@ -1738,7 +1738,7 @@ export interface ViewProperties extends ViewPropertiesAndroid, ViewPropertiesIOS */ removeClippedSubviews?: boolean - style?: StyleProp; + style?: StyleProp /** * Used to locate this view in end-to-end tests. @@ -1886,7 +1886,7 @@ export interface KeyboardAvoidingViewProps extends ViewProperties { /** * The style of the content container(View) when behavior is 'position'. */ - contentContainerStyle?: StyleProp; + contentContainerStyle?: StyleProp /** * This is the distance between the top of the user screen and the react native view, @@ -2108,7 +2108,7 @@ export interface WebViewProperties extends ViewProperties, WebViewPropertiesAndr */ startInLoadingState?: boolean - style?: StyleProp; + style?: StyleProp // Deprecated: Use the `source` prop instead. url?: string @@ -2388,7 +2388,7 @@ export interface ActivityIndicatorProperties extends ViewProperties { */ size?: number | 'small' | 'large' - style?: StyleProp; + style?: StyleProp } export interface ActivityIndicatorStatic extends NativeMethodsMixin, React.ClassicComponentClass { @@ -2428,7 +2428,7 @@ export interface ActivityIndicatorIOSProperties extends ViewProperties { */ size?: 'small' | 'large' - style?: StyleProp; + style?: StyleProp } /** @@ -2693,7 +2693,7 @@ export interface PickerProperties extends PickerPropertiesIOS, PickerPropertiesA */ selectedValue?: any - style?: StyleProp; + style?: StyleProp /** * Used to locate this view in end-to-end tests. @@ -2725,7 +2725,7 @@ export interface PickerStatic extends React.ComponentClass { */ export interface PickerIOSProperties extends ViewProperties { - itemStyle?: StyleProp; + itemStyle?: StyleProp onValueChange?: ( value: string | number ) => void selectedValue?: string | number } @@ -3025,7 +3025,7 @@ export interface SliderProperties extends SliderPropertiesIOS, SliderPropertiesA /** * Used to style and layout the Slider. See StyleSheet.js and ViewStylePropTypes.js for more info. */ - style?: StyleProp; + style?: StyleProp /** * Used to locate this view in UI automation tests. @@ -3472,7 +3472,7 @@ export interface FlatListProperties extends ScrollViewProperties { /** * Optional custom style for multi-item rows generated when numColumns > 1 */ - columnWrapperStyle?: StyleProp; + columnWrapperStyle?: StyleProp /** * When false tapping outside of the focused text input when the keyboard @@ -4082,7 +4082,7 @@ export interface MapViewProperties extends ViewProperties { * Used to style and layout the MapView. * See StyleSheet.js and ViewStylePropTypes.js for more info. */ - style?: StyleProp; + style?: StyleProp /** * If false the user won't be able to pinch/zoom the map. @@ -4653,7 +4653,7 @@ export interface NavigatorProperties { /** * Styles to apply to the container of each scene */ - sceneStyle?: StyleProp; + sceneStyle?: StyleProp } @@ -4850,7 +4850,7 @@ export namespace NavigatorStatic { routeMapper?: NavigationBarRouteMapper navState?: NavState navigationStyles?: NavigationBarStyle - style?: StyleProp; + style?: StyleProp } export interface NavigationBarStatic extends React.ComponentClass { @@ -4888,7 +4888,7 @@ export namespace NavigatorStatic { navigator?: Navigator routeMapper?: BreadcrumbNavigationBarRouteMapper navState?: NavState - style?: StyleProp; + style?: StyleProp } export interface BreadcrumbNavigationBarStatic extends React.ComponentClass { @@ -5240,7 +5240,7 @@ export interface TabBarItemProperties extends ViewProperties { /** * React style object. */ - style?: StyleProp; + style?: StyleProp /** * Items comes with a few predefined system icons. @@ -5965,7 +5965,7 @@ export interface ScrollViewProperties extends ViewProperties, ScrollViewProperti * } * }); */ - contentContainerStyle?: StyleProp; + contentContainerStyle?: StyleProp /** * When true the scroll view's children are arranged horizontally in a row @@ -7657,7 +7657,7 @@ export interface SwitchProperties extends SwitchPropertiesIOS { * Default value is false. */ value?: boolean - style?: StyleProp; + style?: StyleProp } /** @@ -8254,11 +8254,11 @@ export interface NavigationCardStackProps { /** * Custom style applied to the card. */ - cardStyle?: StyleProp; + cardStyle?: StyleProp /** * Custom style interpolator for the card. */ - cardStyleInterpolator?: (props: NavigationSceneRendererProps) => StyleProp; + cardStyleInterpolator?: (props: NavigationSceneRendererProps) => StyleProp /** * Direction of the cards movement. Value could be `horizontal` or * `vertical`. Default value is `horizontal`.