Fix optional value flow types

packages/react-native-web/src/exports/Text/types.js

@@ -24,43 +24,45 @@ type FontWeightValue =
   | '800'
   | '900';
 
+type NumberOrString = number | string;
+
 export type TextStyle = {
   ...ViewStyle,
-  color?: ColorValue,
-  fontFamily?: string,
-  fontFeatureSettings?: string,
-  fontSize?: number | string,
+  color?: ?ColorValue,
+  fontFamily?: ?string,
+  fontFeatureSettings?: ?string,
+  fontSize?: ?NumberOrString,
   fontStyle?: 'italic' | 'normal',
-  fontWeight?: FontWeightValue,
+  fontWeight?: ?FontWeightValue,
   fontVariant?: $ReadOnlyArray<
     'small-caps' | 'oldstyle-nums' | 'lining-nums' | 'tabular-nums' | 'proportional-nums'
   >,
-  letterSpacing?: number | string,
-  lineHeight?: number | string,
+  letterSpacing?: ?NumberOrString,
+  lineHeight?: ?NumberOrString,
   textAlign?: 'center' | 'end' | 'inherit' | 'justify' | 'justify-all' | 'left' | 'right' | 'start',
-  textAlignVertical?: string,
-  textDecorationColor?: ColorValue,
+  textAlignVertical?: ?string,
+  textDecorationColor?: ?ColorValue,
   textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through',
   textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
-  textIndent?: number | string,
-  textOverflow?: string,
+  textIndent?: ?NumberOrString,
+  textOverflow?: ?string,
   textRendering?: 'auto' | 'geometricPrecision' | 'optimizeLegibility' | 'optimizeSpeed',
-  textShadowColor?: ColorValue,
+  textShadowColor?: ?ColorValue,
   textShadowOffset?: {| width?: number, height?: number |},
-  textShadowRadius?: number,
+  textShadowRadius?: ?number,
   textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase',
   unicodeBidi?: 'normal' | 'bidi-override' | 'embed' | 'isolate' | 'isolate-override' | 'plaintext',
-  whiteSpace?: string,
+  whiteSpace?: ?string,
   wordBreak?: 'normal' | 'break-all' | 'break-word' | 'keep-all',
-  wordWrap?: string,
+  wordWrap?: ?string,
   writingDirection?: 'auto' | 'ltr' | 'rtl',
   /* @platform web */
-  MozOsxFontSmoothing?: string,
-  WebkitFontSmoothing?: string
+  MozOsxFontSmoothing?: ?string,
+  WebkitFontSmoothing?: ?string
 };
 
 export type TextProps = {
-  accessibilityLabel?: string,
+  accessibilityLabel?: ?string,
   accessibilityLiveRegion?: 'none' | 'polite' | 'assertive',
   accessibilityRelationship?: {
     activedescendant?: ?string,
@@ -93,13 +95,13 @@ export type TextProps = {
     required?: ?boolean,
     selected?: ?boolean
   },
-  accessible?: boolean,
-  children?: any,
+  accessible?: ?boolean,
+  children?: ?any,
   dir?: 'auto' | 'ltr' | 'rtl',
   forwardedRef?: any,
   importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants',
-  nativeID?: string,
-  numberOfLines?: number,
+  nativeID?: ?string,
+  numberOfLines?: ?number,
   onBlur?: (e: any) => void,
   onFocus?: (e: any) => void,
   onLayout?: (e: LayoutEvent) => void,
@@ -122,7 +124,7 @@ export type TextProps = {
   onStartShouldSetResponderCapture?: (e: any) => boolean,
   selectable?: boolean,
   style?: GenericStyleProp<TextStyle>,
-  testID?: string,
+  testID?: ?string,
   // unstable
   onContextMenu?: (e: any) => void,
   onKeyDown?: (e: any) => void,
@@ -143,14 +145,14 @@ export type TextProps = {
   onTouchMoveCapture?: (e: any) => void,
   onTouchStart?: (e: any) => void,
   onTouchStartCapture?: (e: any) => void,
-  href?: string,
-  itemID?: string,
-  itemRef?: string,
-  itemProp?: string,
-  itemScope?: string,
-  itemType?: string,
-  rel?: string,
-  target?: string,
+  href?: ?string,
+  itemID?: ?string,
+  itemRef?: ?string,
+  itemProp?: ?string,
+  itemScope?: ?string,
+  itemType?: ?string,
+  rel?: ?string,
+  target?: ?string,
   unstable_ariaSet?: Object,
   unstable_dataSet?: Object
 };

packages/react-native-web/src/exports/TextInput/types.js

@@ -20,16 +20,16 @@ export type TextInputStyle = {
 export type TextInputProps = {
   ...ViewProps,
   autoCapitalize?: 'characters' | 'none' | 'sentences' | 'words',
-  autoComplete?: string,
-  autoCompleteType?: string, // Compat with React Native (Bug react-native#26003)
-  autoCorrect?: boolean,
-  autoFocus?: boolean,
-  blurOnSubmit?: boolean,
-  clearTextOnFocus?: boolean,
-  defaultValue?: string,
-  disabled?: boolean,
-  editable?: boolean,
-  inputAccessoryViewID?: string,
+  autoComplete?: ?string,
+  autoCompleteType?: ?string, // Compat with React Native (Bug react-native#26003)
+  autoCorrect?: ?boolean,
+  autoFocus?: ?boolean,
+  blurOnSubmit?: ?boolean,
+  clearTextOnFocus?: ?boolean,
+  defaultValue?: ?string,
+  disabled?: ?boolean,
+  editable?: ?boolean,
+  inputAccessoryViewID?: ?string,
   keyboardType?:
     | 'default'
     | 'email-address'
@@ -40,9 +40,9 @@ export type TextInputProps = {
     | 'search'
     | 'url'
     | 'web-search',
-  maxLength?: number,
-  multiline?: boolean,
-  numberOfLines?: number,
+  maxLength?: ?number,
+  multiline?: ?boolean,
+  numberOfLines?: ?number,
   onBlur?: (e: any) => void,
   onChange?: (e: any) => void,
   onChangeText?: (e: string) => void,
@@ -53,17 +53,17 @@ export type TextInputProps = {
   onSelectionChange?: (e: any) => void,
   onScroll?: (e: any) => void,
   onSubmitEditing?: (e: any) => void,
-  placeholder?: string,
-  placeholderTextColor?: ColorValue,
+  placeholder?: ?string,
+  placeholderTextColor?: ?ColorValue,
   returnKeyType?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send',
-  secureTextEntry?: boolean,
-  selectTextOnFocus?: boolean,
+  secureTextEntry?: ?boolean,
+  selectTextOnFocus?: ?boolean,
   selection?: {|
     start: number,
     end?: number
   |},
-  selectionColor?: ColorValue,
-  spellCheck?: boolean,
-  style?: GenericStyleProp<TextInputStyle>,
-  value?: string
+  selectionColor?: ?ColorValue,
+  spellCheck?: ?boolean,
+  style?: ?GenericStyleProp<TextInputStyle>,
+  value?: ?string
 };

packages/react-native-web/src/exports/View/types.js

@@ -19,6 +19,8 @@ import type {
   TransformStyles
 } from '../../types/styles';
 
+type NumberOrString = number | string;
+
 type OverscrollBehaviorValue = 'auto' | 'contain' | 'none';
 
 export type ViewStyle = {
@@ -28,36 +30,36 @@ export type ViewStyle = {
   ...LayoutStyles,
   ...ShadowStyles,
   ...TransformStyles,
-  backdropFilter?: string,
-  backgroundAttachment?: string,
-  backgroundBlendMode?: string,
-  backgroundClip?: string,
-  backgroundColor?: ColorValue,
+  backdropFilter?: ?string,
+  backgroundAttachment?: ?string,
+  backgroundBlendMode?: ?string,
+  backgroundClip?: ?string,
+  backgroundColor?: ?ColorValue,
   backgroundImage?: ?string,
   backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box',
-  backgroundPosition?: string,
-  backgroundRepeat?: string,
-  backgroundSize?: string,
-  boxShadow?: string,
-  clip?: string,
+  backgroundPosition?: ?string,
+  backgroundRepeat?: ?string,
+  backgroundSize?: ?string,
+  boxShadow?: ?string,
+  clip?: ?string,
   filter?: ?string,
-  opacity?: number,
-  outlineColor?: ColorValue,
-  outlineOffset?: string | number,
-  outlineStyle?: string,
-  outlineWidth?: string | number,
-  overscrollBehavior?: OverscrollBehaviorValue,
-  overscrollBehaviorX?: OverscrollBehaviorValue,
-  overscrollBehaviorY?: OverscrollBehaviorValue,
+  opacity?: ?number,
+  outlineColor?: ?ColorValue,
+  outlineOffset?: ?NumberOrString,
+  outlineStyle?: ?string,
+  outlineWidth?: ?NumberOrString,
+  overscrollBehavior?: ?OverscrollBehaviorValue,
+  overscrollBehaviorX?: ?OverscrollBehaviorValue,
+  overscrollBehaviorY?: ?OverscrollBehaviorValue,
   scrollbarWidth?: 'auto' | 'none' | 'thin',
-  scrollSnapAlign?: string,
-  scrollSnapType?: string,
-  WebkitMaskImage?: string,
+  scrollSnapAlign?: ?string,
+  scrollSnapType?: ?string,
+  WebkitMaskImage?: ?string,
   WebkitOverflowScrolling?: 'auto' | 'touch'
 };
 
 export type ViewProps = {
-  accessibilityLabel?: string,
+  accessibilityLabel?: ?string,
   accessibilityLiveRegion?: 'none' | 'polite' | 'assertive',
   accessibilityRelationship?: {
     activedescendant?: ?string,
@@ -68,7 +70,7 @@ export type ViewProps = {
     labelledby?: ?string,
     owns?: ?string
   },
-  accessibilityRole?: string,
+  accessibilityRole?: ?string,
   accessibilityState?: {
     busy?: ?boolean,
     checked?: ?boolean | 'mixed',
@@ -90,11 +92,11 @@ export type ViewProps = {
     text?: ?string
   },
   accessible?: boolean,
-  children?: any,
+  children?: ?any,
   forwardedRef?: any,
-  hitSlop?: EdgeInsetsValue,
+  hitSlop?: ?EdgeInsetsValue,
   importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants',
-  nativeID?: string,
+  nativeID?: ?string,
   onBlur?: (e: any) => void,
   onFocus?: (e: any) => void,
   onLayout?: (e: LayoutEvent) => void,
@@ -116,7 +118,7 @@ export type ViewProps = {
   onStartShouldSetResponderCapture?: (e: any) => boolean,
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto',
   style?: GenericStyleProp<ViewStyle>,
-  testID?: string,
+  testID?: ?string,
   // unstable
   onClick?: (e: any) => void,
   onClickCapture?: (e: any) => void,
@@ -141,14 +143,14 @@ export type ViewProps = {
   onTouchMoveCapture?: (e: any) => void,
   onTouchStart?: (e: any) => void,
   onTouchStartCapture?: (e: any) => void,
-  href?: string,
-  itemID?: string,
-  itemRef?: string,
-  itemProp?: string,
-  itemScope?: string,
-  itemType?: string,
-  rel?: string,
-  target?: string,
+  href?: ?string,
+  itemID?: ?string,
+  itemRef?: ?string,
+  itemProp?: ?string,
+  itemScope?: ?string,
+  itemType?: ?string,
+  rel?: ?string,
+  target?: ?string,
   unstable_ariaSet?: Object,
   unstable_dataSet?: Object
 };

packages/react-native-web/src/types/styles.js

@@ -22,18 +22,18 @@ type AnimationKeyframes = string | Object;
 type AnimationPlayState = 'paused' | 'running';
 
 export type AnimationStyles = {|
-  animationDelay?: string | Array<string>,
-  animationDirection?: AnimationDirection | Array<AnimationDirection>,
-  animationDuration?: string | Array<string>,
-  animationFillMode?: AnimationFillMode | Array<AnimationFillMode>,
-  animationIterationCount?: AnimationIterationCount | Array<AnimationIterationCount>,
-  animationKeyframes?: AnimationKeyframes | Array<AnimationKeyframes>,
-  animationPlayState?: AnimationPlayState | Array<AnimationPlayState>,
-  animationTimingFunction?: string | Array<string>,
-  transitionDelay?: string | Array<string>,
-  transitionDuration?: string | Array<string>,
-  transitionProperty?: string | Array<string>,
-  transitionTimingFunction?: string | Array<string>
+  animationDelay?: ?(string | Array<string>),
+  animationDirection?: ?(AnimationDirection | Array<AnimationDirection>),
+  animationDuration?: ?(string | Array<string>),
+  animationFillMode?: ?(AnimationFillMode | Array<AnimationFillMode>),
+  animationIterationCount?: ?(AnimationIterationCount | Array<AnimationIterationCount>),
+  animationKeyframes?: ?(AnimationKeyframes | Array<AnimationKeyframes>),
+  animationPlayState?: ?(AnimationPlayState | Array<AnimationPlayState>),
+  animationTimingFunction?: ?(string | Array<string>),
+  transitionDelay?: ?(string | Array<string>),
+  transitionDuration?: ?(string | Array<string>),
+  transitionProperty?: ?(string | Array<string>),
+  transitionTimingFunction?: ?(string | Array<string>)
 |};
 
 /**
@@ -44,29 +44,29 @@ type BorderRadiusValue = number | string;
 type BorderStyleValue = 'solid' | 'dotted' | 'dashed';
 
 export type BorderStyles = {|
-  borderColor?: ColorValue,
-  borderBottomColor?: ColorValue,
-  borderEndColor?: ColorValue,
-  borderLeftColor?: ColorValue,
-  borderRightColor?: ColorValue,
-  borderStartColor?: ColorValue,
-  borderTopColor?: ColorValue,
-  borderRadius?: BorderRadiusValue,
-  borderBottomEndRadius?: BorderRadiusValue,
-  borderBottomLeftRadius?: BorderRadiusValue,
-  borderBottomRightRadius?: BorderRadiusValue,
-  borderBottomStartRadius?: BorderRadiusValue,
-  borderTopEndRadius?: BorderRadiusValue,
-  borderTopLeftRadius?: BorderRadiusValue,
-  borderTopRightRadius?: BorderRadiusValue,
-  borderTopStartRadius?: BorderRadiusValue,
-  borderStyle?: BorderStyleValue,
-  borderBottomStyle?: BorderStyleValue,
-  borderEndStyle?: BorderStyleValue,
-  borderLeftStyle?: BorderStyleValue,
-  borderRightStyle?: BorderStyleValue,
-  borderStartStyle?: BorderStyleValue,
-  borderTopStyle?: BorderStyleValue
+  borderColor?: ?ColorValue,
+  borderBottomColor?: ?ColorValue,
+  borderEndColor?: ?ColorValue,
+  borderLeftColor?: ?ColorValue,
+  borderRightColor?: ?ColorValue,
+  borderStartColor?: ?ColorValue,
+  borderTopColor?: ?ColorValue,
+  borderRadius?: ?BorderRadiusValue,
+  borderBottomEndRadius?: ?BorderRadiusValue,
+  borderBottomLeftRadius?: ?BorderRadiusValue,
+  borderBottomRightRadius?: ?BorderRadiusValue,
+  borderBottomStartRadius?: ?BorderRadiusValue,
+  borderTopEndRadius?: ?BorderRadiusValue,
+  borderTopLeftRadius?: ?BorderRadiusValue,
+  borderTopRightRadius?: ?BorderRadiusValue,
+  borderTopStartRadius?: ?BorderRadiusValue,
+  borderStyle?: ?BorderStyleValue,
+  borderBottomStyle?: ?BorderStyleValue,
+  borderEndStyle?: ?BorderStyleValue,
+  borderLeftStyle?: ?BorderStyleValue,
+  borderRightStyle?: ?BorderStyleValue,
+  borderStartStyle?: ?BorderStyleValue,
+  borderTopStyle?: ?BorderStyleValue
 |};
 
 /**
@@ -129,12 +129,12 @@ type UserSelect = 'all' | 'auto' | 'contain' | 'none' | 'text';
 
 export type InteractionStyles = {|
   // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Formal_syntax
-  cursor?: CursorValue,
+  cursor?: ?CursorValue,
   // https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Formal_syntax
-  touchAction?: TouchActionValue,
+  touchAction?: ?TouchActionValue,
   // https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Formal_syntax_2
-  userSelect?: UserSelect,
-  willChange?: string
+  userSelect?: ?UserSelect,
+  willChange?: ?string
 |};
 
 /**
@@ -152,88 +152,89 @@ export type LayoutStyles = {|
     | 'space-around'
     | 'space-between'
     | 'stretch',
-  alignItems?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch',
-  alignSelf?: 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch',
-  backfaceVisibility?: VisiblilityValue,
-  borderWidth?: DimensionValue,
-  borderBottomWidth?: DimensionValue,
-  borderEndWidth?: DimensionValue,
-  borderLeftWidth?: DimensionValue,
-  borderRightWidth?: DimensionValue,
-  borderStartWidth?: DimensionValue,
-  borderTopWidth?: DimensionValue,
-  bottom?: DimensionValue,
-  boxSizing?: 'border-box' | 'content-box' | 'padding-box',
-  direction?: 'inherit' | 'ltr' | 'rtl',
-  display?: string,
-  end?: DimensionValue,
-  flex?: number,
-  flexBasis?: DimensionValue,
-  flexDirection?: 'column' | 'column-reverse' | 'row' | 'row-reverse',
-  flexGrow?: number,
-  flexShrink?: number,
-  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse',
-  height?: DimensionValue,
-  justifyContent?:
+  alignItems?: ?('baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'),
+  alignSelf?: ?('auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'),
+  backfaceVisibility?: ?VisiblilityValue,
+  borderWidth?: ?DimensionValue,
+  borderBottomWidth?: ?DimensionValue,
+  borderEndWidth?: ?DimensionValue,
+  borderLeftWidth?: ?DimensionValue,
+  borderRightWidth?: ?DimensionValue,
+  borderStartWidth?: ?DimensionValue,
+  borderTopWidth?: ?DimensionValue,
+  bottom?: ?DimensionValue,
+  boxSizing?: ?('border-box' | 'content-box' | 'padding-box'),
+  direction?: ?('inherit' | 'ltr' | 'rtl'),
+  display?: ?string,
+  end?: ?DimensionValue,
+  flex?: ?number,
+  flexBasis?: ?DimensionValue,
+  flexDirection?: ?('column' | 'column-reverse' | 'row' | 'row-reverse'),
+  flexGrow?: ?number,
+  flexShrink?: ?number,
+  flexWrap?: ?('nowrap' | 'wrap' | 'wrap-reverse'),
+  height?: ?DimensionValue,
+  justifyContent?: ?(
     | 'center'
     | 'flex-end'
     | 'flex-start'
     | 'space-around'
     | 'space-between'
-    | 'space-evenly',
-  left?: DimensionValue,
-  margin?: DimensionValue,
-  marginBottom?: DimensionValue,
-  marginHorizontal?: DimensionValue,
-  marginEnd?: DimensionValue,
-  marginLeft?: DimensionValue,
-  marginRight?: DimensionValue,
-  marginStart?: DimensionValue,
-  marginTop?: DimensionValue,
-  marginVertical?: DimensionValue,
-  maxHeight?: DimensionValue,
-  maxWidth?: DimensionValue,
-  minHeight?: DimensionValue,
-  minWidth?: DimensionValue,
-  order?: number,
-  overflow?: OverflowValue,
-  overflowX?: OverflowValue,
-  overflowY?: OverflowValue,
-  padding?: DimensionValue,
-  paddingBottom?: DimensionValue,
-  paddingHorizontal?: DimensionValue,
-  paddingEnd?: DimensionValue,
-  paddingLeft?: DimensionValue,
-  paddingRight?: DimensionValue,
-  paddingStart?: DimensionValue,
-  paddingTop?: DimensionValue,
-  paddingVertical?: DimensionValue,
-  position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky',
-  right?: DimensionValue,
-  start?: DimensionValue,
-  top?: DimensionValue,
-  visibility?: VisiblilityValue,
-  width?: DimensionValue,
-  zIndex?: number,
+    | 'space-evenly'
+  ),
+  left?: ?DimensionValue,
+  margin?: ?DimensionValue,
+  marginBottom?: ?DimensionValue,
+  marginHorizontal?: ?DimensionValue,
+  marginEnd?: ?DimensionValue,
+  marginLeft?: ?DimensionValue,
+  marginRight?: ?DimensionValue,
+  marginStart?: ?DimensionValue,
+  marginTop?: ?DimensionValue,
+  marginVertical?: ?DimensionValue,
+  maxHeight?: ?DimensionValue,
+  maxWidth?: ?DimensionValue,
+  minHeight?: ?DimensionValue,
+  minWidth?: ?DimensionValue,
+  order?: ?number,
+  overflow?: ?OverflowValue,
+  overflowX?: ?OverflowValue,
+  overflowY?: ?OverflowValue,
+  padding?: ?DimensionValue,
+  paddingBottom?: ?DimensionValue,
+  paddingHorizontal?: ?DimensionValue,
+  paddingEnd?: ?DimensionValue,
+  paddingLeft?: ?DimensionValue,
+  paddingRight?: ?DimensionValue,
+  paddingStart?: ?DimensionValue,
+  paddingTop?: ?DimensionValue,
+  paddingVertical?: ?DimensionValue,
+  position?: ?('absolute' | 'fixed' | 'relative' | 'static' | 'sticky'),
+  right?: ?DimensionValue,
+  start?: ?DimensionValue,
+  top?: ?DimensionValue,
+  visibility?: ?VisiblilityValue,
+  width?: ?DimensionValue,
+  zIndex?: ?number,
   /**
    * @platform unsupported
    */
-  aspectRatio?: number,
+  aspectRatio?: ?number,
   /**
    * @platform web
    */
-  gridAutoColumns?: string,
-  gridAutoFlow?: string,
-  gridAutoRows?: string,
-  gridColumnEnd?: string,
-  gridColumnGap?: string,
-  gridColumnStart?: string,
-  gridRowEnd?: string,
-  gridRowGap?: string,
-  gridRowStart?: string,
-  gridTemplateColumns?: string,
-  gridTemplateRows?: string,
-  gridTemplateAreas?: string
+  gridAutoColumns?: ?string,
+  gridAutoFlow?: ?string,
+  gridAutoRows?: ?string,
+  gridColumnEnd?: ?string,
+  gridColumnGap?: ?string,
+  gridColumnStart?: ?string,
+  gridRowEnd?: ?string,
+  gridRowGap?: ?string,
+  gridRowStart?: ?string,
+  gridTemplateColumns?: ?string,
+  gridTemplateRows?: ?string,
+  gridTemplateAreas?: ?string
 |};
 
 /**
@@ -241,13 +242,13 @@ export type LayoutStyles = {|
  */
 
 export type ShadowStyles = {|
-  shadowColor?: ColorValue,
+  shadowColor?: ?ColorValue,
   shadowOffset?: {|
     width?: DimensionValue,
     height?: DimensionValue
   |},
-  shadowOpacity?: number,
-  shadowRadius?: DimensionValue
+  shadowOpacity?: ?number,
+  shadowRadius?: ?DimensionValue
 |};
 
 /**
@@ -255,8 +256,8 @@ export type ShadowStyles = {|
  */
 
 export type TransformStyles = {|
-  perspective?: NumberOrString,
-  perspectiveOrigin?: string,
+  perspective?: ?NumberOrString,
+  perspectiveOrigin?: ?string,
   transform?: Array<
     | {| +perspective: NumberOrString |}
     | {| +rotate: string |}
@@ -275,6 +276,6 @@ export type TransformStyles = {|
     | {| +translateZ: NumberOrString |}
     | {| +translate3d: string |}
   >,
-  transformOrigin?: string,
-  transformStyle?: 'flat' | 'preserve-3d'
+  transformOrigin?: ?string,
+  transformStyle?: ?('flat' | 'preserve-3d')
 |};