Move ImageSourcePropType.js, ImageStylePropTypes.js, TextPropTypes.js (#21387)

Summary:
related #21342

TODO
* move ImageSourcePropType.js, ImageStylePropTypes.js, TextPropTypes.js
* fix flow error

CheckList
 - [x] `yarn prettier`
 - [x] `yarn flow-check-android`
 - [x] `yarn flow-check-ios`

All flow checks pass.

[GENERAL] [ENHANCEMENT] [DeprecatedImageSourcePropType.js] - Created.
[GENERAL] [ENHANCEMENT] [DeprecatedImageStylePropTypes.js] - Created.
[GENERAL] [ENHANCEMENT] [DeprecatedTextPropTypes.js] - Created.
Pull Request resolved: https://github.com/facebook/react-native/pull/21387

Reviewed By: TheSavior

Differential Revision: D10099753

Pulled By: RSNara

fbshipit-source-id: c907af6d1549ee42de1a2e17f278998e8422110f

Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const ImageStylePropTypes = require('ImageStylePropTypes');
+const DeprecatedImageStylePropTypes = require('DeprecatedImageStylePropTypes');
 const TextStylePropTypes = require('TextStylePropTypes');
 const ViewStylePropTypes = require('ViewStylePropTypes');
 
@@ -23,7 +23,7 @@ const ReactNativeStyleAttributes = {};
 for (const attributeName of Object.keys({
   ...ViewStylePropTypes,
   ...TextStylePropTypes,
-  ...ImageStylePropTypes,
+  ...DeprecatedImageStylePropTypes,
 })) {
   ReactNativeStyleAttributes[attributeName] = true;
 }

Libraries/DeprecatedPropTypes/DeprecatedImageSourcePropType.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @no-flow
+ * @format
+ */
+'use strict';
+
+const PropTypes = require('prop-types');
+
+const ImageURISourcePropType = PropTypes.shape({
+  uri: PropTypes.string,
+  bundle: PropTypes.string,
+  method: PropTypes.string,
+  headers: PropTypes.objectOf(PropTypes.string),
+  body: PropTypes.string,
+  cache: PropTypes.oneOf([
+    'default',
+    'reload',
+    'force-cache',
+    'only-if-cached',
+  ]),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  scale: PropTypes.number,
+});
+
+const ImageSourcePropType = PropTypes.oneOfType([
+  ImageURISourcePropType,
+  // Opaque type returned by require('./image.jpg')
+  PropTypes.number,
+  // Multiple sources
+  PropTypes.arrayOf(ImageURISourcePropType),
+]);
+
+module.exports = ImageSourcePropType;

Libraries/DeprecatedPropTypes/DeprecatedImageStylePropTypes.js

@@ -10,10 +10,10 @@
 'use strict';
 
 const DeprecatedColorPropType = require('DeprecatedColorPropType');
-const LayoutPropTypes = require('LayoutPropTypes');
-const ReactPropTypes = require('prop-types');
 const DeprecatedShadowPropTypesIOS = require('DeprecatedShadowPropTypesIOS');
 const DeprecatedTransformPropTypes = require('DeprecatedTransformPropTypes');
+const LayoutPropTypes = require('LayoutPropTypes');
+const ReactPropTypes = require('prop-types');
 
 const ImageStylePropTypes = {
   ...LayoutPropTypes,

Libraries/DeprecatedPropTypes/DeprecatedTextPropTypes.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
+const DeprecatedEdgeInsetsPropType = require('DeprecatedEdgeInsetsPropType');
+const PropTypes = require('prop-types');
+const StyleSheetPropType = require('DeprecatedStyleSheetPropType');
+const TextStylePropTypes = require('TextStylePropTypes');
+
+const stylePropType = StyleSheetPropType(TextStylePropTypes);
+
+module.exports = {
+  ellipsizeMode: PropTypes.oneOf(['head', 'middle', 'tail', 'clip']),
+  numberOfLines: PropTypes.number,
+  textBreakStrategy: PropTypes.oneOf(['simple', 'highQuality', 'balanced']),
+  onLayout: PropTypes.func,
+  onPress: PropTypes.func,
+  onLongPress: PropTypes.func,
+  pressRetentionOffset: DeprecatedEdgeInsetsPropType,
+  selectable: PropTypes.bool,
+  selectionColor: DeprecatedColorPropType,
+  suppressHighlighting: PropTypes.bool,
+  style: stylePropType,
+  testID: PropTypes.string,
+  nativeID: PropTypes.string,
+  allowFontScaling: PropTypes.bool,
+  maxFontSizeMultiplier: PropTypes.number,
+  accessible: PropTypes.bool,
+  adjustsFontSizeToFit: PropTypes.bool,
+  minimumFontScale: PropTypes.number,
+  disabled: PropTypes.bool,
+};

Libraries/Image/Image.android.js

@@ -10,15 +10,15 @@
 
 'use strict';
 
+const DeprecatedImageStylePropTypes = require('DeprecatedImageStylePropTypes');
+const DeprecatedStyleSheetPropType = require('DeprecatedStyleSheetPropType');
 const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
-const ImageStylePropTypes = require('ImageStylePropTypes');
+const ImageViewNativeComponent = require('ImageViewNativeComponent');
 const NativeModules = require('NativeModules');
 const PropTypes = require('prop-types');
 const React = require('React');
 const ReactNative = require('ReactNative');
 const StyleSheet = require('StyleSheet');
-const DeprecatedStyleSheetPropType = require('DeprecatedStyleSheetPropType');
-const ImageViewNativeComponent = require('ImageViewNativeComponent');
 const TextAncestor = require('TextAncestor');
 
 const flattenStyle = require('flattenStyle');
@@ -38,7 +38,7 @@ function generateRequestId() {
 
 const ImageProps = {
   ...DeprecatedViewPropTypes,
-  style: DeprecatedStyleSheetPropType(ImageStylePropTypes),
+  style: DeprecatedStyleSheetPropType(DeprecatedImageStylePropTypes),
   /**
    * See https://facebook.github.io/react-native/docs/image.html#source
    */

Libraries/Image/ImageProps.js

@@ -11,17 +11,17 @@
 'use strict';
 
 const DeprecatedEdgeInsetsPropType = require('DeprecatedEdgeInsetsPropType');
-const ImageSourcePropType = require('ImageSourcePropType');
-const ImageStylePropTypes = require('ImageStylePropTypes');
-const PropTypes = require('prop-types');
+const DeprecatedImageSourcePropType = require('DeprecatedImageSourcePropType');
+const DeprecatedImageStylePropTypes = require('DeprecatedImageStylePropTypes');
 const DeprecatedStyleSheetPropType = require('DeprecatedStyleSheetPropType');
+const PropTypes = require('prop-types');
 
+import type {SyntheticEvent} from 'CoreEventTypes';
+import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
+import type {ImageSource} from 'ImageSource';
+import type {ViewStyleProp, ImageStyleProp} from 'StyleSheet';
 import type {DimensionValue} from 'StyleSheetTypes';
 import type {ViewProps} from 'ViewPropTypes';
-import type {ImageSource} from 'ImageSource';
-import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
-import type {SyntheticEvent} from 'CoreEventTypes';
-import type {ViewStyleProp, ImageStyleProp} from 'StyleSheet';
 
 type OnLoadEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -78,13 +78,13 @@ module.exports = {
   /**
    * See https://facebook.github.io/react-native/docs/image.html#style
    */
-  style: DeprecatedStyleSheetPropType(ImageStylePropTypes),
+  style: DeprecatedStyleSheetPropType(DeprecatedImageStylePropTypes),
   /**
    * The image source (either a remote URL or a local file resource).
    *
    * See https://facebook.github.io/react-native/docs/image.html#source
    */
-  source: ImageSourcePropType,
+  source: DeprecatedImageSourcePropType,
   /**
    * A static image to display while loading the image source.
    *

Libraries/Image/ImageSource.js

@@ -15,14 +15,72 @@
 // instances of classes like FBIcon.
 // https://fburl.com/8lynhvtw
 export type ImageURISource = $ReadOnly<{
+  /**
+   * `uri` is a string representing the resource identifier for the image, which
+   * could be an http address, a local file path, or the name of a static image
+   * resource (which should be wrapped in the `require('./path/to/image.png')`
+   * function).
+   */
   uri?: ?string,
+
+  /**
+   * `bundle` is the iOS asset bundle which the image is included in. This
+   * will default to [NSBundle mainBundle] if not set.
+   * @platform ios
+   */
   bundle?: ?string,
+
+  /**
+   * `method` is the HTTP Method to use. Defaults to GET if not specified.
+   */
   method?: ?string,
+
+  /**
+   * `headers` is an object representing the HTTP headers to send along with the
+   * request for a remote image.
+   */
   headers?: ?Object,
+
+  /**
+   * `body` is the HTTP body to send with the request. This must be a valid
+   * UTF-8 string, and will be sent exactly as specified, with no
+   * additional encoding (e.g. URL-escaping or base64) applied.
+   */
   body?: ?string,
+
+  /**
+   * `cache` determines how the requests handles potentially cached
+   * responses.
+   *
+   * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS.
+   *
+   * - `reload`: The data for the URL will be loaded from the originating source.
+   * No existing cache data should be used to satisfy a URL load request.
+   *
+   * - `force-cache`: The existing cached data will be used to satisfy the request,
+   * regardless of its age or expiration date. If there is no existing data in the cache
+   * corresponding the request, the data is loaded from the originating source.
+   *
+   * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of
+   * its age or expiration date. If there is no existing data in the cache corresponding
+   * to a URL load request, no attempt is made to load the data from the originating source,
+   * and the load is considered to have failed.
+   *
+   * @platform ios
+   */
   cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'),
+
+  /**
+   * `width` and `height` can be specified if known at build time, in which case
+   * these will be used to set the default `<Image/>` component dimensions.
+   */
   width?: ?number,
   height?: ?number,
+
+  /**
+   * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if
+   * unspecified, meaning that one image pixel equates to one display point / DIP.
+   */
   scale?: ?number,
 }>;
 

Libraries/Image/ImageSourcePropType.js

@@ -1,90 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @no-flow
- * @format
- */
-'use strict';
-
-const PropTypes = require('prop-types');
-
-const ImageURISourcePropType = PropTypes.shape({
-  /**
-   * `uri` is a string representing the resource identifier for the image, which
-   * could be an http address, a local file path, or the name of a static image
-   * resource (which should be wrapped in the `require('./path/to/image.png')`
-   * function).
-   */
-  uri: PropTypes.string,
-  /**
-   * `bundle` is the iOS asset bundle which the image is included in. This
-   * will default to [NSBundle mainBundle] if not set.
-   * @platform ios
-   */
-  bundle: PropTypes.string,
-  /**
-   * `method` is the HTTP Method to use. Defaults to GET if not specified.
-   */
-  method: PropTypes.string,
-  /**
-   * `headers` is an object representing the HTTP headers to send along with the
-   * request for a remote image.
-   */
-  headers: PropTypes.objectOf(PropTypes.string),
-  /**
-   * `body` is the HTTP body to send with the request. This must be a valid
-   * UTF-8 string, and will be sent exactly as specified, with no
-   * additional encoding (e.g. URL-escaping or base64) applied.
-   */
-  body: PropTypes.string,
-  /**
-   * `cache` determines how the requests handles potentially cached
-   * responses.
-   *
-   * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS.
-   *
-   * - `reload`: The data for the URL will be loaded from the originating source.
-   * No existing cache data should be used to satisfy a URL load request.
-   *
-   * - `force-cache`: The existing cached data will be used to satisfy the request,
-   * regardless of its age or expiration date. If there is no existing data in the cache
-   * corresponding the request, the data is loaded from the originating source.
-   *
-   * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of
-   * its age or expiration date. If there is no existing data in the cache corresponding
-   * to a URL load request, no attempt is made to load the data from the originating source,
-   * and the load is considered to have failed.
-   *
-   * @platform ios
-   */
-  cache: PropTypes.oneOf([
-    'default',
-    'reload',
-    'force-cache',
-    'only-if-cached',
-  ]),
-  /**
-   * `width` and `height` can be specified if known at build time, in which case
-   * these will be used to set the default `<Image/>` component dimensions.
-   */
-  width: PropTypes.number,
-  height: PropTypes.number,
-  /**
-   * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if
-   * unspecified, meaning that one image pixel equates to one display point / DIP.
-   */
-  scale: PropTypes.number,
-});
-
-const ImageSourcePropType = PropTypes.oneOfType([
-  ImageURISourcePropType,
-  // Opaque type returned by require('./image.jpg')
-  PropTypes.number,
-  // Multiple sources
-  PropTypes.arrayOf(ImageURISourcePropType),
-]);
-
-module.exports = ImageSourcePropType;

Libraries/StyleSheet/StyleSheetValidation.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const ImageStylePropTypes = require('ImageStylePropTypes');
+const DeprecatedImageStylePropTypes = require('DeprecatedImageStylePropTypes');
 const TextStylePropTypes = require('TextStylePropTypes');
 const ViewStylePropTypes = require('ViewStylePropTypes');
 
@@ -85,7 +85,7 @@ const styleError = function(message1, style, caller?, message2?) {
 const allStylePropTypes = {};
 
 if (__DEV__ && !global.__RCTProfileIsProfiling) {
-  StyleSheetValidation.addValidStylePropTypes(ImageStylePropTypes);
+  StyleSheetValidation.addValidStylePropTypes(DeprecatedImageStylePropTypes);
   StyleSheetValidation.addValidStylePropTypes(TextStylePropTypes);
   StyleSheetValidation.addValidStylePropTypes(ViewStylePropTypes);
 }

Libraries/Text/Text.js

@@ -10,10 +10,10 @@
 
 'use strict';
 
+const DeprecatedTextPropTypes = require('DeprecatedTextPropTypes');
 const React = require('React');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 const TextAncestor = require('TextAncestor');
-const TextPropTypes = require('TextPropTypes');
 const Touchable = require('Touchable');
 const UIManager = require('UIManager');
 
@@ -279,6 +279,6 @@ const Text = (
 const TextToExport = React.forwardRef(Text);
 
 // TODO: Deprecate this.
-TextToExport.propTypes = TextPropTypes;
+TextToExport.propTypes = DeprecatedTextPropTypes;
 
 module.exports = (TextToExport: Class<NativeComponent<TextProps>>);

Libraries/Text/TextProps.js

@@ -30,17 +30,81 @@ export type PressRetentionOffset = $ReadOnly<{|
  * @see https://facebook.github.io/react-native/docs/text.html#reference
  */
 export type TextProps = $ReadOnly<{
+  /**
+   * Indicates whether the view is an accessibility element.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#accessible
+   */
   accessible?: ?boolean,
   accessibilityRole?: ?AccessibilityRole,
   accessibilityStates?: ?AccessibilityStates,
   accessibilityTraits?: ?(AccessibilityTrait | Array<AccessibilityTrait>),
+
+  /**
+   * Whether font should be scaled down automatically.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#adjustsfontsizetofit
+   */
+  adjustsFontSizeToFit?: ?boolean,
+
+  /**
+   * Whether fonts should scale to respect Text Size accessibility settings.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#allowfontscaling
+   */
   allowFontScaling?: ?boolean,
   children?: ?React.Node,
+
+  /**
+   * When `numberOfLines` is set, this prop defines how text will be
+   * truncated.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#ellipsizemode
+   */
   ellipsizeMode?: ?('clip' | 'head' | 'middle' | 'tail'),
+
+  /**
+   * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
+   * Possible values:
+   * `null/undefined` (default): inherit from the parent node or the global default (0)
+   * `0`: no max, ignore parent/global default
+   * `>= 1`: sets the maxFontSizeMultiplier of this node to this value
+   */
+  maxFontSizeMultiplier?: ?number,
+
+  /**
+   * Used to locate this view from native code.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#nativeid
+   */
   nativeID?: ?string,
+
+  /**
+   * Used to truncate the text with an ellipsis.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#numberoflines
+   */
   numberOfLines?: ?number,
+
+  /**
+   * Invoked on mount and layout changes.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#onlayout
+   */
   onLayout?: ?(event: LayoutEvent) => mixed,
+
+  /**
+   * This function is called on long press.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#onlongpress
+   */
   onLongPress?: ?(event: PressEvent) => mixed,
+
+  /**
+   * This function is called on press.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#onpress
+   */
   onPress?: ?(event: PressEvent) => mixed,
   onResponderGrant?: ?Function,
   onResponderMove?: ?Function,
@@ -49,18 +113,71 @@ export type TextProps = $ReadOnly<{
   onResponderTerminationRequest?: ?Function,
   onStartShouldSetResponder?: ?Function,
   onTextLayout?: ?(event: TextLayoutEvent) => mixed,
+
+  /**
+   * Defines how far your touch may move off of the button, before
+   * deactivating the button.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#pressretentionoffset
+   */
   pressRetentionOffset?: ?PressRetentionOffset,
+
+  /**
+   * Lets the user select text.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#selectable
+   */
   selectable?: ?boolean,
   style?: ?DangerouslyImpreciseStyleProp,
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#testid
+   */
   testID?: ?string,
 
-  // Android Only
+  /**
+   * Android Only
+   */
+
+  /**
+   * Specifies the disabled state of the text view for testing purposes.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#disabled
+   */
   disabled?: ?boolean,
+
+  /**
+   * The highlight color of the text.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#selectioncolor
+   */
   selectionColor?: ?string,
+
+  /**
+   * Set text break strategy on Android.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#textbreakstrategy
+   */
   textBreakStrategy?: ?('balanced' | 'highQuality' | 'simple'),
 
-  // iOS Only
+  /**
+   * iOS Only
+   */
   adjustsFontSizeToFit?: ?boolean,
+
+  /**
+   * Smallest possible scale a font can reach.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#minimumfontscale
+   */
   minimumFontScale?: ?number,
+
+  /**
+   * When `true`, no visual change is made when text is pressed down.
+   *
+   * See https://facebook.github.io/react-native/docs/text.html#supperhighlighting
+   */
   suppressHighlighting?: ?boolean,
 }>;