feat: add support for testID

Author: Nodonisko

apps/example/ios/Podfile.lock

@@ -1210,31 +1210,6 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - react-native-bottom-tabs (0.7.1):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - react-native-bottom-tabs/common (= 0.7.1)
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - SDWebImage (>= 5.19.1)
-    - SDWebImageSVGCoder (>= 1.7.0)
-    - SwiftUIIntrospect (~> 1.0)
-    - Yoga
-  - react-native-bottom-tabs/common (0.7.1):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1259,71 +1234,7 @@ PODS:
     - SwiftUIIntrospect (~> 1.0)
     - Yoga
   - react-native-safe-area-context (4.14.0):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - react-native-safe-area-context/common (= 4.14.0)
-    - react-native-safe-area-context/fabric (= 4.14.0)
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
-  - react-native-safe-area-context/common (4.14.0):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
     - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
-  - react-native-safe-area-context/fabric (4.14.0):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - react-native-safe-area-context/common
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
   - React-nativeconfig (0.75.4)
   - React-NativeModulesApple (0.75.4):
     - glog
@@ -1582,7 +1493,6 @@ PODS:
     - React-ImageManager
     - React-jsi
     - React-NativeModulesApple
-    - React-RCTAppDelegate
     - React-RCTFabric
     - React-rendererdebug
     - React-utils
@@ -1616,29 +1526,6 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - RNScreens (4.3.0):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-RCTImage
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - RNScreens/common (= 4.3.0)
-    - Yoga
-  - RNScreens/common (4.3.0):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1719,7 +1606,6 @@ DEPENDENCIES:
   - React-idlecallbacksnativemodule (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/idlecallbacks`)
   - React-ImageManager (from `../../../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios`)
   - React-jsc (from `../../../node_modules/react-native/ReactCommon/jsc`)
-  - React-jsc/Fabric (from `../../../node_modules/react-native/ReactCommon/jsc`)
   - React-jserrorhandler (from `../../../node_modules/react-native/ReactCommon/jserrorhandler`)
   - React-jsi (from `../../../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../../../node_modules/react-native/ReactCommon/jsiexecutor`)
@@ -1926,15 +1812,15 @@ SPEC CHECKSUMS:
   React-CoreModules: 9fac2d31803c0ed03e4ddaa17f1481714f8633a5
   React-cxxreact: c72a7a8066fc4323ea85a3137de50c8a10a69794
   React-debug: 3d21f69d8def0656f8b8ec25c0f05954f4d862c5
-  React-defaultsnativemodule: 95882787871a9e80337f464e4643f1c5e0a39198
-  React-domnativemodule: dc8aac826a90479ca4e05f096f1f8cd35c216f31
+  React-defaultsnativemodule: ca56510e8d1c07a48817b1423528c7464407ca45
+  React-domnativemodule: 5ef5656fda7dc3d35fdac312e06dec031481c183
   React-Fabric: 9347fa5c8fbfac6d5276dd9e52c91058467d0960
   React-FabricComponents: 68b9f8c4a7189c055a7eb67b182e8d98c4f75f47
   React-FabricImage: 062e20f8b360ca008f44d00a639951c8c37ba2aa
   React-featureflags: ee1abd6f71555604a36cda6476e3c502ca9a48e5
-  React-featureflagsnativemodule: 209f660bc398849cfb81712c93010276f25f337b
+  React-featureflagsnativemodule: 183b42cafab1e70a56b2608c26d04aff2bdf43d1
   React-graphics: d7dd9c8d75cad5af19e19911fa370f78f2febd96
-  React-idlecallbacksnativemodule: 17a0e379a7e3c9bc9653b6902f22f4208658d687
+  React-idlecallbacksnativemodule: 208b0d15e33c443607eccdc1fe3e081fe263a17f
   React-ImageManager: ab7a7d17dd0ff1ef1d4e1e88197d1119da9957ce
   React-jsc: 4d3352be620f3fe2272238298aaccc9323b01824
   React-jserrorhandler: d9e867bb83b868472f3f7601883f0403b3e3942d
@@ -1944,18 +1830,18 @@ SPEC CHECKSUMS:
   React-jsitracing: 0e8c0aadb1fcec6b1e4f2a66ee3b0da80f0f8615
   React-logger: d79b704bf215af194f5213a6b7deec50ba8e6a9b
   React-Mapbuffer: b982d5bba94a8bc073bda48f0d27c9b28417fae3
-  React-microtasksnativemodule: 8fa285fed833a04a754bf575f8ded65fc240b88d
-  react-native-bottom-tabs: a08eaf6baf1b78375e17019536783dbbca3190ba
-  react-native-safe-area-context: 73505107f7c673cd550a561aeb6271f152c483b6
+  React-microtasksnativemodule: 475ea38712131abd7f7935c82a41364cea2fa01f
+  react-native-bottom-tabs: 98686073234188180cb1ede85a0f977ddde9c8d0
+  react-native-safe-area-context: 4532f1a0c5d34a46b9324ccaaedcb5582a302b7d
   React-nativeconfig: 8c83d992b9cc7d75b5abe262069eaeea4349f794
   React-NativeModulesApple: b8465afc883f5bf3fe8bac3767e394d581a5f123
   React-perflogger: 59e1a3182dca2cee7b9f1f7aab204018d46d1914
   React-performancetimeline: a9d05533ff834c6aa1f532e05e571f3fd2e3c1ed
   React-RCTActionSheet: d80e68d3baa163e4012a47c1f42ddd8bcd9672cc
   React-RCTAnimation: bde981f6bd7f8493696564da9b3bd05721d3b3cc
-  React-RCTAppDelegate: e5865dbf46ddec6d9ed9310a05094d13f9bb043f
+  React-RCTAppDelegate: bc9c02d6dd4d162e3e1850283aba81bd246fc688
   React-RCTBlob: e492d54533e61a81f2601494a6f393b3e15e33b9
-  React-RCTFabric: e6ef266a60e885a0548b0f7a5e9737f42ccd596b
+  React-RCTFabric: f2f86a175bb2fd3ce6760fd37338c6332efac2a6
   React-RCTImage: 90448d2882464af6015ed57c98f463f8748be465
   React-RCTLinking: 1bd95d0a704c271d21d758e0f0388cced768d77d
   React-RCTNetwork: 218af6e63eb9b47935cc5a775b7a1396cf10ff91
@@ -1972,12 +1858,12 @@ SPEC CHECKSUMS:
   React-utils: 546831c4f1be57fac614f68de34ac8763e67db55
   ReactCodegen: 54f07f54275a16f8e3a32cbdd62bf008b0869c9c
   ReactCommon: 8377a2a5504f72e284ce1b1cd207d8455bdbfdf3
-  ReactNativeHost: a3cd2bc15b6deac7439318607ce5637d8a93a117
+  ReactNativeHost: 99c0ffb175cd69de2ac9a70892cd22dac65ea79d
   ReactTestApp-DevSupport: ce66fc1bbcf598d7e90616db390a0274c13e14e7
   ReactTestApp-Resources: 9c387cfe7185736e6a9045e5aa3e085367be6aa3
-  RNGestureHandler: 492b1d415a25506d1dc612e6a14932b1e697d835
-  RNScreens: 16a61c0a9fe4cd69af6489b8d10ba580b5e22ed0
-  RNVectorIcons: a1344e212e80e6e0f4537a9960148201175f4225
+  RNGestureHandler: 6980c0e9faf478d385c9fdfcee5175c4b1215a7c
+  RNScreens: 7e89f78c273715ff4aa625130ae7b3aabb940c28
+  RNVectorIcons: 0cbcb1c0cb6da1ca1d43d3d990255e584bb99028
   SDWebImage: 73c6079366fea25fa4bb9640d5fb58f0893facd8
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d

apps/example/src/Examples/ThreeTabs.tsx

@@ -13,17 +13,20 @@ export default function ThreeTabs() {
       focusedIcon: require('../../assets/icons/article_dark.png'),
       unfocusedIcon: require('../../assets/icons/chat_dark.png'),
       badge: '!',
+      testID: 'articleTestID',
     },
     {
       key: 'albums',
       title: 'Albums',
       focusedIcon: require('../../assets/icons/grid_dark.png'),
       badge: '5',
+      testID: 'albumsTestID',
     },
     {
       key: 'contacts',
       focusedIcon: require('../../assets/icons/person_dark.png'),
       title: 'Contacts',
+      testID: 'contactsTestID',
     },
   ]);
 

docs/docs/docs/guides/standalone-usage.md

@@ -218,3 +218,8 @@ Function to get the icon for a tab.
 Function to determine if a tab should be hidden.
 
 - Default: Uses `route.hidden`
+
+#### `getTestID`
+
+Function to get the test ID for a tab item.
+- Default: Uses `route.testID`

docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -159,11 +159,11 @@ Whether to enable haptic feedback on tab press. Defaults to false.
 Object containing styles for the tab label.
 
 Supported properties:
+
 - `fontFamily`
 - `fontSize`
 - `fontWeight`
 
-
 ### Options
 
 The following options can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`.
@@ -226,6 +226,10 @@ Due to native limitations on iOS, this option doesn't hide the tab item **when h
 
 Whether this screens should render the first time it's accessed. Defaults to true. Set it to false if you want to render the screen on initial render.
 
+#### `testID`
+
+Test ID for the tab item. This can be used to find the tab item in the native view hierarchy.
+
 ### Events
 
 The navigator can emit events on certain actions. Supported events are:

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -120,13 +120,24 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
         removeBadge(index)
       }
       post {
-        findViewById<View>(menuItem.itemId).setOnLongClickListener {
-          onTabLongPressed(menuItem)
-          true
-        }
-        findViewById<View>(menuItem.itemId).setOnClickListener {
-          onTabSelected(menuItem)
-          updateTintColors(menuItem)
+        val itemView = findViewById<View>(menuItem.itemId)
+        itemView?.let { view ->
+          view.setOnLongClickListener {
+            onTabLongPressed(menuItem)
+            true
+          }
+          view.setOnClickListener {
+            onTabSelected(menuItem)
+            updateTintColors(menuItem)
+          }
+          
+          item.testID?.let { testId ->
+            Log.d("RCTTabView", "Setting test ID for item: $testId")
+
+            view.findViewById<View>(com.google.android.material.R.id.navigation_bar_item_content_container)?.apply {
+                tag = testId
+            }
+          }
         }
         updateTextAppearance()
       }

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewImpl.kt

@@ -14,6 +14,7 @@ data class TabInfo(
   val badge: String,
   val activeTintColor: Int?,
   val hidden: Boolean,
+  val testID: String?,
 )
 
 class RCTTabViewImpl {
@@ -31,7 +32,8 @@ class RCTTabViewImpl {
             title = item.getString("title") ?: "",
             badge = item.getString("badge") ?: "",
             activeTintColor = if (item.hasKey("activeTintColor")) item.getInt("activeTintColor") else null,
-            hidden = if (item.hasKey("hidden")) item.getBoolean("hidden") else false
+            hidden = if (item.hasKey("hidden")) item.getBoolean("hidden") else false,
+            testID = item.getString("testID")
           )
         )
       }

packages/react-native-bottom-tabs/ios/TabViewImpl.swift

@@ -130,6 +130,7 @@ struct TabViewImpl: View {
             sfSymbol: tabData?.sfSymbol,
             labeled: props.labeled
           )
+          .accessibilityIdentifier(tabData?.testID ?? "")
         }
         .tag(tabData?.key)
         .tabBadge(tabData?.badge)

packages/react-native-bottom-tabs/ios/TabViewProvider.swift

@@ -12,21 +12,24 @@ public final class TabInfo: NSObject {
   public let sfSymbol: String
   public let activeTintColor: UIColor?
   public let hidden: Bool
+  public let testID: String?
 
   public init(
     key: String,
     title: String,
     badge: String,
     sfSymbol: String,
     activeTintColor: UIColor?,
-    hidden: Bool
+    hidden: Bool,
+    testID: String
   ) {
     self.key = key
     self.title = title
     self.badge = badge
     self.sfSymbol = sfSymbol
     self.activeTintColor = activeTintColor
     self.hidden = hidden
+    self.testID = testID
     super.init()
   }
 }
@@ -255,7 +258,8 @@ public final class TabInfo: NSObject {
             badge: itemDict["badge"] as? String ?? "",
             sfSymbol: itemDict["sfSymbol"] as? String ?? "",
             activeTintColor: RCTConvert.uiColor(itemDict["activeTintColor"] as? NSNumber),
-            hidden: itemDict["hidden"] as? Bool ?? false
+            hidden: itemDict["hidden"] as? Bool ?? false,
+            testID: itemDict["testID"] as? String ?? ""
           )
         )
       }

packages/react-native-bottom-tabs/src/TabView.tsx

@@ -111,6 +111,11 @@ interface Props<Route extends BaseRoute> {
    */
   getHidden?: (props: { route: Route }) => boolean | undefined;
 
+  /**
+   * Get testID for the tab, uses `route.testID` by default.
+   */
+  getTestID?: (props: { route: Route }) => string | undefined;
+
   /**
    * Background color of the tab bar.
    */
@@ -164,6 +169,7 @@ const TabView = <Route extends BaseRoute>({
   barTintColor,
   getHidden = ({ route }: { route: Route }) => route.hidden,
   getActiveTintColor = ({ route }: { route: Route }) => route.activeTintColor,
+  getTestID = ({ route }: { route: Route }) => route.testID,
   hapticFeedbackEnabled = false,
   tabLabelStyle,
   ...props
@@ -228,6 +234,7 @@ const TabView = <Route extends BaseRoute>({
           badge: getBadge?.({ route }),
           activeTintColor: processColor(getActiveTintColor({ route })),
           hidden: getHidden?.({ route }),
+          testID: getTestID?.({ route }),
         };
       }),
     [
@@ -237,6 +244,7 @@ const TabView = <Route extends BaseRoute>({
       getBadge,
       getActiveTintColor,
       getHidden,
+      getTestID,
     ]
   );