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

Summary:
This adds the `id` prop to `Text`, `TouchableWithoutFeedback` and `View` components as requested on facebook#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: facebook#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

Author: gabrieldonadel

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -66,6 +66,7 @@ type Props = $ReadOnly<{|
   disabled?: ?boolean,
   focusable?: ?boolean,
   hitSlop?: ?EdgeInsetsProp,
+  id?: string,
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   nativeID?: ?string,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
@@ -169,6 +170,7 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
         ariaLive === 'off'
           ? 'none'
           : ariaLive ?? this.props.accessibilityLiveRegion,
+      nativeID: this.props.id ?? this.props.nativeID,
     };
     for (const prop of PASSTHROUGH_PROPS) {
       if (this.props[prop] !== undefined) {

Libraries/Components/View/View.js

@@ -38,7 +38,9 @@ const View: React.AbstractComponent<
       'aria-label': ariaLabel,
       'aria-hidden': ariaHidden,
       focusable,
+      id,
       importantForAccessibility,
+      nativeID,
       pointerEvents,
       role,
       style,
@@ -164,6 +166,7 @@ const View: React.AbstractComponent<
               ? 'no-hide-descendants'
               : importantForAccessibility
           }
+          nativeID={id ?? nativeID}
           {...restWithDefaultProps}
           style={style}
           pointerEvents={newPointerEvents}

Libraries/Components/View/ViewPropTypes.js

@@ -546,6 +546,15 @@ export type ViewProps = $ReadOnly<{|
    */
   collapsable?: ?boolean,
 
+  /**
+   * Used to locate this view from native classes.
+   *
+   * > This disables the 'layout-only view removal' optimization for this view!
+   *
+   * See https://reactnative.dev/docs/view#id
+   */
+  id?: string,
+
   /**
    * Used to locate this view in end-to-end tests.
    *

Libraries/Text/Text.js

@@ -42,6 +42,8 @@ const Text: React.AbstractComponent<
     'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
     ellipsizeMode,
+    id,
+    nativeID,
     onLongPress,
     onPress,
     onPressIn,
@@ -208,6 +210,7 @@ const Text: React.AbstractComponent<
       isHighlighted={isHighlighted}
       isPressable={isPressable}
       selectable={_selectable}
+      nativeID={id ?? nativeID}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
       style={style}
@@ -226,6 +229,7 @@ const Text: React.AbstractComponent<
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
+        nativeID={id ?? nativeID}
         numberOfLines={numberOfLines}
         selectionColor={selectionColor}
         style={style}

Libraries/Text/TextProps.js

@@ -99,6 +99,13 @@ export type TextProps = $ReadOnly<{|
    */
   ellipsizeMode?: ?('clip' | 'head' | 'middle' | 'tail'),
 
+  /**
+   * Used to locate this view from native code.
+   *
+   * See https://reactnative.dev/docs/text#nativeid
+   */
+  id?: string,
+
   /**
    * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
    * Possible values:

ReactAndroid/src/androidTest/java/com/facebook/react/tests/IdTestCase.java

@@ -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);
+  }
+}

ReactAndroid/src/androidTest/js/IdTestModule.js

@@ -0,0 +1,76 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+const React = require('react');
+const TouchableBounce = require('react-native/Libraries/Components/Touchable/TouchableBounce');
+
+const {
+  Image,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableHighlight,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} = require('react-native');
+
+/**
+ * All the views implemented on Android, each with the id property set.
+ * We test that:
+ * - The app renders fine
+ * - The id property is passed to the native views via the nativeID property
+ */
+class IdTestApp extends React.Component<{...}> {
+  render(): React.Node {
+    const uri =
+      'data:image/gif;base64,' +
+      'R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapy' +
+      'uvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/' +
+      'TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5' +
+      'iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97V' +
+      'riy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7';
+    return (
+      <View>
+        <Image id="Image" source={{uri: uri}} style={styles.base} />
+        <Text id="Text">text</Text>
+        <TextInput id="TextInput" value="Text input" />
+        <TouchableBounce id="TouchableBounce">
+          <Text>TouchableBounce</Text>
+        </TouchableBounce>
+        <TouchableHighlight id="TouchableHighlight">
+          <Text>TouchableHighlight</Text>
+        </TouchableHighlight>
+        <TouchableOpacity id="TouchableOpacity">
+          <Text>TouchableOpacity</Text>
+        </TouchableOpacity>
+        <TouchableWithoutFeedback id="TouchableWithoutFeedback">
+          <View>
+            <Text>TouchableWithoutFeedback</Text>
+          </View>
+        </TouchableWithoutFeedback>
+        <View id="View" />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  base: {
+    width: 150,
+    height: 50,
+  },
+});
+
+module.exports = {
+  IdTestApp,
+};

ReactAndroid/src/androidTest/js/TestApps.js

@@ -48,6 +48,10 @@ const apps = [
     component: () =>
       require('./ScrollViewTestModule').HorizontalScrollViewTestApp,
   },
+  {
+    appKey: 'IdTestApp',
+    component: () => require('./IdTestModule').IdTestApp,
+  },
   {
     appKey: 'ImageOverlayColorTestApp',
     component: () => require('./ImageOverlayColorTestApp'),