How to add resource-id to android in react-native

Question

I was trying to use firebase TestLab but it seems that it can only target resource-id. I had my elements like this:

<Input {...props} testID="usernameIput" />

But it seems that the testID is not mapped to the resource-id. If this is not the way to do it, then how can I get access to resource-id within react-native? If I can't what is the work around to add resource-id in android studio?

The community has talked about it, and the final solution is to use 'content-desc' as a key.[releated issue here](https://github.com/facebook/react-native/issues/9777) and [disscusion here](https://discuss.appium.io/t/react-native-ui-element-access-via-testid/7845/6) — Oboo Cheng, Oct 11 '17 at 01:52
**Jason** did you found worked solution how to set up resource-id ? — Kholiavko, Jan 20 '18 at 15:28
@Kholiavko so I found that you can open the project in the android studio and add it as if react native never exist. This won't mess up your react native build which is the bright side, but it is very time-consuming. I won't recommend this. Eventually, I used ignite framework which comes with a good testing framework. — Tianhao Zhou, Feb 13 '18 at 19:05

score 5 · Answer 1 · answered May 18 '21 at 14:30

5

Came to this nearly 4 years late but as of React Native 0.64 the testId attribute is now mapped to resource-id in Android builds which means Android testing frameworks that rely on this attribute will operate correctly.

The former workaround that used the accessibleLabel shouldn't be used going forward as it actually mangled accessibility. A further rationale for this change can be found here.

answered May 18 '21 at 14:30

James Xabregas

726
7
22

1

Oh boy, it's finally the time to refactor – Tianhao Zhou May 21 '21 at 04:53
https://github.com/facebook/react-native/pull/29610#issuecomment-815139702 It seems that there still a long way to use `testId` in all the components. – alwaysday1 Jul 15 '21 at 03:36

score 4 · Answer 2 · answered Nov 01 '19 at 11:43

Use both accessible and accessibleLabel on your views (so far, seems to work on View, Text, TextInput) and UiAutomator will generate content-desc field from accessibleLabel.

For now, we can use content-desc to identify tags.

DOC on accessiblity label: https://facebook.github.io/react-native/docs/accessibility.html#accessibilitylabel-ios-android.

<Text
    testID="btnText"   //works for iOS
    accessibilityLabel="btnText"    //works for android & iOS content-description
    accessible
  >
    {text}
  </Text>

score 0 · Answer 3 · answered Feb 15 '19 at 12:09

Try building for debug. This solution was proposed here

You can build for debug using the answer here:

#React-Native 0.49.0+
react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug

#React-Native 0-0.49.0
react-native bundle --dev false --platform android --entry-file index.android.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug

Then to build the APK's after bundling:

$ cd android
#Create debug build:
$ ./gradlew assembleDebug
#Create release build:
$ ./gradlew assembleRelease #Generated `apk` will be located at `android/app/build/outputs/apk`

How to add resource-id to android in react-native

3 Answers3