@office-iss/react-native-win32 0.68.0 → 0.69.0-preview.3

package/CHANGELOG.md

@@ -1,45 +1,192 @@
 # Change Log - @office-iss/react-native-win32
 
-This log was last generated on Mon, 04 Apr 2022 15:11:23 GMT and should not be manually modified.
+This log was last generated on Mon, 06 Jun 2022 15:08:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 0.68.0
+## 0.69.0-preview.3
 
-Mon, 04 Apr 2022 15:11:23 GMT
+Mon, 06 Jun 2022 15:08:42 GMT
 
-### Patches
+### Changes
 
-- Bump RN Dependency (34109996+chiaramooney@users.noreply.github.com)
-- Promote 0.68 to latest (34109996+chiaramooney@users.noreply.github.com)
-- Bump @react-native-windows/virtualized-list to v0.68.0
+- Bump @react-native-windows/virtualized-list to v0.69.0-preview.2
 
-## 0.68.0-preview.3
+## 0.69.0-preview.2
 
-Mon, 21 Mar 2022 15:08:45 GMT
+Mon, 16 May 2022 15:09:01 GMT
 
 ### Changes
 
-- Integrate 0.68.0-rc.2 (34109996+chiaramooney@users.noreply.github.com)
-- Bump @react-native-windows/virtualized-list to v0.68.0-preview.3
+- Upgrade to @react-native-community/cli@8.0.0-alpha.6 (jthysell@microsoft.com)
 
-## 0.68.0-preview.2
+## 0.69.0-preview.1
 
-Mon, 14 Feb 2022 16:08:39 GMT
+Wed, 04 May 2022 23:30:22 GMT
 
 ### Changes
 
-- [0.68] Bump minimum Node version to 14 (jthysell@microsoft.com)
-- Bump @react-native-windows/virtualized-list to v0.68.0-preview.2
+- Promote 0.69 to preview (jthysell@microsoft.com)
+- Bump @react-native-windows/virtualized-list to v0.69.0-preview.1
 
-## 0.68.0-preview.1
+## 0.0.0-canary.148
 
-Mon, 07 Feb 2022 16:09:26 GMT
+Mon, 02 May 2022 21:26:42 GMT
 
 ### Changes
 
-- Promote 0.68 to preview (ngerlem@microsoft.com)
-- Bump @react-native-windows/virtualized-list to v0.68.0-preview.1
+- Implement no-hide-accessibility (34109996+chiaramooney@users.noreply.github.com)
+- Add ListItem as an accessibilityRole type and add a List, ListItem, ControllerFor test example (patboyd@microsoft.com)
+
+## 0.0.0-canary.147
+
+Wed, 27 Apr 2022 05:10:23 GMT
+
+### Changes
+
+- Integrate 4/15 Test (34109996+chiaramooney@users.noreply.github.com)
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.41
+- Bump @rnw-scripts/eslint-config to v1.1.12
+- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.0.6
+- Bump react-native-platform-override to v1.6.11
+
+## 0.0.0-canary.146
+
+Thu, 21 Apr 2022 05:09:33 GMT
+
+### Changes
+
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.40
+- Bump react-native-platform-override to v1.6.10
+
+## 0.0.0-canary.145
+
+Thu, 14 Apr 2022 05:09:19 GMT
+
+### Changes
+
+- Integrate RN Nightly Build 4/11 (34109996+chiaramooney@users.noreply.github.com)
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.39
+
+## 0.0.0-canary.144
+
+Tue, 12 Apr 2022 05:10:37 GMT
+
+### Changes
+
+- Fix Overrides (34109996+chiaramooney@users.noreply.github.com)
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.38
+- Bump react-native-platform-override to v1.6.9
+
+## 0.0.0-canary.143
+
+Sat, 09 Apr 2022 05:10:10 GMT
+
+### Changes
+
+- integrate 4/4 (email not defined)
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.37
+
+## 0.0.0-canary.142
+
+Tue, 05 Apr 2022 05:10:13 GMT
+
+### Changes
+
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.36
+- Bump react-native-platform-override to v1.6.8
+
+## 0.0.0-canary.141
+
+Fri, 01 Apr 2022 05:09:58 GMT
+
+### Changes
+
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.35
+- Bump react-native-platform-override to v1.6.7
+
+## 0.0.0-canary.140
+
+Thu, 31 Mar 2022 05:10:18 GMT
+
+### Changes
+
+- Integrate 3/11 (34109996+chiaramooney@users.noreply.github.com)
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.34
+
+## 0.0.0-canary.139
+
+Tue, 29 Mar 2022 05:09:49 GMT
+
+### Changes
+
+- Integrate 3/11 (34109996+chiaramooney@users.noreply.github.com)
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.33
+
+## 0.0.0-canary.138
+
+Thu, 17 Mar 2022 05:09:18 GMT
+
+### Changes
+
+- integrates 2/27/22 (email not defined)
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.32
+
+## 0.0.0-canary.137
+
+Wed, 09 Mar 2022 06:09:07 GMT
+
+### Changes
+
+- Upgrade @types/react-native (53799235+ZihanChen-MSFT@users.noreply.github.com)
+
+## 0.0.0-canary.136
+
+Sat, 05 Mar 2022 06:08:58 GMT
+
+### Changes
+
+- integrate 2/13/2022 Nightly RN Build (email not defined)
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.31
+
+## 0.0.0-canary.135
+
+Sun, 13 Feb 2022 06:08:34 GMT
+
+### Changes
+
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.30
+- Bump react-native-platform-override to v1.6.6
+
+## 0.0.0-canary.134
+
+Sat, 12 Feb 2022 06:08:36 GMT
+
+### Changes
+
+- Share monorepo-friendly metro config between dev packages (ngerlem@microsoft.com)
+
+## 0.0.0-canary.133
+
+Fri, 11 Feb 2022 06:08:20 GMT
+
+### Changes
+
+- Integrate Feb 6 Nightly RN Build (ngerlem@microsoft.com)
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.29
+- Bump react-native-platform-override to v1.6.5
+
+## 0.0.0-canary.132
+
+Wed, 09 Feb 2022 06:09:35 GMT
+
+### Changes
+
+- Bump minimum Node version to 14 (jthysell@microsoft.com)
+- Bump @react-native-windows/virtualized-list to v0.0.0-canary.28
+- Bump @rnw-scripts/eslint-config to v1.1.11
+- Bump @rnw-scripts/jest-out-of-tree-snapshot-resolver to v1.0.5
+- Bump react-native-platform-override to v1.6.5
 
 ## 0.0.0-canary.131
 

package/IntegrationTests/BUCK

@@ -17,7 +17,10 @@ rn_library(
             "websocket_integration_test_server.js",
         ],
     ),
-    labels = ["supermodule:xplat/default/public.react_native.tests"],
+    labels = [
+        "pfh:ReactNative_CommonInfrastructurePlaceholder",
+        "supermodule:xplat/default/public.react_native.tests",
+    ],
     skip_processors = True,
     visibility = ["PUBLIC"],
     deps = [

package/Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -143,6 +143,13 @@ const ActionSheetIOS = {
       successCallback,
     );
   },
+
+  dismissActionSheet: () => {
+    invariant(RCTActionSheetManager, "ActionSheetManager doesn't exist");
+    if (typeof RCTActionSheetManager.dismissActionSheet === 'function') {
+      RCTActionSheetManager.dismissActionSheet();
+    }
+  },
 };
 
 module.exports = ActionSheetIOS;

package/Libraries/ActionSheetIOS/NativeActionSheetManager.js

@@ -47,6 +47,7 @@ export interface Spec extends TurboModule {
     |}) => void,
     successCallback: (completed: boolean, activityType: ?string) => void,
   ) => void;
+  +dismissActionSheet?: () => void;
 }
 
 export default (TurboModuleRegistry.get<Spec>('ActionSheetManager'): ?Spec);

package/Libraries/Alert/Alert.win32.js

@@ -50,7 +50,7 @@ class Alert {
       message || '',
       buttons,
       options,
-      (buttonIndex) => {
+      buttonIndex => {
         if (
           buttonIndex >= 0 &&
           buttons &&

package/Libraries/Animated/AnimatedImplementation.js

@@ -91,7 +91,7 @@ const diffClamp = function (
 
 const _combineCallbacks = function (
   callback: ?EndCallback,
-  config: {...AnimationConfig, ...},
+  config: $ReadOnly<{...AnimationConfig, ...}>,
 ) {
   if (callback && config.onComplete) {
     return (...args) => {

package/Libraries/Animated/NativeAnimatedHelper.js

@@ -90,6 +90,18 @@ const API = {
       NativeAnimatedModule.createAnimatedNode(tag, config),
     );
   },
+  updateAnimatedNodeConfig: function (
+    tag: number,
+    config: AnimatedNodeConfig,
+  ): void {
+    invariant(NativeAnimatedModule, 'Native animated module is not available');
+    if (typeof NativeAnimatedModule.updateAnimatedNodeConfig === 'function') {
+      API.queueOperation(() =>
+        // $FlowIgnore[not-a-function] - checked above
+        NativeAnimatedModule.updateAnimatedNodeConfig(tag, config),
+      );
+    }
+  },
   startListeningToAnimatedNodeValue: function (tag: number) {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
     API.queueOperation(() =>
@@ -222,22 +234,36 @@ const API = {
 /**
  * Styles allowed by the native animated implementation.
  *
- * In general native animated implementation should support any numeric property that doesn't need
- * to be updated through the shadow view hierarchy (all non-layout properties).
+ * In general native animated implementation should support any numeric or color property that
+ * doesn't need to be updated through the shadow view hierarchy (all non-layout properties).
  */
+const SUPPORTED_COLOR_STYLES = {
+  backgroundColor: true,
+  borderBottomColor: true,
+  borderColor: true,
+  borderEndColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderStartColor: true,
+  borderTopColor: true,
+  color: true,
+  tintColor: true,
+};
+
 const SUPPORTED_STYLES = {
-  opacity: true,
-  transform: true,
-  borderRadius: true,
+  ...SUPPORTED_COLOR_STYLES,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
+  borderRadius: true,
   borderTopEndRadius: true,
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
   borderTopStartRadius: true,
   elevation: true,
+  opacity: true,
+  transform: true,
   zIndex: true,
   /* ios styles */
   shadowOpacity: true,
@@ -282,6 +308,22 @@ function addWhitelistedInterpolationParam(param: string): void {
   SUPPORTED_INTERPOLATION_PARAMS[param] = true;
 }
 
+function isSupportedColorStyleProp(prop: string): boolean {
+  return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
+}
+
+function isSupportedStyleProp(prop: string): boolean {
+  return SUPPORTED_STYLES.hasOwnProperty(prop);
+}
+
+function isSupportedTransformProp(prop: string): boolean {
+  return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
+}
+
+function isSupportedInterpolationParam(param: string): boolean {
+  return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
+}
+
 function validateTransform(
   configs: Array<
     | {
@@ -299,7 +341,7 @@ function validateTransform(
   >,
 ): void {
   configs.forEach(config => {
-    if (!SUPPORTED_TRANSFORMS.hasOwnProperty(config.property)) {
+    if (!isSupportedTransformProp(config.property)) {
       throw new Error(
         `Property '${config.property}' is not supported by native animated module`,
       );
@@ -309,7 +351,7 @@ function validateTransform(
 
 function validateStyles(styles: {[key: string]: ?number, ...}): void {
   for (const key in styles) {
-    if (!SUPPORTED_STYLES.hasOwnProperty(key)) {
+    if (!isSupportedStyleProp(key)) {
       throw new Error(
         `Style property '${key}' is not supported by native animated module`,
       );
@@ -319,7 +361,7 @@ function validateStyles(styles: {[key: string]: ?number, ...}): void {
 
 function validateInterpolation(config: InterpolationConfigType): void {
   for (const key in config) {
-    if (!SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(key)) {
+    if (!isSupportedInterpolationParam(key)) {
       throw new Error(
         `Interpolation property '${key}' is not supported by native animated module`,
       );
@@ -342,7 +384,7 @@ function assertNativeAnimatedModule(): void {
 let _warnedMissingNativeAnimated = false;
 
 function shouldUseNativeDriver(
-  config: {...AnimationConfig, ...} | EventConfig,
+  config: $ReadOnly<{...AnimationConfig, ...}> | EventConfig,
 ): boolean {
   if (config.useNativeDriver == null) {
     console.warn(
@@ -385,6 +427,10 @@ function transformDataType(value: number | string): number | string {
 
 module.exports = {
   API,
+  isSupportedColorStyleProp,
+  isSupportedStyleProp,
+  isSupportedTransformProp,
+  isSupportedInterpolationParam,
   addWhitelistedStyleProp,
   addWhitelistedTransformProp,
   addWhitelistedInterpolationParam,

package/Libraries/Animated/NativeAnimatedModule.js

@@ -29,6 +29,7 @@ export interface Spec extends TurboModule {
   +startOperationBatch: () => void;
   +finishOperationBatch: () => void;
   +createAnimatedNode: (tag: number, config: AnimatedNodeConfig) => void;
+  +updateAnimatedNodeConfig?: (tag: number, config: AnimatedNodeConfig) => void;
   +getValue: (tag: number, saveValueCallback: SaveValueCallback) => void;
   +startListeningToAnimatedNodeValue: (tag: number) => void;
   +stopListeningToAnimatedNodeValue: (tag: number) => void;

package/Libraries/Animated/NativeAnimatedTurboModule.js

@@ -29,6 +29,7 @@ export interface Spec extends TurboModule {
   +startOperationBatch: () => void;
   +finishOperationBatch: () => void;
   +createAnimatedNode: (tag: number, config: AnimatedNodeConfig) => void;
+  +updateAnimatedNodeConfig?: (tag: number, config: AnimatedNodeConfig) => void;
   +getValue: (tag: number, saveValueCallback: SaveValueCallback) => void;
   +startListeningToAnimatedNodeValue: (tag: number) => void;
   +stopListeningToAnimatedNodeValue: (tag: number) => void;

package/Libraries/Animated/animations/TimingAnimation.js

@@ -19,10 +19,11 @@ const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimationConfig, EndCallback} from './Animation';
+import type {RgbaValue} from '../nodes/AnimatedColor';
 
 import AnimatedColor from '../nodes/AnimatedColor';
 
-export type TimingAnimationConfig = {
+export type TimingAnimationConfig = $ReadOnly<{
   ...AnimationConfig,
   toValue:
     | number
@@ -33,27 +34,21 @@ export type TimingAnimationConfig = {
         ...
       }
     | AnimatedValueXY
-    | {
-        r: number,
-        g: number,
-        b: number,
-        a: number,
-        ...
-      }
+    | RgbaValue
     | AnimatedColor
     | AnimatedInterpolation,
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
-};
+}>;
 
-export type TimingAnimationConfigSingle = {
+export type TimingAnimationConfigSingle = $ReadOnly<{
   ...AnimationConfig,
   toValue: number | AnimatedValue | AnimatedInterpolation,
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
-};
+}>;
 
 let _easeInOut;
 function easeInOut() {

package/Libraries/Animated/createAnimatedComponent.js

@@ -24,8 +24,8 @@ const setAndForwardRef = require('../Utilities/setAndForwardRef');
 let animatedComponentNextId = 1;
 
 export type AnimatedComponentType<
-  Props: {+[string]: mixed, ...},
-  Instance,
+  -Props: {+[string]: mixed, ...},
+  +Instance = mixed,
 > = React.AbstractComponent<
   $ObjMap<
     Props &

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -14,12 +14,15 @@ import AnimatedValue from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import {processColorObject} from '../../StyleSheet/PlatformColorValueTypes';
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {NativeColorValue} from '../../StyleSheet/PlatformColorValueTypes';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 
 type ColorListenerCallback = (value: string) => mixed;
-type RgbaValue = {
+export type RgbaValue = {
   +r: number,
   +g: number,
   +b: number,
@@ -38,26 +41,37 @@ const defaultColor: RgbaValue = {r: 0, g: 0, b: 0, a: 1.0};
 let _uniqueId = 1;
 
 /* eslint no-bitwise: 0 */
-function processColor(color?: ?ColorValue): ?(RgbaValue | NativeColorValue) {
+function processColor(
+  color?: ?(ColorValue | RgbaValue),
+): ?(RgbaValue | NativeColorValue) {
   if (color === undefined || color === null) {
     return null;
   }
 
-  let normalizedColor = normalizeColor(color);
+  if (isRgbaValue(color)) {
+    // $FlowIgnore[incompatible-cast] - Type is verified above
+    return (color: RgbaValue);
+  }
+
+  let normalizedColor: ?ProcessedColorValue = normalizeColor(
+    // $FlowIgnore[incompatible-cast] - Type is verified above
+    (color: ColorValue),
+  );
   if (normalizedColor === undefined || normalizedColor === null) {
     return null;
   }
 
   if (typeof normalizedColor === 'object') {
-    const processedColorObj = processColorObject(normalizedColor);
+    const processedColorObj: ?NativeColorValue =
+      processColorObject(normalizedColor);
     if (processedColorObj != null) {
       return processedColorObj;
     }
   } else if (typeof normalizedColor === 'number') {
-    const r = (normalizedColor & 0xff000000) >>> 24;
-    const g = (normalizedColor & 0x00ff0000) >>> 16;
-    const b = (normalizedColor & 0x0000ff00) >>> 8;
-    const a = (normalizedColor & 0x000000ff) / 255;
+    const r: number = (normalizedColor & 0xff000000) >>> 24;
+    const g: number = (normalizedColor & 0x00ff0000) >>> 16;
+    const b: number = (normalizedColor & 0x0000ff00) >>> 8;
+    const a: number = (normalizedColor & 0x000000ff) / 255;
 
     return {r, g, b, a};
   }
@@ -90,6 +104,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
   g: AnimatedValue;
   b: AnimatedValue;
   a: AnimatedValue;
+  nativeColor: ?NativeColorValue;
   _listeners: {
     [key: string]: {
       r: string,
@@ -99,13 +114,12 @@ export default class AnimatedColor extends AnimatedWithChildren {
       ...
     },
     ...
-  };
+  } = {};
 
   constructor(valueIn?: ?(RgbaValue | RgbaAnimatedValue | ColorValue)) {
     super();
     let value: RgbaValue | RgbaAnimatedValue | ColorValue =
-      valueIn || defaultColor;
-
+      valueIn ?? defaultColor;
     if (isRgbaAnimatedValue(value)) {
       // $FlowIgnore[incompatible-cast] - Type is verified above
       const rgbaAnimatedValue: RgbaAnimatedValue = (value: RgbaAnimatedValue);
@@ -114,32 +128,65 @@ export default class AnimatedColor extends AnimatedWithChildren {
       this.b = rgbaAnimatedValue.b;
       this.a = rgbaAnimatedValue.a;
     } else {
-      // Handle potential parsable string color or platform color object
-      if (!isRgbaValue(value)) {
-        // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
-        value = processColor((value: ColorValue)) || {r: 0, g: 0, b: 0, a: 1.0};
-        // TODO: support platform color
+      const processedColor: RgbaValue | NativeColorValue =
+        // $FlowIgnore[incompatible-cast] - Type is verified above
+        processColor((value: ColorValue | RgbaValue)) ?? defaultColor;
+      let initColor: RgbaValue = defaultColor;
+      if (isRgbaValue(processedColor)) {
+        // $FlowIgnore[incompatible-cast] - Type is verified above
+        initColor = (processedColor: RgbaValue);
+      } else {
+        // $FlowIgnore[incompatible-cast] - Type is verified above
+        this.nativeColor = (processedColor: NativeColorValue);
       }
 
-      // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
-      const rgbaValue: RgbaValue = (value: RgbaValue);
-      this.r = new AnimatedValue(rgbaValue.r);
-      this.g = new AnimatedValue(rgbaValue.g);
-      this.b = new AnimatedValue(rgbaValue.b);
-      this.a = new AnimatedValue(rgbaValue.a);
+      this.r = new AnimatedValue(initColor.r);
+      this.g = new AnimatedValue(initColor.g);
+      this.b = new AnimatedValue(initColor.b);
+      this.a = new AnimatedValue(initColor.a);
+
+      if (this.nativeColor) {
+        if (!this.__isNative) {
+          this.__makeNative();
+        }
+      }
     }
-    this._listeners = {};
   }
 
   /**
    * Directly set the value. This will stop any animations running on the value
    * and update all the bound properties.
    */
-  setValue(value: {r: number, g: number, b: number, a: number, ...}): void {
-    this.r.setValue(value.r);
-    this.g.setValue(value.g);
-    this.b.setValue(value.b);
-    this.a.setValue(value.a);
+  setValue(value: RgbaValue | ColorValue): void {
+    this.nativeColor = null;
+
+    const processedColor: RgbaValue | NativeColorValue =
+      processColor(value) ?? defaultColor;
+    if (isRgbaValue(processedColor)) {
+      // $FlowIgnore[incompatible-cast] - Type is verified above
+      const rgbaValue: RgbaValue = (processedColor: RgbaValue);
+      this.r.setValue(rgbaValue.r);
+      this.g.setValue(rgbaValue.g);
+      this.b.setValue(rgbaValue.b);
+      this.a.setValue(rgbaValue.a);
+    } else {
+      // $FlowIgnore[incompatible-cast] - Type is verified above
+      this.nativeColor = (processedColor: NativeColorValue);
+    }
+
+    if (this.nativeColor) {
+      if (!this.__isNative) {
+        this.__makeNative();
+      }
+
+      const nativeTag = this.__getNativeTag();
+      NativeAnimatedHelper.API.setWaitingForIdentifier(nativeTag.toString());
+      NativeAnimatedHelper.API.updateAnimatedNodeConfig(
+        nativeTag,
+        this.__getNativeConfig(),
+      );
+      NativeAnimatedHelper.API.unsetWaitingForIdentifier(nativeTag.toString());
+    }
   }
 
   /**
@@ -147,7 +194,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
    * via `setValue`, an animation, or `Animated.event`. Useful for compensating
    * things like the start of a pan gesture.
    */
-  setOffset(offset: {r: number, g: number, b: number, a: number, ...}): void {
+  setOffset(offset: RgbaValue): void {
     this.r.setOffset(offset.r);
     this.g.setOffset(offset.g);
     this.b.setOffset(offset.b);
@@ -263,4 +310,23 @@ export default class AnimatedColor extends AnimatedWithChildren {
     this.a.__removeChild(this);
     super.__detach();
   }
+
+  __makeNative(platformConfig: ?PlatformConfig) {
+    this.r.__makeNative(platformConfig);
+    this.g.__makeNative(platformConfig);
+    this.b.__makeNative(platformConfig);
+    this.a.__makeNative(platformConfig);
+    super.__makeNative(platformConfig);
+  }
+
+  __getNativeConfig(): {...} {
+    return {
+      type: 'color',
+      r: this.r.__getNativeTag(),
+      g: this.g.__getNativeTag(),
+      b: this.b.__getNativeTag(),
+      a: this.a.__getNativeTag(),
+      nativeColor: this.nativeColor,
+    };
+  }
 }