react-native-tvos 0.71.12-0 → 0.72.4-0rc0

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -14,38 +14,12 @@ import type {LogBoxLogData} from './LogBoxLog';
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
 import UTFSequence from '../../UTFSequence';
 import stringifySafe from '../../Utilities/stringifySafe';
-import ansiRegex from 'ansi-regex';
-
-const ANSI_REGEX = ansiRegex().source;
 
 const BABEL_TRANSFORM_ERROR_FORMAT =
   /^(?:TransformError )?(?:SyntaxError: |ReferenceError: )(.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+)/;
-
-// https://github.com/babel/babel/blob/33dbb85e9e9fe36915273080ecc42aee62ed0ade/packages/babel-code-frame/src/index.ts#L183-L184
-const BABEL_CODE_FRAME_MARKER_PATTERN = new RegExp(
-  [
-    // Beginning of a line (per 'm' flag)
-    '^',
-    // Optional ANSI escapes for colors
-    `(?:${ANSI_REGEX})*`,
-    // Marker
-    '>',
-    // Optional ANSI escapes for colors
-    `(?:${ANSI_REGEX})*`,
-    // Left padding for line number
-    ' +',
-    // Line number
-    '[0-9]+',
-    // Gutter
-    ' \\|',
-  ].join(''),
-  'm',
-);
-
 const BABEL_CODE_FRAME_ERROR_FORMAT =
   // eslint-disable-next-line no-control-regex
   /^(?:TransformError )?(?:.*):? (?:.*?)(\/.*): ([\s\S]+?)\n([ >]{2}[\d\s]+ \|[\s\S]+|\u{001b}[\s\S]+)/u;
-
 const METRO_ERROR_FORMAT =
   /^(?:InternalError Metro has encountered an error:) (.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+)/u;
 
@@ -267,31 +241,27 @@ export function parseLogBoxException(
     };
   }
 
-  // Perform a cheap match first before trying to parse the full message, which
-  // can get expensive for arbitrary input.
-  if (BABEL_CODE_FRAME_MARKER_PATTERN.test(message)) {
-    const babelCodeFrameError = message.match(BABEL_CODE_FRAME_ERROR_FORMAT);
+  const babelCodeFrameError = message.match(BABEL_CODE_FRAME_ERROR_FORMAT);
 
-    if (babelCodeFrameError) {
-      // Codeframe errors are thrown from any use of buildCodeFrameError.
-      const [fileName, content, codeFrame] = babelCodeFrameError.slice(1);
-      return {
-        level: 'syntax',
-        stack: [],
-        isComponentError: false,
-        componentStack: [],
-        codeFrame: {
-          fileName,
-          location: null, // We are not given the location.
-          content: codeFrame,
-        },
-        message: {
-          content,
-          substitutions: [],
-        },
-        category: `${fileName}-${1}-${1}`,
-      };
-    }
+  if (babelCodeFrameError) {
+    // Codeframe errors are thrown from any use of buildCodeFrameError.
+    const [fileName, content, codeFrame] = babelCodeFrameError.slice(1);
+    return {
+      level: 'syntax',
+      stack: [],
+      isComponentError: false,
+      componentStack: [],
+      codeFrame: {
+        fileName,
+        location: null, // We are not given the location.
+        content: codeFrame,
+      },
+      message: {
+        content,
+        substitutions: [],
+      },
+      category: `${fileName}-${1}-${1}`,
+    };
   }
 
   if (message.match(/^TransformError /)) {
@@ -332,7 +302,7 @@ export function parseLogBoxException(
   }
 
   // Most `console.error` calls won't have a componentStack. We parse them like
-  // regular logs which have the component stack burried in the message.
+  // regular logs which have the component stack buried in the message.
   return {
     level: 'error',
     stack: error.stack,

package/Libraries/LogBox/LogBox.js

@@ -258,4 +258,4 @@ if (__DEV__) {
   };
 }
 
-module.exports = (LogBox: ILogBox);
+export default (LogBox: ILogBox);

package/Libraries/LogBox/UI/LogBoxInspector.js

@@ -93,9 +93,7 @@ const headerTitleMap = {
   component: 'Render Error',
 };
 
-function LogBoxInspectorBody(
-  props: $TEMPORARY$object<{log: LogBoxLog, onRetry: () => void}>,
-) {
+function LogBoxInspectorBody(props: {log: LogBoxLog, onRetry: () => void}) {
   const [collapsed, setCollapsed] = React.useState(true);
 
   React.useEffect(() => {

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -41,6 +41,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
             useNativeDriver: true,
           }),
         );
+        // $FlowFixMe[incompatible-call]
         setState({
           animation,
           rotate: animated.interpolate({

package/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -19,10 +19,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   frame: StackFrame,
   onPress?: ?(event: PressEvent) => void,
-|}>;
+}>;
 
 function LogBoxInspectorStackFrame(props: Props): React.Node {
   const {frame, onPress} = props;

package/Libraries/LogBox/UI/LogBoxMessage.js

@@ -11,6 +11,8 @@
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
 import type {Message} from '../Data/parseLogBoxLog';
 
+import Linking from '../../Linking/Linking';
+import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import * as React from 'react';
 
@@ -22,6 +24,82 @@ type Props = {
   ...
 };
 
+type Range = {
+  lowerBound: number,
+  upperBound: number,
+};
+
+function getLinkRanges(string: string): $ReadOnlyArray<Range> {
+  const regex = /https?:\/\/[^\s$.?#].[^\s]*/gi;
+  const matches = [];
+
+  let regexResult: RegExp$matchResult | null;
+  while ((regexResult = regex.exec(string)) !== null) {
+    if (regexResult != null) {
+      matches.push({
+        lowerBound: regexResult.index,
+        upperBound: regex.lastIndex,
+      });
+    }
+  }
+
+  return matches;
+}
+
+function TappableLinks(props: {
+  content: string,
+  style: void | TextStyleProp,
+}): React.Node {
+  const matches = getLinkRanges(props.content);
+
+  if (matches.length === 0) {
+    // No URLs detected. Just return the content.
+    return <Text style={props.style}>{props.content}</Text>;
+  }
+
+  // URLs were detected. Construct array of Text nodes.
+
+  let fragments: Array<React.Node> = [];
+  let indexCounter = 0;
+  let startIndex = 0;
+
+  for (const linkRange of matches) {
+    if (startIndex < linkRange.lowerBound) {
+      const text = props.content.substring(startIndex, linkRange.lowerBound);
+      fragments.push(<Text key={++indexCounter}>{text}</Text>);
+    }
+
+    const link = props.content.substring(
+      linkRange.lowerBound,
+      linkRange.upperBound,
+    );
+    fragments.push(
+      <Text
+        onPress={() => {
+          // $FlowFixMe[unused-promise]
+          Linking.openURL(link);
+        }}
+        key={++indexCounter}
+        style={styles.linkText}>
+        {link}
+      </Text>,
+    );
+
+    startIndex = linkRange.upperBound;
+  }
+
+  if (startIndex < props.content.length) {
+    const text = props.content.substring(startIndex);
+    fragments.push(
+      <Text key={++indexCounter} style={props.style}>
+        {text}
+      </Text>,
+    );
+  }
+
+  return <Text style={props.style}>{fragments}</Text>;
+}
+
 const cleanContent = (content: string) =>
   content.replace(/^(TransformError |Warning: (Warning: )?|Error: )/g, '');
 
@@ -49,9 +127,7 @@ function LogBoxMessage(props: Props): React.Node {
 
     if (length < maxLength) {
       elements.push(
-        <Text key={key} style={style}>
-          {cleanMessage}
-        </Text>,
+        <TappableLinks content={cleanMessage} key={key} style={style} />,
       );
     }
 
@@ -70,12 +146,12 @@ function LogBoxMessage(props: Props): React.Node {
       createUnderLength(key, prevPart);
     }
 
-    const substititionPart = content.substr(
+    const substitutionPart = content.substr(
       substitution.offset,
       substitution.length,
     );
 
-    createUnderLength(key + '.5', substititionPart, substitutionStyle);
+    createUnderLength(key + '.5', substitutionPart, substitutionStyle);
     return substitution.offset + substitution.length;
   }, 0);
 
@@ -87,4 +163,10 @@ function LogBoxMessage(props: Props): React.Node {
   return <>{elements}</>;
 }
 
+const styles = StyleSheet.create({
+  linkText: {
+    textDecorationLine: 'underline',
+  },
+});
+
 export default LogBoxMessage;

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -22,13 +22,13 @@ import LogBoxMessage from './LogBoxMessage';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
   totalLogCount: number,
   level: 'warn' | 'error',
   onPressOpen: () => void,
   onPressDismiss: () => void,
-|}>;
+}>;
 
 function LogBoxLogNotification(props: Props): React.Node {
   const {totalLogCount, level, log} = props;
@@ -76,9 +76,7 @@ function LogBoxLogNotification(props: Props): React.Node {
   );
 }
 
-function CountBadge(
-  props: $TEMPORARY$object<{count: number, level: 'error' | 'warn'}>,
-) {
+function CountBadge(props: {count: number, level: 'error' | 'warn'}) {
   return (
     <View style={countStyles.outside}>
       {/* $FlowFixMe[incompatible-type] (>=0.114.0) This suppression was added
@@ -93,7 +91,7 @@ function CountBadge(
   );
 }
 
-function Message(props: $TEMPORARY$object<{message: MessageType}>) {
+function Message(props: {message: MessageType}) {
   return (
     <View style={messageStyles.container}>
       <Text numberOfLines={1} style={messageStyles.text}>
@@ -109,7 +107,7 @@ function Message(props: $TEMPORARY$object<{message: MessageType}>) {
   );
 }
 
-function DismissButton(props: $TEMPORARY$object<{onPress: () => void}>) {
+function DismissButton(props: {onPress: () => void}) {
   return (
     <View style={dismissStyles.container}>
       <LogBoxButton

package/Libraries/Modal/Modal.js

@@ -13,11 +13,11 @@ import type {RootTag} from '../ReactNative/RootTag';
 import type {DirectEventHandler} from '../Types/CodegenTypes';
 
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
-import {VirtualizedListContextResetter} from '../Lists/VirtualizedListContext.js';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import ModalInjection from './ModalInjection';
 import NativeModalManager from './NativeModalManager';
 import RCTModalHostView from './RCTModalHostViewNativeComponent';
+import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
 
 const ScrollView = require('../Components/ScrollView/ScrollView');
 const View = require('../Components/View/View');
@@ -91,7 +91,7 @@ export type Props = $ReadOnly<{|
    * The `statusBarTranslucent` prop determines whether your modal should go under
    * the system statusbar.
    *
-   * See https://reactnative.dev/docs/modal#transparent
+   * See https://reactnative.dev/docs/modal.html#statusbartranslucent-android
    */
   statusBarTranslucent?: ?boolean,
 

package/Libraries/NativeAnimation/Nodes/RCTColorAnimatedNode.m

@@ -8,6 +8,8 @@
 #import <React/RCTColorAnimatedNode.h>
 #import <React/RCTValueAnimatedNode.h>
 
+#import <React/RCTAnimationUtils.h>
+
 @implementation RCTColorAnimatedNode
 
 - (void)performUpdate
@@ -19,8 +21,7 @@
   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);
+  _color = RCTColorFromComponents(rNode.value, gNode.value, bNode.value, aNode.value);
 
   // TODO (T111179606): Support platform colors for color animations
 }

package/Libraries/NativeAnimation/Nodes/RCTInterpolationAnimatedNode.h

@@ -7,6 +7,20 @@
 
 #import "RCTValueAnimatedNode.h"
 
+#import <React/RCTDefines.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+RCT_EXTERN NSString *RCTInterpolateString(
+    NSString *pattern,
+    CGFloat inputValue,
+    NSArray *inputRange,
+    NSArray<NSArray<NSNumber *> *> *outputRange,
+    NSString *extrapolateLeft,
+    NSString *extrapolateRight);
+
 @interface RCTInterpolationAnimatedNode : RCTValueAnimatedNode
 
 @end
+
+NS_ASSUME_NONNULL_END

package/Libraries/NativeAnimation/Nodes/RCTInterpolationAnimatedNode.m

@@ -8,91 +8,116 @@
 #import <React/RCTInterpolationAnimatedNode.h>
 
 #import <React/RCTAnimationUtils.h>
+#import <React/RCTConvert.h>
 
 static NSRegularExpression *regex;
 
+typedef NS_ENUM(NSInteger, RCTInterpolationOutputType) {
+  RCTInterpolationOutputNumber,
+  RCTInterpolationOutputColor,
+  RCTInterpolationOutputString,
+};
+
+static NSRegularExpression *getNumericComponentRegex()
+{
+  static NSRegularExpression *regex;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    NSString *fpRegex = @"[+-]?(\\d+\\.?\\d*|\\.\\d+)([eE][+-]?\\d+)?";
+    regex = [NSRegularExpression regularExpressionWithPattern:fpRegex
+                                                      options:NSRegularExpressionCaseInsensitive
+                                                        error:nil];
+  });
+  return regex;
+}
+
+static NSArray<NSArray<NSNumber *> *> *outputFromStringPattern(NSString *input)
+{
+  NSMutableArray *output = [NSMutableArray array];
+  [getNumericComponentRegex()
+      enumerateMatchesInString:input
+                       options:0
+                         range:NSMakeRange(0, input.length)
+                    usingBlock:^(NSTextCheckingResult *_Nullable result, NSMatchingFlags flags, BOOL *_Nonnull stop) {
+                      [output addObject:@([[input substringWithRange:result.range] doubleValue])];
+                    }];
+  return output;
+}
+
+NSString *RCTInterpolateString(
+    NSString *pattern,
+    CGFloat inputValue,
+    NSArray<NSNumber *> *inputRange,
+    NSArray<NSArray<NSNumber *> *> *outputRange,
+    NSString *extrapolateLeft,
+    NSString *extrapolateRight)
+{
+  NSUInteger rangeIndex = RCTFindIndexOfNearestValue(inputValue, inputRange);
+
+  NSMutableString *output = [NSMutableString stringWithString:pattern];
+  NSArray<NSTextCheckingResult *> *matches =
+      [getNumericComponentRegex() matchesInString:pattern options:0 range:NSMakeRange(0, pattern.length)];
+  NSInteger matchIndex = matches.count - 1;
+  for (NSTextCheckingResult *match in [matches reverseObjectEnumerator]) {
+    CGFloat val = RCTInterpolateValue(
+        inputValue,
+        [inputRange[rangeIndex] doubleValue],
+        [inputRange[rangeIndex + 1] doubleValue],
+        [outputRange[rangeIndex][matchIndex] doubleValue],
+        [outputRange[rangeIndex + 1][matchIndex] doubleValue],
+        extrapolateLeft,
+        extrapolateRight);
+    [output replaceCharactersInRange:match.range withString:[@(val) stringValue]];
+    matchIndex--;
+  }
+  return output;
+}
+
 @implementation RCTInterpolationAnimatedNode {
   __weak RCTValueAnimatedNode *_parentNode;
   NSArray<NSNumber *> *_inputRange;
-  NSArray<NSNumber *> *_outputRange;
-  NSArray<NSArray<NSNumber *> *> *_outputs;
-  NSArray<NSString *> *_soutputRange;
+  NSArray *_outputRange;
   NSString *_extrapolateLeft;
   NSString *_extrapolateRight;
-  NSUInteger _numVals;
-  bool _hasStringOutput;
-  bool _shouldRound;
+  RCTInterpolationOutputType _outputType;
+  id _Nullable _outputvalue;
+  NSString *_Nullable _outputPattern;
+
   NSArray<NSTextCheckingResult *> *_matches;
 }
 
 - (instancetype)initWithTag:(NSNumber *)tag config:(NSDictionary<NSString *, id> *)config
 {
-  static dispatch_once_t onceToken;
-  dispatch_once(&onceToken, ^{
-    NSString *fpRegex = @"[+-]?(\\d+\\.?\\d*|\\.\\d+)([eE][+-]?\\d+)?";
-    regex = [NSRegularExpression regularExpressionWithPattern:fpRegex
-                                                      options:NSRegularExpressionCaseInsensitive
-                                                        error:nil];
-  });
   if ((self = [super initWithTag:tag config:config])) {
-    _inputRange = [config[@"inputRange"] copy];
-    NSMutableArray *outputRange = [NSMutableArray array];
-    NSMutableArray *soutputRange = [NSMutableArray array];
-    NSMutableArray<NSMutableArray<NSNumber *> *> *_outputRanges = [NSMutableArray array];
-
-    _hasStringOutput = NO;
-    for (id value in config[@"outputRange"]) {
-      if ([value isKindOfClass:[NSNumber class]]) {
-        [outputRange addObject:value];
-      } else if ([value isKindOfClass:[NSString class]]) {
-        /**
-         * Supports string shapes by extracting numbers so new values can be computed,
-         * and recombines those values into new strings of the same shape.  Supports
-         * things like:
-         *
-         *   rgba(123, 42, 99, 0.36) // colors
-         *   -45deg                  // values with units
-         */
-        NSMutableArray *output = [NSMutableArray array];
-        [_outputRanges addObject:output];
-        [soutputRange addObject:value];
-
-        _matches = [regex matchesInString:value options:0 range:NSMakeRange(0, [value length])];
-        for (NSTextCheckingResult *match in _matches) {
-          NSString *strNumber = [value substringWithRange:match.range];
-          [output addObject:[NSNumber numberWithDouble:strNumber.doubleValue]];
-        }
+    _inputRange = config[@"inputRange"];
 
-        _hasStringOutput = YES;
-        [outputRange addObject:[output objectAtIndex:0]];
-      }
+    NSArray *outputRangeConfig = config[@"outputRange"];
+    if ([config[@"outputType"] isEqual:@"color"]) {
+      _outputType = RCTInterpolationOutputColor;
+    } else if ([outputRangeConfig[0] isKindOfClass:[NSString class]]) {
+      _outputType = RCTInterpolationOutputString;
+      _outputPattern = outputRangeConfig[0];
+    } else {
+      _outputType = RCTInterpolationOutputNumber;
     }
-    if (_hasStringOutput) {
-      // ['rgba(0, 100, 200, 0)', 'rgba(50, 150, 250, 0.5)']
-      // ->
-      // [
-      //   [0, 50],
-      //   [100, 150],
-      //   [200, 250],
-      //   [0, 0.5],
-      // ]
-      _numVals = [_matches count];
-      NSString *value = [soutputRange objectAtIndex:0];
-      _shouldRound = [value containsString:@"rgb"];
-      _matches = [regex matchesInString:value options:0 range:NSMakeRange(0, [value length])];
-      NSMutableArray<NSMutableArray<NSNumber *> *> *outputs = [NSMutableArray arrayWithCapacity:_numVals];
-      NSUInteger size = [soutputRange count];
-      for (NSUInteger j = 0; j < _numVals; j++) {
-        NSMutableArray *output = [NSMutableArray arrayWithCapacity:size];
-        [outputs addObject:output];
-        for (int i = 0; i < size; i++) {
-          [output addObject:[[_outputRanges objectAtIndex:i] objectAtIndex:j]];
+
+    NSMutableArray *outputRange = [NSMutableArray arrayWithCapacity:outputRangeConfig.count];
+    for (id value in outputRangeConfig) {
+      switch (_outputType) {
+        case RCTInterpolationOutputColor: {
+          UIColor *color = [RCTConvert UIColor:value];
+          [outputRange addObject:color ? color : [UIColor whiteColor]];
+          break;
         }
+        case RCTInterpolationOutputString:
+          [outputRange addObject:outputFromStringPattern(value)];
+          break;
+        case RCTInterpolationOutputNumber:
+          [outputRange addObject:value];
+          break;
       }
-      _outputs = [outputs copy];
     }
-    _outputRange = [outputRange copy];
-    _soutputRange = [soutputRange copy];
+    _outputRange = outputRange;
     _extrapolateLeft = config[@"extrapolateLeft"];
     _extrapolateRight = config[@"extrapolateRight"];
   }
@@ -123,43 +148,24 @@ static NSRegularExpression *regex;
   }
 
   CGFloat inputValue = _parentNode.value;
-
-  CGFloat interpolated =
-      RCTInterpolateValueInRange(inputValue, _inputRange, _outputRange, _extrapolateLeft, _extrapolateRight);
-  self.value = interpolated;
-  if (_hasStringOutput) {
-    // 'rgba(0, 100, 200, 0)'
-    // ->
-    // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
-    if (_numVals > 1) {
-      NSString *text = _soutputRange[0];
-      NSMutableString *formattedText = [NSMutableString stringWithString:text];
-      NSUInteger i = _numVals;
-      for (NSTextCheckingResult *match in [_matches reverseObjectEnumerator]) {
-        CGFloat val =
-            RCTInterpolateValueInRange(inputValue, _inputRange, _outputs[--i], _extrapolateLeft, _extrapolateRight);
-        NSString *str;
-        if (_shouldRound) {
-          // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
-          // round the opacity (4th column).
-          bool isAlpha = i == 3;
-          CGFloat rounded = isAlpha ? round(val * 1000) / 1000 : round(val);
-          str = isAlpha ? [NSString stringWithFormat:@"%1.3f", rounded] : [NSString stringWithFormat:@"%1.0f", rounded];
-        } else {
-          NSNumber *numberValue = [NSNumber numberWithDouble:val];
-          str = [numberValue stringValue];
-        }
-
-        [formattedText replaceCharactersInRange:[match range] withString:str];
-      }
-      self.animatedObject = formattedText;
-    } else {
-      self.animatedObject = [regex stringByReplacingMatchesInString:_soutputRange[0]
-                                                            options:0
-                                                              range:NSMakeRange(0, _soutputRange[0].length)
-                                                       withTemplate:[NSString stringWithFormat:@"%1f", interpolated]];
-    }
+  switch (_outputType) {
+    case RCTInterpolationOutputColor:
+      _outputvalue = @(RCTInterpolateColorInRange(inputValue, _inputRange, _outputRange));
+      break;
+    case RCTInterpolationOutputString:
+      _outputvalue = RCTInterpolateString(
+          _outputPattern, inputValue, _inputRange, _outputRange, _extrapolateLeft, _extrapolateRight);
+      break;
+    case RCTInterpolationOutputNumber:
+      self.value =
+          RCTInterpolateValueInRange(inputValue, _inputRange, _outputRange, _extrapolateLeft, _extrapolateRight);
+      break;
   }
 }
 
+- (id)animatedObject
+{
+  return _outputvalue;
+}
+
 @end

package/Libraries/NativeAnimation/Nodes/RCTPropsAnimatedNode.m

@@ -76,7 +76,7 @@
 {
   if (_managedByFabric) {
     // Restoring to default values causes render of inconsistent state
-    // to the user because it isn't synchonised with Fabric's UIManager.
+    // to the user because it isn't synchronised with Fabric's UIManager.
     return;
   }
   // Restore the default value for all props that were modified by this node.

package/Libraries/NativeAnimation/Nodes/RCTStyleAnimatedNode.m

@@ -38,7 +38,12 @@
     if (node) {
       if ([node isKindOfClass:[RCTValueAnimatedNode class]]) {
         RCTValueAnimatedNode *valueAnimatedNode = (RCTValueAnimatedNode *)node;
-        _propsDictionary[property] = @(valueAnimatedNode.value);
+        id animatedObject = valueAnimatedNode.animatedObject;
+        if (animatedObject) {
+          _propsDictionary[property] = animatedObject;
+        } else {
+          _propsDictionary[property] = @(valueAnimatedNode.value);
+        }
       } else if ([node isKindOfClass:[RCTTransformAnimatedNode class]]) {
         RCTTransformAnimatedNode *transformAnimatedNode = (RCTTransformAnimatedNode *)node;
         [_propsDictionary addEntriesFromDictionary:transformAnimatedNode.propsDictionary];

package/Libraries/NativeAnimation/Nodes/RCTValueAnimatedNode.h

@@ -24,7 +24,7 @@
 - (void)extractOffset;
 
 @property (nonatomic, assign) CGFloat value;
-@property (nonatomic, strong) id animatedObject;
+@property (nonatomic, strong, readonly) id animatedObject;
 @property (nonatomic, weak) id<RCTValueAnimatedNodeObserver> valueObserver;
 
 @end

package/Libraries/NativeAnimation/Nodes/RCTValueAnimatedNode.m

@@ -43,6 +43,11 @@
   return _value + _offset;
 }
 
+- (id)animatedObject
+{
+  return nil;
+}
+
 - (void)setValue:(CGFloat)value
 {
   _value = value;