From d2e1bff5f0e76961b80929f65869e1e2a2ca6fae Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuelsusla@meta.com>
Date: Thu, 26 Feb 2026 03:32:58 -0800
Subject: [PATCH 1/2] Add Fantom integration tests (#55760)

Summary:

Add new Fantom integration tests for TouchableOpacity, achieving 40.54% line coverage for TouchableOpacity.js (from 0%).

Changelog: [Internal]

Differential Revision: D94360684
---
 .../__tests__/TouchableOpacity-itest.js       | 215 ++++++++++++++++++
 1 file changed, 215 insertions(+)
 create mode 100644 packages/react-native/Libraries/Components/Touchable/__tests__/TouchableOpacity-itest.js

diff --git a/packages/react-native/Libraries/Components/Touchable/__tests__/TouchableOpacity-itest.js b/packages/react-native/Libraries/Components/Touchable/__tests__/TouchableOpacity-itest.js
new file mode 100644
index 000000000000..cdb2cd4211cf
--- /dev/null
+++ b/packages/react-native/Libraries/Components/Touchable/__tests__/TouchableOpacity-itest.js
@@ -0,0 +1,215 @@
+/**
+ * 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
+ * @format
+ * @oncall react_native
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import type {HostInstance} from 'react-native';
+
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {createRef} from 'react';
+import {Text, TouchableOpacity} from 'react-native';
+import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
+import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
+
+describe('<TouchableOpacity>', () => {
+  describe('props', () => {
+    describe('rendering', () => {
+      it('renders as a view with accessible="true"', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<TouchableOpacity />);
+        });
+
+        expect(root.getRenderedOutput({props: ['accessible']}).toJSX()).toEqual(
+          <rn-view accessible="true" />,
+        );
+      });
+    });
+
+    describe('style', () => {
+      it('applies style props', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableOpacity
+              style={{
+                width: 100,
+                height: 50,
+                backgroundColor: 'blue',
+              }}
+            />,
+          );
+        });
+
+        expect(
+          root
+            .getRenderedOutput({
+              props: ['width', 'height', 'backgroundColor'],
+            })
+            .toJSX(),
+        ).toEqual(
+          <rn-view
+            backgroundColor="rgba(0, 0, 255, 1)"
+            height="50.000000"
+            width="100.000000"
+          />,
+        );
+      });
+    });
+
+    describe('activeOpacity', () => {
+      it('does not render explicit opacity when using default', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<TouchableOpacity />);
+        });
+
+        // Default opacity of 1 is not rendered as a prop
+        expect(root.getRenderedOutput({props: ['opacity']}).toJSX()).toEqual(
+          <rn-view />,
+        );
+      });
+
+      it('renders with custom style opacity', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<TouchableOpacity style={{opacity: 0.5}} />);
+        });
+
+        expect(root.getRenderedOutput({props: ['opacity']}).toJSX()).toEqual(
+          <rn-view opacity="0.5" />,
+        );
+      });
+    });
+
+    describe('onPress', () => {
+      it('triggers callback when the element is pressed', () => {
+        const elementRef = createRef<HostInstance>();
+        const onPressCallback = jest.fn();
+
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableOpacity
+              ref={elementRef}
+              onPress={onPressCallback}
+              style={{height: 100}}
+            />,
+          );
+        });
+
+        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        Fantom.dispatchNativeEvent(element, 'click');
+
+        expect(onPressCallback).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('disabled', () => {
+      it('cannot be pressed when disabled', () => {
+        const elementRef = createRef<HostInstance>();
+        const onPressCallback = jest.fn();
+
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableOpacity
+              ref={elementRef}
+              onPress={onPressCallback}
+              disabled={true}
+            />,
+          );
+        });
+
+        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        Fantom.dispatchNativeEvent(element, 'click');
+
+        expect(onPressCallback).toHaveBeenCalledTimes(0);
+      });
+
+      it('sets accessibilityState disabled to true', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<TouchableOpacity disabled={true} />);
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+        ).toEqual(
+          <rn-view accessibilityState="{disabled:true,selected:false,checked:None,busy:false,expanded:null}" />,
+        );
+      });
+    });
+
+    describe('children', () => {
+      it('renders children inside the touchable', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableOpacity>
+              <Text>Press me</Text>
+            </TouchableOpacity>,
+          );
+        });
+
+        const element = ensureInstance(
+          root.document.documentElement.firstElementChild,
+          ReactNativeElement,
+        );
+        expect(element.childNodes.length).toBe(1);
+
+        expect(root.getRenderedOutput({props: ['accessible']}).toJSX()).toEqual(
+          <rn-view accessible="true">
+            <rn-paragraph>Press me</rn-paragraph>
+          </rn-view>,
+        );
+      });
+    });
+  });
+
+  describe('ref', () => {
+    describe('instance', () => {
+      it('is an element node', () => {
+        const elementRef = createRef<HostInstance>();
+
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<TouchableOpacity ref={elementRef} />);
+        });
+
+        expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
+      });
+
+      it('uses the "RN:View" tag name', () => {
+        const elementRef = createRef<HostInstance>();
+
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<TouchableOpacity ref={elementRef} />);
+        });
+
+        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        expect(element.tagName).toBe('RN:View');
+      });
+    });
+  });
+});

From 6ff720a96a5e9002c6f9a43db49602958985f89e Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuelsusla@meta.com>
Date: Thu, 26 Feb 2026 03:32:58 -0800
Subject: [PATCH 2/2] Add Fantom integration tests for ActivityIndicator

Summary:
Add new Fantom integration tests for ActivityIndicator, achieving 100% line coverage for ActivityIndicator.js (from 0%).

Changelog: [Internal]

Differential Revision: D94360957
---
 .../__tests__/ActivityIndicator-itest.js      | 191 ++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 packages/react-native/Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-itest.js

diff --git a/packages/react-native/Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-itest.js b/packages/react-native/Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-itest.js
new file mode 100644
index 000000000000..df3e4cbe57d8
--- /dev/null
+++ b/packages/react-native/Libraries/Components/ActivityIndicator/__tests__/ActivityIndicator-itest.js
@@ -0,0 +1,191 @@
+/**
+ * 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
+ * @format
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import ensureInstance from '../../../../src/private/__tests__/utilities/ensureInstance';
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {createRef} from 'react';
+import {ActivityIndicator} from 'react-native';
+import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
+
+describe('<ActivityIndicator>', () => {
+  describe('props', () => {
+    describe('size', () => {
+      it('defaults to "small" (20x20)', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<ActivityIndicator />);
+        });
+
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-androidProgressBar height="20.000000" width="20.000000" />,
+        );
+      });
+
+      it('renders with size "small"', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<ActivityIndicator size="small" />);
+        });
+
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-androidProgressBar height="20.000000" width="20.000000" />,
+        );
+      });
+
+      it('renders with size "large" (36x36)', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<ActivityIndicator size="large" />);
+        });
+
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-androidProgressBar height="36.000000" width="36.000000" />,
+        );
+      });
+
+      it('renders with numeric size on Android', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<ActivityIndicator size={48} />);
+        });
+
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-androidProgressBar height="48.000000" width="48.000000" />,
+        );
+      });
+    });
+
+    describe('color', () => {
+      it('renders an AndroidProgressBar when color is set', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<ActivityIndicator color="red" />);
+        });
+
+        // Color is a native prop not serialized as a view attribute,
+        // but the component still renders correctly
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-androidProgressBar height="20.000000" width="20.000000" />,
+        );
+      });
+    });
+
+    describe('animating', () => {
+      it('defaults to true', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<ActivityIndicator />);
+        });
+
+        // Component renders normally when animating (default)
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-androidProgressBar height="20.000000" width="20.000000" />,
+        );
+      });
+
+      it('renders when animating is false', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<ActivityIndicator animating={false} />);
+        });
+
+        // Component still renders when not animating
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-androidProgressBar height="20.000000" width="20.000000" />,
+        );
+      });
+    });
+
+    describe('style', () => {
+      it('applies wrapper View style', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<ActivityIndicator style={{opacity: 0.5}} />);
+        });
+
+        expect(root.getRenderedOutput({props: ['opacity']}).toJSX()).toEqual(
+          <rn-view opacity="0.5">
+            <rn-androidProgressBar />
+          </rn-view>,
+        );
+      });
+    });
+
+    describe('accessibilityLabel', () => {
+      it('is propagated to the native component', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <ActivityIndicator accessibilityLabel="Loading content" />,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(),
+        ).toEqual(
+          <rn-androidProgressBar accessibilityLabel="Loading content" />,
+        );
+      });
+    });
+
+    describe('testID', () => {
+      it('is propagated to the native component', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<ActivityIndicator testID="loading-spinner" />);
+        });
+
+        expect(root.getRenderedOutput({props: ['testID']}).toJSX()).toEqual(
+          <rn-androidProgressBar testID="loading-spinner" />,
+        );
+      });
+    });
+  });
+
+  describe('ref', () => {
+    it('provides a valid ReactNativeElement instance', () => {
+      const elementRef =
+        createRef<React.ElementRef<typeof ActivityIndicator>>();
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(<ActivityIndicator ref={elementRef} />);
+      });
+
+      expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
+    });
+
+    it('has the correct tag name', () => {
+      const elementRef =
+        createRef<React.ElementRef<typeof ActivityIndicator>>();
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(<ActivityIndicator ref={elementRef} />);
+      });
+
+      const element = ensureInstance(elementRef.current, ReactNativeElement);
+      expect(element.tagName).toBe('RN:AndroidProgressBar');
+    });
+  });
+});