react-native 0.0.0-263478b91 → 0.0.0-268efb102

package/Libraries/Components/Slider/Slider.js

@@ -19,6 +19,7 @@ import StyleSheet, {
 import type {ImageSource} from '../../Image/ImageSource';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
+import type {AccessibilityState} from '../View/ViewAccessibility';
 
 type Event = SyntheticEvent<
   $ReadOnly<{|
@@ -131,6 +132,11 @@ type Props = $ReadOnly<{|
    * Used to locate this view in UI automation tests.
    */
   testID?: ?string,
+
+  /**
+    Indicates to accessibility services that UI Component is in a specific State.
+   */
+  accessibilityState?: ?AccessibilityState,
 |}>;
 
 /**
@@ -200,7 +206,6 @@ const Slider = (
   const style = StyleSheet.compose(styles.slider, props.style);
 
   const {
-    disabled = false,
     value = 0.5,
     minimumValue = 0,
     maximumValue = 1,
@@ -230,9 +235,16 @@ const Slider = (
       }
     : null;
 
+  const disabled =
+    props.disabled === true || props.accessibilityState?.disabled === true;
+  const accessibilityState = disabled
+    ? {...props.accessibilityState, disabled: true}
+    : props.accessibilityState;
+
   return (
     <SliderNativeComponent
       {...localProps}
+      accessibilityState={accessibilityState}
       // TODO: Reconcile these across the two platforms.
       enabled={!disabled}
       disabled={disabled}

package/Libraries/Components/StatusBar/StatusBar.js

@@ -127,19 +127,21 @@ function mergePropsStack(
  * and the transition/animation info.
  */
 function createStackEntry(props: any): any {
+  const animated = props.animated ?? false;
+  const showHideTransition = props.showHideTransition ?? 'fade';
   return {
     backgroundColor:
       props.backgroundColor != null
         ? {
             value: props.backgroundColor,
-            animated: props.animated,
+            animated,
           }
         : null,
     barStyle:
       props.barStyle != null
         ? {
             value: props.barStyle,
-            animated: props.animated,
+            animated,
           }
         : null,
     translucent: props.translucent,
@@ -147,8 +149,8 @@ function createStackEntry(props: any): any {
       props.hidden != null
         ? {
             value: props.hidden,
-            animated: props.animated,
-            transition: props.showHideTransition,
+            animated,
+            transition: showHideTransition,
           }
         : null,
     networkActivityIndicatorVisible: props.networkActivityIndicatorVisible,
@@ -221,8 +223,6 @@ class StatusBar extends React.Component<Props> {
   static _propsStack = [];
 
   static _defaultProps = createStackEntry({
-    animated: false,
-    showHideTransition: 'fade',
     backgroundColor:
       Platform.OS === 'android'
         ? NativeStatusBarManagerAndroid.getConstants()
@@ -384,14 +384,6 @@ class StatusBar extends React.Component<Props> {
     return newEntry;
   }
 
-  static defaultProps: {|
-    animated: boolean,
-    showHideTransition: $TEMPORARY$string<'fade'>,
-  |} = {
-    animated: false,
-    showHideTransition: 'fade',
-  };
-
   _stackEntry = null;
 
   componentDidMount() {

package/Libraries/Components/Switch/Switch.js

@@ -12,6 +12,7 @@
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 import StyleSheet from '../../StyleSheet/StyleSheet';
+import useMergeRefs from '../../Utilities/useMergeRefs';
 
 import AndroidSwitchNativeComponent, {
   Commands as AndroidSwitchCommands,
@@ -129,7 +130,13 @@ const returnsTrue = () => true;
   export default App;
   ```
  */
-export default function Switch(props: Props): React.Node {
+
+const SwitchWithForwardedRef: React.AbstractComponent<
+  Props,
+  React.ElementRef<
+    typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
+  >,
+> = React.forwardRef(function Switch(props, forwardedRef): React.Node {
   const {
     disabled,
     ios_backgroundColor,
@@ -144,9 +151,12 @@ export default function Switch(props: Props): React.Node {
   const trackColorForFalse = trackColor?.false;
   const trackColorForTrue = trackColor?.true;
 
-  const nativeSwitchRef = React.useRef<?React.ElementRef<
+  const nativeSwitchRef = React.useRef<React.ElementRef<
     typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
-  >>(null);
+  > | null>(null);
+
+  const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
+
   const [native, setNative] = React.useState({value: null});
 
   const handleChange = (event: SwitchChangeEvent) => {
@@ -192,7 +202,7 @@ export default function Switch(props: Props): React.Node {
         onChange={handleChange}
         onResponderTerminationRequest={returnsFalse}
         onStartShouldSetResponder={returnsTrue}
-        ref={nativeSwitchRef}
+        ref={ref}
       />
     );
   } else {
@@ -224,8 +234,10 @@ export default function Switch(props: Props): React.Node {
         onChange={handleChange}
         onResponderTerminationRequest={returnsFalse}
         onStartShouldSetResponder={returnsTrue}
-        ref={nativeSwitchRef}
+        ref={ref}
       />
     );
   }
-}
+});
+
+export default SwitchWithForwardedRef;

package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -23,7 +23,6 @@ import type {
   ViewStyleProp,
   ColorValue,
 } from '../../StyleSheet/StyleSheet';
-import requireNativeComponent from '../../ReactNative/requireNativeComponent';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
 import AndroidTextInputViewConfig from './AndroidTextInputViewConfig';
@@ -37,10 +36,10 @@ export type KeyboardType =
   | 'phone-pad'
   | 'number-pad'
   | 'decimal-pad'
+  | 'url'
   // iOS-only
   | 'ascii-capable'
   | 'numbers-and-punctuation'
-  | 'url'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search'
@@ -97,7 +96,7 @@ export type NativeProps = $ReadOnly<{|
    *
    * @platform android
    */
-  autoCompleteType?: WithDefault<
+  autoComplete?: WithDefault<
     | 'cc-csc'
     | 'cc-exp'
     | 'cc-exp-month'
@@ -244,6 +243,7 @@ export type NativeProps = $ReadOnly<{|
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *Android Only*
    *
@@ -414,7 +414,7 @@ export type NativeProps = $ReadOnly<{|
   /**
    * The string that will be rendered before text input has been entered.
    */
-  placeholder?: ?string,
+  placeholder?: ?Stringish,
 
   /**
    * The text color of the placeholder string.

package/Libraries/Components/TextInput/AndroidTextInputViewConfig.js

@@ -83,6 +83,7 @@ const AndroidTextInputViewConfig = {
     multiline: true,
     color: {process: require('../../StyleSheet/processColor')},
     autoCompleteType: true,
+    autoComplete: true,
     numberOfLines: true,
     letterSpacing: true,
     returnKeyLabel: true,

package/Libraries/Components/TextInput/TextInput.js

@@ -146,10 +146,10 @@ export type KeyboardType =
   | 'phone-pad'
   | 'number-pad'
   | 'decimal-pad'
+  | 'url'
   // iOS-only
   | 'ascii-capable'
   | 'numbers-and-punctuation'
-  | 'url'
   | 'name-phone-pad'
   | 'twitter'
   | 'web-search'
@@ -331,19 +331,43 @@ type AndroidProps = $ReadOnly<{|
    *
    * @platform android
    */
-  autoCompleteType?: ?(
+  autoComplete?: ?(
+    | 'birthdate-day'
+    | 'birthdate-full'
+    | 'birthdate-month'
+    | 'birthdate-year'
     | 'cc-csc'
     | 'cc-exp'
+    | 'cc-exp-day'
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
     | 'email'
+    | 'gender'
     | 'name'
+    | 'name-family'
+    | 'name-given'
+    | 'name-middle'
+    | 'name-middle-initial'
+    | 'name-prefix'
+    | 'name-suffix'
     | 'password'
+    | 'password-new'
+    | 'postal-address'
+    | 'postal-address-country'
+    | 'postal-address-extended'
+    | 'postal-address-extended-postal-code'
+    | 'postal-address-locality'
+    | 'postal-address-region'
     | 'postal-code'
     | 'street-address'
+    | 'sms-otp'
     | 'tel'
+    | 'tel-country-code'
+    | 'tel-national'
+    | 'tel-device'
     | 'username'
+    | 'username-new'
     | 'off'
   ),
 
@@ -501,6 +525,7 @@ export type Props = $ReadOnly<{|
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *iOS Only*
    *
@@ -508,7 +533,6 @@ export type Props = $ReadOnly<{|
    *
    * - `ascii-capable`
    * - `numbers-and-punctuation`
-   * - `url`
    * - `name-phone-pad`
    * - `twitter`
    * - `web-search`
@@ -1073,7 +1097,9 @@ function InternalTextInput(props: Props): React.Node {
     () => ({
       onPress: (event: PressEvent) => {
         if (props.editable !== false) {
-          nullthrows(inputRef.current).focus();
+          if (inputRef.current != null) {
+            inputRef.current.focus();
+          }
         }
       },
       onPressIn: props.onPressIn,
@@ -1137,6 +1163,7 @@ function InternalTextInput(props: Props): React.Node {
   } else if (Platform.OS === 'android') {
     const style = [props.style];
     const autoCapitalize = props.autoCapitalize || 'sentences';
+    const placeholder = props.placeholder ?? '';
     let children = props.children;
     const childCount = React.Children.count(children);
     invariant(
@@ -1179,6 +1206,7 @@ function InternalTextInput(props: Props): React.Node {
          * to get fixed */
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
+        placeholder={placeholder}
         selection={selection}
         style={style}
         text={text}

package/Libraries/Components/TextInput/TextInputState.js

@@ -110,7 +110,7 @@ function blurTextInput(textField: ?ComponentRef) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
-        'focusTextInput must be called with a host component. Passing a react tag is deprecated.',
+        'blurTextInput must be called with a host component. Passing a react tag is deprecated.',
       );
     }
 

package/Libraries/Components/Touchable/Touchable.js

@@ -418,6 +418,7 @@ const TouchableMixin = {
    * @param {SyntheticEvent} e Synthetic event from event system.
    *
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderGrant: function(e: PressEvent) {
     const dispatchID = e.currentTarget;
     // Since e is used in a callback invoked on another event loop
@@ -459,6 +460,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderRelease` event.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderRelease: function(e: PressEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_RELEASE, e);
@@ -467,6 +469,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderTerminate` event.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderTerminate: function(e: PressEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_TERMINATED, e);
@@ -475,6 +478,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderMove` event.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderMove: function(e: PressEvent) {
     // Measurement may not have returned yet.
     if (!this.state.touchable.positionOnActivate) {
@@ -560,6 +564,7 @@ const TouchableMixin = {
    * element that was blurred just prior to this. This can be overridden when
    * using `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleFocus: function(e: Event) {
     this.props.onFocus && this.props.onFocus(e);
   },
@@ -572,6 +577,7 @@ const TouchableMixin = {
    * This can be overridden when using
    * `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleBlur: function(e: Event) {
     this.props.onBlur && this.props.onBlur(e);
   },
@@ -665,6 +671,7 @@ const TouchableMixin = {
     }
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _handleQueryLayout: function(
     l: number,
     t: number,
@@ -691,11 +698,13 @@ const TouchableMixin = {
     );
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _handleDelay: function(e: PressEvent) {
     this.touchableDelayTimeout = null;
     this._receiveSignal(Signals.DELAY, e);
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _handleLongDelay: function(e: PressEvent) {
     this.longPressDelayTimeout = null;
     const curState = this.state.touchable.touchState;
@@ -715,6 +724,7 @@ const TouchableMixin = {
    * @throws Error if invalid state transition or unrecognized signal.
    * @sideeffects
    */
+  // $FlowFixMe[signature-verification-failure]
   _receiveSignal: function(signal: Signal, e: PressEvent) {
     const responderID = this.state.touchable.responderID;
     const curState = this.state.touchable.touchState;
@@ -766,6 +776,7 @@ const TouchableMixin = {
     );
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _savePressInLocation: function(e: PressEvent) {
     const touch = extractSingleTouch(e.nativeEvent);
     const pageX = touch && touch.pageX;
@@ -797,6 +808,7 @@ const TouchableMixin = {
    * @param {Event} e Native event.
    * @sideeffects
    */
+  // $FlowFixMe[signature-verification-failure]
   _performSideEffectsForTransition: function(
     curState: State,
     nextState: State,
@@ -858,11 +870,13 @@ const TouchableMixin = {
     this.touchableDelayTimeout = null;
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _startHighlight: function(e: PressEvent) {
     this._savePressInLocation(e);
     this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _endHighlight: function(e: PressEvent) {
     if (this.touchableHandleActivePressOut) {
       if (

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -183,8 +183,8 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
       onPress: this.props.onPress,
       onPressIn: event => {
         if (Platform.OS === 'android') {
-          this._dispatchPressedStateChange(true);
           this._dispatchHotspotUpdate(event);
+          this._dispatchPressedStateChange(true);
         }
         if (this.props.onPressIn != null) {
           this.props.onPressIn(event);

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -137,7 +137,7 @@ class TouchableOpacity extends React.Component<Props, State> {
   _createPressabilityConfig(): PressabilityConfig {
     return {
       cancelable: !this.props.rejectResponderTermination,
-      disabled: this.props.disabled,
+      disabled: this.props.disabled ?? this.props.accessibilityState?.disabled,
       hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
@@ -188,6 +188,7 @@ class TouchableOpacity extends React.Component<Props, State> {
     Animated.timing(this.state.anim, {
       toValue,
       duration,
+      // $FlowFixMe[method-unbinding]
       easing: Easing.inOut(Easing.quad),
       useNativeDriver: true,
     }).start();
@@ -215,13 +216,21 @@ class TouchableOpacity extends React.Component<Props, State> {
       ...eventHandlersWithoutBlurAndFocus
     } = this.state.pressability.getEventHandlers();
 
+    const accessibilityState =
+      this.props.disabled != null
+        ? {
+            ...this.props.accessibilityState,
+            disabled: this.props.disabled,
+          }
+        : this.props.accessibilityState;
+
     return (
       <Animated.View
         accessible={this.props.accessible !== false}
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityState={this.props.accessibilityState}
+        accessibilityState={accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
         accessibilityValue={this.props.accessibilityValue}

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -8,78 +8,145 @@
  * @flow
  */
 
-'use strict';
-import DeprecatedImageStylePropTypes from '../../DeprecatedPropTypes/DeprecatedImageStylePropTypes';
-import DeprecatedTextStylePropTypes from '../../DeprecatedPropTypes/DeprecatedTextStylePropTypes';
-import DeprecatedViewStylePropTypes from '../../DeprecatedPropTypes/DeprecatedViewStylePropTypes';
+import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 import processColor from '../../StyleSheet/processColor';
 import processTransform from '../../StyleSheet/processTransform';
 import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
-type ReturnBoolType = <V>(V) => true;
-type BoolifiedDeprecatedViewStylePropTypes = $ObjMap<
-  typeof DeprecatedViewStylePropTypes,
-  ReturnBoolType,
->;
-type BoolifiedDeprecatedTextStylePropTypes = $ObjMapi<
-  typeof DeprecatedTextStylePropTypes,
-  ReturnBoolType,
->;
-type BoolifiedDeprecatedImageStylePropTypes = $ObjMapi<
-  typeof DeprecatedImageStylePropTypes,
-  ReturnBoolType,
->;
+const colorAttributes = {process: processColor};
 
-type StyleAttributesType = {
-  ...BoolifiedDeprecatedViewStylePropTypes,
-  ...BoolifiedDeprecatedTextStylePropTypes,
-  ...BoolifiedDeprecatedImageStylePropTypes,
-  transform: $ReadOnly<{|process: typeof processTransform|}> | true,
-  shadowOffset: $ReadOnly<{|diff: typeof sizesDiffer|}> | true,
-  backgroundColor: typeof colorAttributes | true,
-  borderBottomColor: typeof colorAttributes | true,
-  borderColor: typeof colorAttributes | true,
-  borderLeftColor: typeof colorAttributes | true,
-  borderRightColor: typeof colorAttributes | true,
-  borderTopColor: typeof colorAttributes | true,
-  borderStartColor: typeof colorAttributes | true,
-  borderEndColor: typeof colorAttributes | true,
-  color: typeof colorAttributes | true,
-  shadowColor: typeof colorAttributes | true,
-  textDecorationColor: typeof colorAttributes | true,
-  tintColor: typeof colorAttributes | true,
-  textShadowColor: typeof colorAttributes | true,
-  overlayColor: typeof colorAttributes | true,
-  ...
-};
+const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
+  /**
+   * Layout
+   */
+  alignContent: true,
+  alignItems: true,
+  alignSelf: true,
+  aspectRatio: true,
+  borderBottomWidth: true,
+  borderEndWidth: true,
+  borderLeftWidth: true,
+  borderRightWidth: true,
+  borderStartWidth: true,
+  borderTopWidth: true,
+  borderWidth: true,
+  bottom: true,
+  direction: true,
+  display: true,
+  end: true,
+  flex: true,
+  flexBasis: true,
+  flexDirection: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexWrap: true,
+  height: true,
+  justifyContent: true,
+  left: true,
+  margin: true,
+  marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginLeft: true,
+  marginRight: true,
+  marginStart: true,
+  marginTop: true,
+  marginVertical: true,
+  maxHeight: true,
+  maxWidth: true,
+  minHeight: true,
+  minWidth: true,
+  overflow: true,
+  padding: true,
+  paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingLeft: true,
+  paddingRight: true,
+  paddingStart: true,
+  paddingTop: true,
+  paddingVertical: true,
+  position: true,
+  right: true,
+  start: true,
+  top: true,
+  width: true,
+  zIndex: true,
 
-const ReactNativeStyleAttributes: StyleAttributesType = {};
+  /**
+   * Shadow
+   */
+  elevation: true,
+  shadowColor: colorAttributes,
+  shadowOffset: {diff: sizesDiffer},
+  shadowOpacity: true,
+  shadowRadius: true,
 
-for (const attributeName of Object.keys({
-  ...DeprecatedViewStylePropTypes,
-  ...DeprecatedTextStylePropTypes,
-  ...DeprecatedImageStylePropTypes,
-})) {
-  ReactNativeStyleAttributes[attributeName] = true;
-}
+  /**
+   * Transform
+   */
+  decomposedMatrix: true, // @deprecated
+  rotation: true, // @deprecated
+  scaleX: true, // @deprecated
+  scaleY: true, // @deprecated
+  transform: {process: processTransform},
+  transformMatrix: true, // @deprecated
+  translateX: true, // @deprecated
+  translateY: true, // @deprecated
 
-ReactNativeStyleAttributes.transform = {process: processTransform};
-ReactNativeStyleAttributes.shadowOffset = {diff: sizesDiffer};
+  /**
+   * View
+   */
+  backfaceVisibility: true,
+  backgroundColor: colorAttributes,
+  borderBottomColor: colorAttributes,
+  borderBottomEndRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderBottomStartRadius: true,
+  borderColor: colorAttributes,
+  borderEndColor: colorAttributes,
+  borderLeftColor: colorAttributes,
+  borderRadius: true,
+  borderRightColor: colorAttributes,
+  borderStartColor: colorAttributes,
+  borderStyle: true,
+  borderTopColor: colorAttributes,
+  borderTopEndRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderTopStartRadius: true,
+  opacity: true,
 
-const colorAttributes = {process: processColor};
-ReactNativeStyleAttributes.backgroundColor = colorAttributes;
-ReactNativeStyleAttributes.borderBottomColor = colorAttributes;
-ReactNativeStyleAttributes.borderColor = colorAttributes;
-ReactNativeStyleAttributes.borderLeftColor = colorAttributes;
-ReactNativeStyleAttributes.borderRightColor = colorAttributes;
-ReactNativeStyleAttributes.borderTopColor = colorAttributes;
-ReactNativeStyleAttributes.borderStartColor = colorAttributes;
-ReactNativeStyleAttributes.borderEndColor = colorAttributes;
-ReactNativeStyleAttributes.color = colorAttributes;
-ReactNativeStyleAttributes.shadowColor = colorAttributes;
-ReactNativeStyleAttributes.textDecorationColor = colorAttributes;
-ReactNativeStyleAttributes.tintColor = colorAttributes;
-ReactNativeStyleAttributes.textShadowColor = colorAttributes;
-ReactNativeStyleAttributes.overlayColor = colorAttributes;
+  /**
+   * Text
+   */
+  color: colorAttributes,
+  fontFamily: true,
+  fontSize: true,
+  fontStyle: true,
+  fontVariant: true,
+  fontWeight: true,
+  includeFontPadding: true,
+  letterSpacing: true,
+  lineHeight: true,
+  textAlign: true,
+  textAlignVertical: true,
+  textDecorationColor: colorAttributes,
+  textDecorationLine: true,
+  textDecorationStyle: true,
+  textShadowColor: colorAttributes,
+  textShadowOffset: true,
+  textShadowRadius: true,
+  textTransform: true,
+  writingDirection: true,
+
+  /**
+   * Image
+   */
+  overlayColor: colorAttributes,
+  resizeMode: true,
+  tintColor: colorAttributes,
+};
 
 module.exports = ReactNativeStyleAttributes;