feat: Add id prop to Text, TouchableWithoutFeedback and View components (#34522)

Summary: This adds the `id` prop to `Text`, `TouchableWithoutFeedback` and `View` components as requested on https://github.com/facebook/react-native/issues/34424 mapping the existing `nativeID` prop to `id`. As this components are inherited by others this also adds the `id` prop support to `Image`, `TouchableBounce`, `TouchableHighlight`, `TouchableOpacity` and `TextInput`. This PR also adds android tests ensuring that the `id` property is passed to the native view via the `nativeID` prop, these tests were based on the existing `nativeID` tests ([NativeIdTestCase.java](https://github.com/facebook/react-native/blob/main/ReactAndroid/src/androidTest/java/com/facebook/react/tests/NativeIdTestCase.java)). ## Changelog [General] [Added] - Add id prop to Text, TouchableWithoutFeedback and View components Pull Request resolved: https://github.com/facebook/react-native/pull/34522 Test Plan: Ensure that the new `id` prop android tests pass on CircleCI Reviewed By: lunaleaps Differential Revision: D39089639 Pulled By: cipolleschi fbshipit-source-id: 884fb2461720835ca5048004fa79096dac89c51c
2025-11-01 09:14:26 +00:00 · 2022-09-09 11:16:28 -07:00
parent 720cdbc658
commit 3e97d5fe58
8 changed files with 193 additions and 0 deletions
@@ -0,0 +1,88 @@
+/*
+ * 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.
+ */
+
+package com.facebook.react.tests;
+
+import android.view.View;
+import com.facebook.react.testing.ReactAppInstrumentationTestCase;
+import com.facebook.react.uimanager.util.ReactFindViewUtil;
+import java.util.Arrays;
+import java.util.List;
+
+/**
+ * Tests that the 'id' property can be set on various views. The 'id' property is used to reference
+ * react managed views from native code.
+ */
+public class IdTestCase extends ReactAppInstrumentationTestCase {
+
+  @Override
+  protected String getReactApplicationKeyUnderTest() {
+    return "IdTestApp";
+  }
+
+  private final List<String> viewTags =
+      Arrays.asList(
+          "Image",
+          "Text",
+          "TouchableBounce",
+          "TouchableHighlight",
+          "TouchableOpacity",
+          "TouchableWithoutFeedback",
+          "TextInput",
+          "View");
+
+  private boolean mViewFound;
+
+  @Override
+  protected void setUp() throws Exception {
+    mViewFound = false;
+    ReactFindViewUtil.addViewListener(
+        new ReactFindViewUtil.OnViewFoundListener() {
+          @Override
+          public String getNativeId() {
+            return viewTags.get(0);
+          }
+
+          @Override
+          public void onViewFound(View view) {
+            mViewFound = true;
+          }
+        });
+    super.setUp();
+  }
+
+  public void testPropertyIsSetForViews() {
+    for (String nativeId : viewTags) {
+      View viewWithTag = ReactFindViewUtil.findView(getActivity().getRootView(), nativeId);
+      assertNotNull(
+          "View with id " + nativeId + " was not found. Check IdTestModule.js.", viewWithTag);
+    }
+  }
+
+  public void testViewListener() {
+    assertTrue("OnViewFound callback was never invoked", mViewFound);
+  }
+
+  public void testFindView() {
+    mViewFound = false;
+    ReactFindViewUtil.findView(
+        getActivity().getRootView(),
+        new ReactFindViewUtil.OnViewFoundListener() {
+          @Override
+          public String getNativeId() {
+            return viewTags.get(0);
+          }
+
+          @Override
+          public void onViewFound(View view) {
+            mViewFound = true;
+          }
+        });
+    assertTrue(
+        "OnViewFound callback should have successfully been invoked synchronously", mViewFound);
+  }
+}