RN: Nullable Image, Text, & View Props

Summary:
Changes the Flow prop types for `Image`, `Text`, and `View` to be nullable and optional.

This makes these components easier to compose.

Reviewed By: sahrens

Differential Revision: D9494285

fbshipit-source-id: c3f17147f063b31217b239a3abc085d1850f8df9

Libraries/Components/View/ViewAccessibility.js

@@ -52,11 +52,7 @@ export type AccessibilityRole =
   | 'header'
   | 'summary';
 
-export type AccessibilityState = 'selected' | 'disabled';
-
-export type AccessibilityStates =
-  | AccessibilityState
-  | $ReadOnlyArray<AccessibilityState>;
+export type AccessibilityStates = $ReadOnlyArray<'disabled' | 'selected'>;
 
 module.exports = {
   AccessibilityTraits: [

Libraries/Components/View/ViewPropTypes.js

@@ -10,27 +10,26 @@
 
 'use strict';
 
-const React = require('React');
-
 import type {Layout, LayoutEvent} from 'CoreEventTypes';
 import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
+import type React from 'React';
 import type {ViewStyleProp} from 'StyleSheet';
 import type {TVViewProps} from 'TVViewPropTypes';
 import type {
   AccessibilityComponentType,
   AccessibilityTrait,
   AccessibilityRole,
-  AccessibilityState,
+  AccessibilityStates,
 } from 'ViewAccessibility';
 
 export type ViewLayout = Layout;
 export type ViewLayoutEvent = LayoutEvent;
 
 type DirectEventProps = $ReadOnly<{|
-  onAccessibilityAction?: Function,
-  onAccessibilityTap?: Function,
+  onAccessibilityAction?: ?Function,
+  onAccessibilityTap?: ?Function,
   onLayout?: ?(event: LayoutEvent) => void,
-  onMagicTap?: Function,
+  onMagicTap?: ?Function,
 |}>;
 
 type TouchEventProps = $ReadOnly<{|
@@ -84,33 +83,37 @@ export type ViewProps = $ReadOnly<{|
   // so we must include TVViewProps
   ...TVViewProps,
 
-  accessible?: boolean,
-  accessibilityLabel?:
+  accessible?: ?boolean,
+  accessibilityLabel?: ?(
     | null
     | React$PropType$Primitive<any>
     | Stringish
-    | Array<any>
-    | any,
-  accessibilityHint?: Stringish,
-  accessibilityActions?: Array<string>,
-  accessibilityComponentType?: AccessibilityComponentType,
-  accessibilityLiveRegion?: 'none' | 'polite' | 'assertive',
-  importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants',
-  accessibilityIgnoresInvertColors?: boolean,
-  accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
-  accessibilityRole?: AccessibilityRole,
-  accessibilityStates?: Array<AccessibilityState>,
-  accessibilityViewIsModal?: boolean,
-  accessibilityElementsHidden?: boolean,
+    | $ReadOnlyArray<any>
+    | any
+  ),
+  accessibilityHint?: ?Stringish,
+  accessibilityActions?: ?$ReadOnlyArray<string>,
+  accessibilityComponentType?: ?AccessibilityComponentType,
+  accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+  accessibilityIgnoresInvertColors?: ?boolean,
+  accessibilityTraits?: ?(
+    | AccessibilityTrait
+    | $ReadOnlyArray<AccessibilityTrait>
+  ),
+  accessibilityRole?: ?AccessibilityRole,
+  accessibilityStates?: ?AccessibilityStates,
+  accessibilityViewIsModal?: ?boolean,
+  accessibilityElementsHidden?: ?boolean,
   children?: ?React.Node,
   testID?: ?string,
-  nativeID?: string,
+  nativeID?: ?string,
   hitSlop?: ?EdgeInsetsProp,
-  pointerEvents?: null | 'box-none' | 'none' | 'box-only' | 'auto',
+  pointerEvents?: ?('auto' | 'box-none' | 'box-only' | 'none'),
   style?: ?ViewStyleProp,
-  removeClippedSubviews?: boolean,
-  renderToHardwareTextureAndroid?: boolean,
-  shouldRasterizeIOS?: boolean,
-  collapsable?: boolean,
-  needsOffscreenAlphaCompositing?: boolean,
+  removeClippedSubviews?: ?boolean,
+  renderToHardwareTextureAndroid?: ?boolean,
+  shouldRasterizeIOS?: ?boolean,
+  collapsable?: ?boolean,
+  needsOffscreenAlphaCompositing?: ?boolean,
 |}>;

Libraries/Image/ImageProps.js

@@ -54,7 +54,7 @@ export type ImageProps = {|
   ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
   ...IOSImageProps,
   ...AndroidImageProps,
-  blurRadius?: number,
+  blurRadius?: ?number,
   capInsets?: ?EdgeInsetsProp,
 
   onError?: ?(event: SyntheticEvent<$ReadOnly<{||}>>) => void,
@@ -63,11 +63,11 @@ export type ImageProps = {|
   onLoadStart?: ?() => void,
   resizeMethod?: ?('auto' | 'resize' | 'scale'),
   source?: ?ImageSource,
-  style?: ImageStyleProp,
+  style?: ?ImageStyleProp,
 
   // Can be set via props or style, for now
-  height?: DimensionValue,
-  width?: DimensionValue,
+  height?: ?DimensionValue,
+  width?: ?DimensionValue,
   resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'),
 
   src?: empty,

Libraries/Text/TextProps.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-import type {AccessibilityRole} from 'ViewAccessibility';
-import type {AccessibilityState} from 'ViewAccessibility';
-import type {AccessibilityTrait} from 'ViewAccessibility';
-
-import type {Node} from 'react';
-
 import type {LayoutEvent, PressEvent} from 'CoreEventTypes';
+import type React from 'React';
 import type {DangerouslyImpreciseStyleProp} from 'StyleSheet';
+import type {
+  AccessibilityRole,
+  AccessibilityStates,
+  AccessibilityTrait,
+} from 'ViewAccessibility';
 
 export type PressRetentionOffset = $ReadOnly<{|
   top: number,
@@ -31,13 +31,13 @@ export type PressRetentionOffset = $ReadOnly<{|
  */
 export type TextProps = $ReadOnly<{
   accessible?: ?boolean,
-  accessibilityRole?: AccessibilityRole,
-  accessibilityStates?: Array<AccessibilityState>,
-  accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
+  accessibilityRole?: ?AccessibilityRole,
+  accessibilityStates?: ?AccessibilityStates,
+  accessibilityTraits?: ?(AccessibilityTrait | Array<AccessibilityTrait>),
   allowFontScaling?: ?boolean,
-  children?: Node,
-  ellipsizeMode?: 'clip' | 'head' | 'middle' | 'tail',
-  nativeID?: string,
+  children?: ?React.Node,
+  ellipsizeMode?: ?('clip' | 'head' | 'middle' | 'tail'),
+  nativeID?: ?string,
   numberOfLines?: ?number,
   onLayout?: ?(event: LayoutEvent) => mixed,
   onLongPress?: ?(event: PressEvent) => mixed,
@@ -51,12 +51,12 @@ export type TextProps = $ReadOnly<{
   pressRetentionOffset?: ?PressRetentionOffset,
   selectable?: ?boolean,
   style?: ?DangerouslyImpreciseStyleProp,
-  testID?: string,
+  testID?: ?string,
 
   // Android Only
   disabled?: ?boolean,
   selectionColor?: ?string,
-  textBreakStrategy?: 'balanced' | 'highQuality' | 'simple',
+  textBreakStrategy?: ?('balanced' | 'highQuality' | 'simple'),
 
   // iOS Only
   adjustsFontSizeToFit?: ?boolean,