Typing View style as ViewStyleProp

Summary: Locking down view style so that invalid styles can't be passed into View.

Reviewed By: yungsters

Differential Revision: D9309097

fbshipit-source-id: 69e7e3c5626609cfd47c167027a55470c42228c8

Author: elicwhite

IntegrationTests/LayoutEventsTest.js

@@ -16,30 +16,24 @@ const ReactNative = require('react-native');
 const {Image, LayoutAnimation, StyleSheet, Text, View} = ReactNative;
 const {TestModule} = ReactNative.NativeModules;
 
+import type {ViewStyleProp} from 'StyleSheet';
+
 const deepDiffer = require('deepDiffer');
 
 function debug(...args) {
   // console.log.apply(null, arguments);
 }
 
 import type {Layout, LayoutEvent} from 'CoreEventTypes';
-type Style = {
-  margin?: number,
-  padding?: number,
-  borderColor?: string,
-  borderWidth?: number,
-  backgroundColor?: string,
-  width?: number,
-};
 
 type State = {
   didAnimation: boolean,
   extraText?: string,
   imageLayout?: Layout,
   textLayout?: Layout,
   viewLayout?: Layout,
-  viewStyle?: Style,
-  containerStyle?: Style,
+  viewStyle?: ViewStyleProp,
+  containerStyle?: ViewStyleProp,
 };
 
 const LayoutEventsTest = createReactClass({

Libraries/Components/ScrollView/ScrollView.js

@@ -483,7 +483,6 @@ export type Props = $ReadOnly<{|
    * See [RefreshControl](docs/refreshcontrol.html).
    */
   refreshControl?: ?React.Element<any>,
-  style?: ?ViewStyleProp,
   children?: React.Node,
 |}>;
 

Libraries/Components/TextInput/TextInput.js

@@ -33,7 +33,7 @@ const requireNativeComponent = require('requireNativeComponent');
 const warning = require('fbjs/lib/warning');
 
 import type {ColorValue} from 'StyleSheetTypes';
-import type {TextStyleProp} from 'StyleSheet';
+import type {TextStyleProp, ViewStyleProp} from 'StyleSheet';
 import type {ViewProps} from 'ViewPropTypes';
 
 let AndroidTextInput;
@@ -169,7 +169,7 @@ type AndroidProps = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{|
-  ...ViewProps,
+  ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
   ...IOSProps,
   ...AndroidProps,
   autoCapitalize?: ?AutoCapitalize,

Libraries/Components/View/ViewPropTypes.js

@@ -33,6 +33,7 @@ import type {
 import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
 import type {TVViewProps} from 'TVViewPropTypes';
 import type {Layout, LayoutEvent} from 'CoreEventTypes';
+import type {ViewStyleProp} from 'StyleSheet';
 
 const stylePropType = StyleSheetPropType(ViewStylePropTypes);
 
@@ -103,7 +104,7 @@ export type ViewProps = $ReadOnly<{|
   nativeID?: string,
   hitSlop?: ?EdgeInsetsProp,
   pointerEvents?: null | 'box-none' | 'none' | 'box-only' | 'auto',
-  style?: stylePropType,
+  style?: ?ViewStyleProp,
   removeClippedSubviews?: boolean,
   renderToHardwareTextureAndroid?: boolean,
   shouldRasterizeIOS?: boolean,

Libraries/Experimental/IncrementalPresenter.js

@@ -18,6 +18,7 @@ const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 
 import type {Context} from 'Incremental';
+import type {ViewStyleProp} from 'StyleSheet';
 
 /**
  * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
@@ -36,7 +37,7 @@ type Props = {
   disabled?: boolean,
   onDone?: () => void,
   onLayout?: (event: Object) => void,
-  style?: mixed,
+  style?: ViewStyleProp,
   children?: any,
 };
 class IncrementalPresenter extends React.Component<Props> {

Libraries/Image/Image.ios.js

@@ -23,6 +23,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
 
 const RCTImageView = requireNativeComponent('RCTImageView');
 
+import type {ImageStyleProp} from 'StyleSheet';
 import type {ImageProps as ImagePropsType} from 'ImageProps';
 
 function getSize(
@@ -71,12 +72,14 @@ let Image = (
   };
 
   let sources;
-  let style;
+  let style: ImageStyleProp;
   if (Array.isArray(source)) {
+    // $FlowFixMe flattenStyle is not strong enough
     style = flattenStyle([styles.base, props.style]) || {};
     sources = source;
   } else {
     const {width, height, uri} = source;
+    // $FlowFixMe flattenStyle is not strong enough
     style = flattenStyle([{width, height}, styles.base, props.style]) || {};
     sources = [source];
 

Libraries/Image/ImageEditor.js

@@ -16,25 +16,25 @@ type ImageCropData = {
    * The top-left corner of the cropped image, specified in the original
    * image's coordinate space.
    */
-  offset: {
+  offset: {|
     x: number,
     y: number,
-  },
+  |},
   /**
    * The size (dimensions) of the cropped image, specified in the original
    * image's coordinate space.
    */
-  size: {
+  size: {|
     width: number,
     height: number,
-  },
+  |},
   /**
    * (Optional) size to scale the cropped image to.
    */
-  displaySize?: ?{
+  displaySize?: ?{|
     width: number,
     height: number,
-  },
+  |},
   /**
    * (Optional) the resizing mode to use when scaling the image. If the
    * `displaySize` param is not specified, this has no effect.

Libraries/Image/ImageProps.js

@@ -21,7 +21,7 @@ import type {ViewProps} from 'ViewPropTypes';
 import type {ImageSource} from 'ImageSource';
 import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
 import type {SyntheticEvent} from 'CoreEventTypes';
-import type {ImageStyleProp} from 'StyleSheet';
+import type {ViewStyleProp, ImageStyleProp} from 'StyleSheet';
 
 type OnLoadEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -51,7 +51,7 @@ type AndroidImageProps = $ReadOnly<{|
 |}>;
 
 export type ImageProps = {|
-  ...ViewProps,
+  ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
   ...IOSImageProps,
   ...AndroidImageProps,
   blurRadius?: number,

Libraries/Lists/FlatList.js

@@ -18,7 +18,7 @@ const StyleSheet = require('StyleSheet');
 
 const invariant = require('fbjs/lib/invariant');
 
-import type {DangerouslyImpreciseStyleProp, ViewStyleProp} from 'StyleSheet';
+import type {ViewStyleProp} from 'StyleSheet';
 import type {
   ViewabilityConfig,
   ViewToken,
@@ -104,7 +104,7 @@ type OptionalProps<ItemT> = {
   /**
    * Optional custom style for multi-item rows generated when numColumns > 1.
    */
-  columnWrapperStyle?: DangerouslyImpreciseStyleProp,
+  columnWrapperStyle?: ViewStyleProp,
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the

Libraries/Lists/VirtualizedList.js

@@ -31,7 +31,7 @@ const warning = require('fbjs/lib/warning');
 
 const {computeWindowedRenderLimits} = require('VirtualizeUtils');
 
-import type {DangerouslyImpreciseStyleProp, ViewStyleProp} from 'StyleSheet';
+import type {ViewStyleProp} from 'StyleSheet';
 import type {
   ViewabilityConfig,
   ViewToken,
@@ -661,7 +661,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     stickyIndicesFromProps: Set<number>,
     first: number,
     last: number,
-    inversionStyle: ?DangerouslyImpreciseStyleProp,
+    inversionStyle: ViewStyleProp,
   ) {
     const {
       CellRendererComponent,
@@ -1619,7 +1619,7 @@ class CellRenderer extends React.Component<
     fillRateHelper: FillRateHelper,
     horizontal: ?boolean,
     index: number,
-    inversionStyle: ?DangerouslyImpreciseStyleProp,
+    inversionStyle: ViewStyleProp,
     item: Item,
     onLayout: (event: Object) => void, // This is extracted by ScrollViewStickyHeader
     onUnmount: (cellKey: string) => void,