Fix inherited animated text color on native

Author: Yamin Yassin

packages/benchmarks/perf/mocks/AnimatedNode.js

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+const animatedNodeMarker = Symbol('AnimatedNode');
+
+export function createAnimatedNode(config) {
+  return Object.defineProperty({ ...config }, animatedNodeMarker, {
+    value: true
+  });
+}
+
+export default class AnimatedNode {
+  static [Symbol.hasInstance](value) {
+    return Boolean(value?.[animatedNodeMarker]);
+  }
+}

packages/benchmarks/perf/mocks/react-native.js

@@ -9,6 +9,8 @@
  * React Native mock for Node.js benchmarks
  */
 
+import { createAnimatedNode } from './AnimatedNode';
+
 export const AccessibilityInfo = {
   addEventListener: () => ({
     remove: () => {}
@@ -25,7 +27,7 @@ export const Animated = {
   Text: 'Animated.Text',
   Value: () => {
     return {
-      interpolate: (value) => value
+      interpolate: (value) => createAnimatedNode(value)
     };
   },
   timing: () => {

packages/benchmarks/perf/rollup.config.mjs

@@ -44,6 +44,10 @@ const config = [
               './mocks/ViewNativeComponent.js'
             )
           },
+          {
+            find: 'react-native/Libraries/Animated/nodes/AnimatedNode',
+            replacement: path.resolve(__dirname, './mocks/AnimatedNode.js')
+          },
           {
             find: 'react-native/Libraries/Text/TextAncestor',
             replacement: path.resolve(

packages/react-strict-dom/src/native/modules/useStyleProps.js

@@ -8,8 +8,11 @@
  */
 
 import type { CustomProperties, Style } from '../../types/styles';
-import type { ReactNativeProps } from '../../types/renderer.native';
-import type { ReactNativeStyle } from '../../types/renderer.native';
+import type {
+  ReactNativeProps,
+  ReactNativeStyle,
+  ReactNativeStyleValue
+} from '../../types/renderer.native';
 
 import * as css from '../css';
 import * as ReactNative from '../react-native';
@@ -76,6 +79,10 @@ function resolveUnitlessLineHeight(style: ReactNativeStyle): ReactNativeStyle {
   return style;
 }
 
+function isAnimatedNode(value: ?ReactNativeStyleValue): boolean {
+  return value instanceof ReactNative.AnimatedNode;
+}
+
 /**
  * Produces the relevant React Native props to implement the given styles, and any
  * inheritable text styles that may be required.
@@ -208,6 +215,9 @@ export function useStyleProps(
       val = inheritedValue;
     }
     if (val != null) {
+      if (isAnimatedNode(val)) {
+        styleProps.animated = true;
+      }
       hasInheritableStyle = true;
       inheritableStyle[key] = val;
       styleProps.style[key] = val;

packages/react-strict-dom/src/native/react-native/AnimatedNode.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ */
+
+import AnimatedNode from 'react-native/Libraries/Animated/nodes/AnimatedNode';
+export { AnimatedNode };

packages/react-strict-dom/src/native/react-native/index.js

@@ -17,6 +17,7 @@ export {
   Text,
   TextInput
 } from 'react-native';
+export { AnimatedNode } from './AnimatedNode';
 export { LayoutConformance } from './LayoutConformance';
 export { TextAncestorContext } from './TextAncestorContext';
 export { ViewNativeComponent } from './ViewNativeComponent';

packages/react-strict-dom/tests/__mocks__/react-native/Libraries/Animated/nodes/AnimatedNode.js

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+const animatedNodeMarker = Symbol('AnimatedNode');
+
+export function createAnimatedNode(config) {
+  return Object.defineProperty({ ...config }, animatedNodeMarker, {
+    value: true
+  });
+}
+
+export default class AnimatedNode {
+  static [Symbol.hasInstance](value) {
+    return Boolean(value?.[animatedNodeMarker]);
+  }
+}

packages/react-strict-dom/tests/__mocks__/react-native/index.js

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { createAnimatedNode } from './Libraries/Animated/nodes/AnimatedNode';
+
 export const AccessibilityInfo = {
   addEventListener: jest.fn().mockReturnValue({ remove: jest.fn() }),
   isReduceMotionEnabled: jest.fn().mockReturnValue(Promise.resolve(false))
@@ -19,7 +21,9 @@ export const Animated = {
   Text: 'Animated.Text',
   Value: jest.fn(() => {
     return {
-      interpolate: jest.fn().mockImplementation((value) => value)
+      interpolate: jest
+        .fn()
+        .mockImplementation((value) => createAnimatedNode(value))
     };
   }),
   timing: jest.fn(() => {

packages/react-strict-dom/tests/html/html-test.native.js

@@ -593,6 +593,66 @@ describe('<html.*> (native polyfills)', () => {
       expect(getFontSize(secondSecond)).toBe(1.5 * 3 * 16);
     });
 
+    test('inherited color from transitioned parent', () => {
+      const styles = css.create({
+        container: {
+          padding: '32px',
+          transitionProperty: 'backgroundColor, color',
+          transitionDuration: '300ms',
+          backgroundColor: {
+            default: 'blue',
+            ':active': 'darkblue'
+          },
+          color: {
+            default: 'white',
+            ':active': 'green'
+          }
+        },
+        text: {
+          fontSize: '24px',
+          color: 'inherit'
+        }
+      });
+
+      let root;
+      act(() => {
+        root = create(
+          <html.button style={styles.container}>
+            <html.span style={styles.text}>Alert Banner</html.span>
+          </html.button>
+        );
+      });
+
+      let button = root.toJSON();
+      let span = button.children[0];
+      expect(span.type).toBe('Text');
+      expect(span.props.style.color).toBe('white');
+
+      act(() => {
+        button.props.onPointerDown();
+      });
+
+      button = root.toJSON();
+      span = button.children[0];
+      expect(span.type).toBe('Animated.Text');
+      expect(span.props.style.color).toEqual({
+        inputRange: [0, 1],
+        outputRange: ['white', 'green']
+      });
+
+      act(() => {
+        button.props.onPointerUp();
+      });
+
+      button = root.toJSON();
+      span = button.children[0];
+      expect(span.type).toBe('Animated.Text');
+      expect(span.props.style.color).toEqual({
+        inputRange: [0, 1],
+        outputRange: ['green', 'white']
+      });
+    });
+
     test('inherited lineHeight (unitless)', () => {
       const styles = css.create({
         root: {