react-native 0.68.2 → 0.69.0-rc.2

package/Libraries/Lists/VirtualizedList.js

@@ -34,6 +34,7 @@ import type {
   ViewToken,
   ViewabilityConfigCallbackPair,
 } from './ViewabilityHelper';
+import type {LayoutEvent} from '../Types/CoreEventTypes';
 import {
   VirtualizedListCellContextProvider,
   VirtualizedListContext,
@@ -384,7 +385,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   scrollToEnd(params?: ?{animated?: ?boolean, ...}) {
     const animated = params ? params.animated : true;
     const veryLast = this.props.getItemCount(this.props.data) - 1;
-    const frame = this._getFrameMetricsApprox(veryLast);
+    const frame = this.__getFrameMetricsApprox(veryLast);
     const offset = Math.max(
       0,
       frame.offset +
@@ -458,7 +459,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       });
       return;
     }
-    const frame = this._getFrameMetricsApprox(index);
+    const frame = this.__getFrameMetricsApprox(index);
     const offset =
       Math.max(
         0,
@@ -796,12 +797,17 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     const {
       CellRendererComponent,
       ItemSeparatorComponent,
+      ListHeaderComponent,
+      ListItemComponent,
       data,
+      debug,
       getItem,
       getItemCount,
+      getItemLayout,
       horizontal,
+      renderItem,
     } = this.props;
-    const stickyOffset = this.props.ListHeaderComponent ? 1 : 0;
+    const stickyOffset = ListHeaderComponent ? 1 : 0;
     const end = getItemCount(data) - 1;
     let prevCellKey;
     last = Math.min(end, last);
@@ -816,21 +822,24 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         <CellRenderer
           CellRendererComponent={CellRendererComponent}
           ItemSeparatorComponent={ii < end ? ItemSeparatorComponent : undefined}
+          ListItemComponent={ListItemComponent}
           cellKey={key}
+          debug={debug}
           fillRateHelper={this._fillRateHelper}
+          getItemLayout={getItemLayout}
           horizontal={horizontal}
           index={ii}
           inversionStyle={inversionStyle}
           item={item}
           key={key}
           prevCellKey={prevCellKey}
+          onCellLayout={this._onCellLayout}
           onUpdateSeparators={this._onUpdateSeparators}
-          onLayout={e => this._onCellLayout(e, key, ii)}
           onUnmount={this._onCellUnmount}
-          parentProps={this.props}
           ref={ref => {
             this._cellRefs[key] = ref;
           }}
+          renderItem={renderItem}
         />,
       );
       prevCellKey = key;
@@ -950,8 +959,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           // See if there are any sticky headers in the virtualized space that we need to render.
           for (let ii = firstAfterInitial - 1; ii > lastInitialIndex; ii--) {
             if (stickyIndicesFromProps.has(ii + stickyOffset)) {
-              const initBlock = this._getFrameMetricsApprox(lastInitialIndex);
-              const stickyBlock = this._getFrameMetricsApprox(ii);
+              const initBlock = this.__getFrameMetricsApprox(lastInitialIndex);
+              const stickyBlock = this.__getFrameMetricsApprox(ii);
               const leadSpace =
                 stickyBlock.offset -
                 initBlock.offset -
@@ -968,7 +977,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
                 inversionStyle,
               );
               const trailSpace =
-                this._getFrameMetricsApprox(first).offset -
+                this.__getFrameMetricsApprox(first).offset -
                 (stickyBlock.offset + stickyBlock.length);
               cells.push(
                 <View key="$sticky_trail" style={{[spacerKey]: trailSpace}} />,
@@ -979,9 +988,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           }
         }
         if (!insertedStickySpacer) {
-          const initBlock = this._getFrameMetricsApprox(lastInitialIndex);
+          const initBlock = this.__getFrameMetricsApprox(lastInitialIndex);
           const firstSpace =
-            this._getFrameMetricsApprox(first).offset -
+            this.__getFrameMetricsApprox(first).offset -
             (initBlock.offset + initBlock.length);
           cells.push(
             <View key="$lead_spacer" style={{[spacerKey]: firstSpace}} />,
@@ -1005,14 +1014,14 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         this._hasWarned.keys = true;
       }
       if (!isVirtualizationDisabled && last < itemCount - 1) {
-        const lastFrame = this._getFrameMetricsApprox(last);
+        const lastFrame = this.__getFrameMetricsApprox(last);
         // Without getItemLayout, we limit our tail spacer to the _highestMeasuredFrameIndex to
         // prevent the user for hyperscrolling into un-measured area because otherwise content will
         // likely jump around as it renders in above the viewport.
         const end = this.props.getItemLayout
           ? itemCount - 1
           : Math.min(itemCount - 1, this._highestMeasuredFrameIndex);
-        const endFrame = this._getFrameMetricsApprox(end);
+        const endFrame = this.__getFrameMetricsApprox(end);
         const tailSpacerLength =
           endFrame.offset +
           endFrame.length -
@@ -1119,7 +1128,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         )}
       </VirtualizedListContextProvider>
     );
-    let ret = innerRet;
+    let ret: React.Node = innerRet;
     if (__DEV__) {
       ret = (
         <ScrollView.Context.Consumer>
@@ -1268,7 +1277,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     }
   };
 
-  _onCellLayout(e, cellKey, index) {
+  _onCellLayout = (e: LayoutEvent, cellKey: string, index: number): void => {
     const layout = e.nativeEvent.layout;
     const next = {
       offset: this._selectOffset(layout),
@@ -1301,7 +1310,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
     this._computeBlankness();
     this._updateViewableItems(this.props.data);
-  }
+  };
 
   _onCellUnmount = (cellKey: string) => {
     const curr = this._frames[cellKey];
@@ -1380,7 +1389,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     }
   }
 
-  _onLayout = (e: Object) => {
+  _onLayout = (e: LayoutEvent) => {
     if (this._isNestedWithSameOrientation()) {
       // Need to adjust our scroll metrics to be relative to our containing
       // VirtualizedList before we can make claims about list item viewability
@@ -1395,7 +1404,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     this._maybeCallOnEndReached();
   };
 
-  _onLayoutEmpty = e => {
+  _onLayoutEmpty = (e: LayoutEvent) => {
     this.props.onLayout && this.props.onLayout(e);
   };
 
@@ -1403,12 +1412,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     return this._getCellKey() + '-footer';
   }
 
-  _onLayoutFooter = e => {
+  _onLayoutFooter = (e: LayoutEvent) => {
     this._triggerRemeasureForChildListsInCell(this._getFooterCellKey());
     this._footerLength = this._selectLength(e.nativeEvent.layout);
   };
 
-  _onLayoutHeader = e => {
+  _onLayoutHeader = (e: LayoutEvent) => {
     this._headerLength = this._selectLength(e.nativeEvent.layout);
   };
 
@@ -1419,7 +1428,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     const framesInLayout = [];
     const itemCount = this.props.getItemCount(this.props.data);
     for (let ii = 0; ii < itemCount; ii++) {
-      const frame = this._getFrameMetricsApprox(ii);
+      const frame = this.__getFrameMetricsApprox(ii);
       /* $FlowFixMe[prop-missing] (>=0.68.0 site=react_native_fb) This comment
        * suppresses an error found when Flow v0.68 was deployed. To see the
        * error delete this comment and run Flow. */
@@ -1427,8 +1436,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         framesInLayout.push(frame);
       }
     }
-    const windowTop = this._getFrameMetricsApprox(this.state.first).offset;
-    const frameLast = this._getFrameMetricsApprox(this.state.last);
+    const windowTop = this.__getFrameMetricsApprox(this.state.first).offset;
+    const frameLast = this.__getFrameMetricsApprox(this.state.last);
     const windowLen = frameLast.offset + frameLast.length - windowTop;
     const visTop = this._scrollMetrics.offset;
     const visLen = this._scrollMetrics.visibleLength;
@@ -1642,7 +1651,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     // Mark as high priority if we're close to the start of the first item
     // But only if there are items before the first rendered item
     if (first > 0) {
-      const distTop = offset - this._getFrameMetricsApprox(first).offset;
+      const distTop = offset - this.__getFrameMetricsApprox(first).offset;
       hiPri =
         hiPri || distTop < 0 || (velocity < -2 && distTop < scrollingThreshold);
     }
@@ -1650,7 +1659,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     // But only if there are items after the last rendered item
     if (last < itemCount - 1) {
       const distBottom =
-        this._getFrameMetricsApprox(last).offset - (offset + visibleLength);
+        this.__getFrameMetricsApprox(last).offset - (offset + visibleLength);
       hiPri =
         hiPri ||
         distBottom < 0 ||
@@ -1733,7 +1742,10 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       return;
     }
     this.setState(state => {
-      let newState;
+      let newState: ?(
+        | {first: number, last: number, ...}
+        | $TEMPORARY$object<{first: number, last: number}>
+      );
       const {contentLength, offset, visibleLength} = this._scrollMetrics;
       if (!isVirtualizationDisabled) {
         // If we run this with bogus data, we'll force-render window {first: 0, last: 0},
@@ -1745,14 +1757,14 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           // we'll wipe out the initialNumToRender rendered elements starting at initialScrollIndex.
           // So let's wait until we've scrolled the view to the right place. And until then,
           // we will trust the initialScrollIndex suggestion.
-          if (!this.props.initialScrollIndex || this._scrollMetrics.offset) {
+          if (!this.props.initialScrollIndex || this._hasDoneInitialScroll) {
             newState = computeWindowedRenderLimits(
               this.props.data,
               this.props.getItemCount,
               maxToRenderPerBatchOrDefault(this.props.maxToRenderPerBatch),
               windowSizeOrDefault(this.props.windowSize),
               state,
-              this._getFrameMetricsApprox,
+              this.__getFrameMetricsApprox,
               this._scrollMetrics,
             );
           }
@@ -1815,13 +1827,11 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     return {index, item, key: this._keyExtractor(item, index), isViewable};
   };
 
-  _getFrameMetricsApprox = (
-    index: number,
-  ): {
+  __getFrameMetricsApprox: (index: number) => {
     length: number,
     offset: number,
     ...
-  } => {
+  } = index => {
     const frame = this._getFrameMetrics(index);
     if (frame && frame.index === index) {
       // check for invalid frames due to row re-ordering
@@ -1888,32 +1898,29 @@ type CellRendererProps = {
   ItemSeparatorComponent: ?React.ComponentType<
     any | {highlighted: boolean, leadingItem: ?Item},
   >,
+  ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
   cellKey: string,
+  debug?: ?boolean,
   fillRateHelper: FillRateHelper,
+  getItemLayout?: (
+    data: any,
+    index: number,
+  ) => {
+    length: number,
+    offset: number,
+    index: number,
+    ...
+  },
   horizontal: ?boolean,
   index: number,
   inversionStyle: ViewStyleProp,
   item: Item,
   // This is extracted by ScrollViewStickyHeader
-  onLayout: (event: Object) => void,
+  onCellLayout: (event: Object, cellKey: string, index: number) => void,
   onUnmount: (cellKey: string) => void,
   onUpdateSeparators: (cellKeys: Array<?string>, props: Object) => void,
-  parentProps: {
-    // e.g. height, y,
-    getItemLayout?: (
-      data: any,
-      index: number,
-    ) => {
-      length: number,
-      offset: number,
-      index: number,
-      ...
-    },
-    renderItem?: ?RenderItemType<Item>,
-    ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
-    ...
-  },
   prevCellKey: ?string,
+  renderItem?: ?RenderItemType<Item>,
   ...
 };
 
@@ -1982,6 +1989,15 @@ class CellRenderer extends React.Component<
     this.props.onUnmount(this.props.cellKey);
   }
 
+  _onLayout = (nativeEvent: LayoutEvent): void => {
+    this.props.onCellLayout &&
+      this.props.onCellLayout(
+        nativeEvent,
+        this.props.cellKey,
+        this.props.index,
+      );
+  };
+
   _renderElement(renderItem, ListItemComponent, item, index) {
     if (renderItem && ListItemComponent) {
       console.warn(
@@ -2022,14 +2038,16 @@ class CellRenderer extends React.Component<
     const {
       CellRendererComponent,
       ItemSeparatorComponent,
+      ListItemComponent,
+      debug,
       fillRateHelper,
+      getItemLayout,
       horizontal,
       item,
       index,
       inversionStyle,
-      parentProps,
+      renderItem,
     } = this.props;
-    const {renderItem, getItemLayout, ListItemComponent} = parentProps;
     const element = this._renderElement(
       renderItem,
       ListItemComponent,
@@ -2038,12 +2056,10 @@ class CellRenderer extends React.Component<
     );
 
     const onLayout =
-      /* $FlowFixMe[prop-missing] (>=0.68.0 site=react_native_fb) This comment
-       * suppresses an error found when Flow v0.68 was deployed. To see the
-       * error delete this comment and run Flow. */
-      getItemLayout && !parentProps.debug && !fillRateHelper.enabled()
+      (getItemLayout && !debug && !fillRateHelper.enabled()) ||
+      !this.props.onCellLayout
         ? undefined
-        : this.props.onLayout;
+        : this._onLayout;
     // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
     // called explicitly by `ScrollViewStickyHeader`.
     const itemSeparator = ItemSeparatorComponent && (
@@ -2096,7 +2112,7 @@ function describeNestedLists(childList: {
     `    listKey: ${childList.key}\n` +
     `    cellKey: ${childList.cellKey}`;
 
-  let debugInfo = childList.parentDebugInfo;
+  let debugInfo: ?ListDebugInfo = childList.parentDebugInfo;
   while (debugInfo) {
     trace +=
       `\n  Parent (${debugInfo.horizontal ? 'horizontal' : 'vertical'}):\n` +

package/Libraries/Lists/VirtualizedListContext.js

@@ -142,10 +142,14 @@ export function VirtualizedListCellContextProvider({
   cellKey: string,
   children: React.Node,
 }): React.Node {
-  const context = useContext(VirtualizedListContext);
+  // Avoid setting a newly created context object if the values are identical.
+  const currContext = useContext(VirtualizedListContext);
+  const context = useMemo(
+    () => (currContext == null ? null : {...currContext, cellKey}),
+    [currContext, cellKey],
+  );
   return (
-    <VirtualizedListContext.Provider
-      value={context == null ? null : {...context, cellKey}}>
+    <VirtualizedListContext.Provider value={context}>
       {children}
     </VirtualizedListContext.Provider>
   );

package/Libraries/Lists/VirtualizedSectionList.js

@@ -137,8 +137,7 @@ class VirtualizedSectionList<
       return;
     }
     if (params.itemIndex > 0 && this.props.stickySectionHeadersEnabled) {
-      // $FlowFixMe[prop-missing] Cannot access private property
-      const frame = this._listRef._getFrameMetricsApprox(
+      const frame = this._listRef.__getFrameMetricsApprox(
         index - params.itemIndex,
       );
       viewOffset += frame.length;
@@ -339,6 +338,7 @@ class VirtualizedSectionList<
 
   _renderItem =
     (listItemCount: number) =>
+    // eslint-disable-next-line react/no-unstable-nested-components
     ({item, index}: {item: Item, index: number, ...}) => {
       const info = this._subExtractor(index);
       if (!info) {

package/Libraries/LogBox/Data/LogBoxData.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 
@@ -156,7 +156,7 @@ function appendNewLog(newLog) {
     // sybolication for up to a second before adding the log.
     const OPTIMISTIC_WAIT_TIME = 1000;
 
-    let addPendingLog = () => {
+    let addPendingLog: ?() => void = () => {
       logs.add(newLog);
       if (_selectedIndex < 0) {
         setSelectedLog(logs.size - 1);

package/Libraries/LogBox/Data/LogBoxLog.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 

package/Libraries/LogBox/Data/LogBoxSymbolication.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 

package/Libraries/LogBox/LogBox.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict
  * @format
  */
 
@@ -75,24 +75,6 @@ if (__DEV__) {
       consoleErrorImpl = registerError;
       consoleWarnImpl = registerWarning;
 
-      if ((console: any).disableYellowBox === true) {
-        LogBoxData.setDisabled(true);
-        console.warn(
-          'console.disableYellowBox has been deprecated and will be removed in a future release. Please use LogBox.ignoreAllLogs(value) instead.',
-        );
-      }
-
-      (Object.defineProperty: any)(console, 'disableYellowBox', {
-        configurable: true,
-        get: () => LogBoxData.isDisabled(),
-        set: value => {
-          LogBoxData.setDisabled(value);
-          console.warn(
-            'console.disableYellowBox has been deprecated and will be removed in a future release. Please use LogBox.ignoreAllLogs(value) instead.',
-          );
-        },
-      });
-
       if (Platform.isTesting) {
         LogBoxData.setDisabled(true);
       }
@@ -115,7 +97,6 @@ if (__DEV__) {
       // After uninstalling:  original > LogBox (noop) > OtherErrorHandler
       consoleErrorImpl = originalConsoleError;
       consoleWarnImpl = originalConsoleWarn;
-      delete (console: any).disableLogBox;
     },
 
     isInstalled(): boolean {
@@ -153,7 +134,7 @@ if (__DEV__) {
     return typeof args[0] === 'string' && args[0].startsWith('(ADVICE)');
   };
 
-  const isWarningModuleWarning = (...args: any) => {
+  const isWarningModuleWarning = (...args: Array<mixed>) => {
     return typeof args[0] === 'string' && args[0].startsWith('Warning: ');
   };
 

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -69,6 +69,7 @@ function FooterButton(props: ButtonProps): React.Node {
 const buttonStyles = StyleSheet.create({
   safeArea: {
     flex: 1,
+    // $FlowFixMe[sketchy-null-bool]
     paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
   },
   content: {

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -18,6 +18,7 @@ import StatusBar from '../../Components/StatusBar/StatusBar';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import type {LogLevel} from '../Data/LogBoxLog';
+import type {ImageSource} from '../../Image/ImageSource';
 type Props = $ReadOnly<{|
   onSelectIndex: (selectedIndex: number) => void,
   selectedIndex: number,
@@ -91,7 +92,7 @@ const backgroundForLevel = (level: LogLevel) =>
 function LogBoxInspectorHeaderButton(
   props: $ReadOnly<{|
     disabled: boolean,
-    image: number,
+    image: ImageSource,
     level: LogLevel,
     onPress?: ?() => void,
   |}>,

package/Libraries/NativeAnimation/Drivers/RCTFrameAnimation.m

@@ -124,8 +124,8 @@ RCT_NOT_IMPLEMENTED(- (instancetype)init)
   // Do a linear remap of the two frames to safeguard against variable framerates
   NSNumber *fromFrameValue = _frames[startIndex];
   NSNumber *toFrameValue = _frames[nextIndex];
-  NSTimeInterval fromInterval = startIndex * RCTSingleFrameInterval;
-  NSTimeInterval toInterval = nextIndex * RCTSingleFrameInterval;
+  NSTimeInterval fromInterval = (double)startIndex * RCTSingleFrameInterval;
+  NSTimeInterval toInterval = (double)nextIndex * RCTSingleFrameInterval;
 
   // Interpolate between the individual frames to ensure the animations are
   //smooth and of the proper duration regardless of the framerate.

package/{ReactCommon/react/renderer/mounting/MountingTransactionMetadata.cpp → Libraries/NativeAnimation/Nodes/RCTColorAnimatedNode.h}

@@ -5,8 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-#include "MountingTransactionMetadata.h"
+#import <React/RCTAnimatedNode.h>
 
-namespace facebook {
-namespace react {} // namespace react
-} // namespace facebook
+@interface RCTColorAnimatedNode : RCTAnimatedNode
+
+@property (nonatomic, assign) int32_t color;
+
+@end

package/Libraries/NativeAnimation/Nodes/RCTColorAnimatedNode.m

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <React/RCTColorAnimatedNode.h>
+#import <React/RCTValueAnimatedNode.h>
+
+@implementation RCTColorAnimatedNode
+
+- (void)performUpdate
+{
+  [super performUpdate];
+
+  RCTValueAnimatedNode *rNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"r"]];
+  RCTValueAnimatedNode *gNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"g"]];
+  RCTValueAnimatedNode *bNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"b"]];
+  RCTValueAnimatedNode *aNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"a"]];
+
+  _color = ((int)round(aNode.value * 255) & 0xff) << 24 |
+      ((int)round(rNode.value) & 0xff) << 16 |
+      ((int)round(gNode.value) & 0xff) << 8 |
+      ((int)round(bNode.value) & 0xff);
+
+  // TODO (T111179606): Support platform colors for color animations
+}
+
+@end

package/Libraries/NativeAnimation/Nodes/RCTPropsAnimatedNode.m

@@ -12,6 +12,7 @@
 #import <React/RCTStyleAnimatedNode.h>
 #import <React/RCTUIManager.h>
 #import <React/RCTValueAnimatedNode.h>
+#import <React/RCTColorAnimatedNode.h>
 
 @implementation RCTPropsAnimatedNode
 {
@@ -118,17 +119,21 @@
   for (NSNumber *parentTag in self.parentNodes.keyEnumerator) {
     RCTAnimatedNode *parentNode = [self.parentNodes objectForKey:parentTag];
     if ([parentNode isKindOfClass:[RCTStyleAnimatedNode class]]) {
-      [self->_propsDictionary addEntriesFromDictionary:[(RCTStyleAnimatedNode *)parentNode propsDictionary]];
-
+      RCTStyleAnimatedNode *styleAnimatedNode = (RCTStyleAnimatedNode *)parentNode;
+      [_propsDictionary addEntriesFromDictionary:styleAnimatedNode.propsDictionary];
     } else if ([parentNode isKindOfClass:[RCTValueAnimatedNode class]]) {
+      RCTValueAnimatedNode *valueAnimatedNode = (RCTValueAnimatedNode *)parentNode;
       NSString *property = [self propertyNameForParentTag:parentTag];
-      id animatedObject = [(RCTValueAnimatedNode *)parentNode animatedObject];
+      id animatedObject = valueAnimatedNode.animatedObject;
       if (animatedObject) {
-        self->_propsDictionary[property] = animatedObject;
+        _propsDictionary[property] = animatedObject;
       } else {
-        CGFloat value = [(RCTValueAnimatedNode *)parentNode value];
-        self->_propsDictionary[property] = @(value);
+        _propsDictionary[property] = @(valueAnimatedNode.value);
       }
+    } else if ([parentNode isKindOfClass:[RCTColorAnimatedNode class]]) {
+      RCTColorAnimatedNode *colorAnimatedNode = (RCTColorAnimatedNode *)parentNode;
+      NSString *property = [self propertyNameForParentTag:parentTag];
+      _propsDictionary[property] = @(colorAnimatedNode.color);
     }
   }
 

package/Libraries/NativeAnimation/Nodes/RCTStyleAnimatedNode.m

@@ -9,6 +9,7 @@
 #import <React/RCTAnimationUtils.h>
 #import <React/RCTValueAnimatedNode.h>
 #import <React/RCTTransformAnimatedNode.h>
+#import <React/RCTColorAnimatedNode.h>
 
 @implementation RCTStyleAnimatedNode
 {
@@ -38,11 +39,14 @@
     RCTAnimatedNode *node = [self.parentNodes objectForKey:nodeTag];
     if (node) {
       if ([node isKindOfClass:[RCTValueAnimatedNode class]]) {
-        RCTValueAnimatedNode *parentNode = (RCTValueAnimatedNode *)node;
-        [self->_propsDictionary setObject:@(parentNode.value) forKey:property];
+        RCTValueAnimatedNode *valueAnimatedNode = (RCTValueAnimatedNode *)node;
+        _propsDictionary[property] = @(valueAnimatedNode.value);
       } else if ([node isKindOfClass:[RCTTransformAnimatedNode class]]) {
-        RCTTransformAnimatedNode *parentNode = (RCTTransformAnimatedNode *)node;
-        [self->_propsDictionary addEntriesFromDictionary:parentNode.propsDictionary];
+        RCTTransformAnimatedNode *transformAnimatedNode = (RCTTransformAnimatedNode *)node;
+        [_propsDictionary addEntriesFromDictionary:transformAnimatedNode.propsDictionary];
+      } else if ([node isKindOfClass:[RCTColorAnimatedNode class]]) {
+        RCTColorAnimatedNode *colorAnimatedNode = (RCTColorAnimatedNode *)node;
+        _propsDictionary[property] = @(colorAnimatedNode.color);
       }
     }
   }];

package/Libraries/NativeAnimation/RCTNativeAnimatedModule.mm

@@ -96,6 +96,14 @@ RCT_EXPORT_METHOD(createAnimatedNode:(double)tag
   }];
 }
 
+RCT_EXPORT_METHOD(updateAnimatedNodeConfig:(double)tag
+                  config:(NSDictionary<NSString *, id> *)config)
+{
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
+    [nodesManager updateAnimatedNodeConfig:[NSNumber numberWithDouble:tag] config:config];
+  }];
+}
+
 RCT_EXPORT_METHOD(connectAnimatedNodes:(double)parentTag
                   childTag:(double)childTag)
 {