How to set the accessibilityIdentifier on a React Native component?

Question

I’d like to add an accessibilityIdentifier to a React Native component, so that I can use Xcode’s UI testing to navigate around my app.

Is there a way to specify the accessibilityIdentifier (not the accessibilityLabel) for React Native?

Bristletail

Answer 1

You can add an accessibilityIdentifier on React Native components (View, Text, Image...) using the testID property. This gets added to the component as a accessibilityIdentifier on iOS. Note that it doesn't work on custom components.

Here's an example:

<TextInput
  placeholderTextColor="#dddddd"
  style={[styles.main, styles.textColor]}
  placeholder="Add a new todo item"
  onChangeText={this.handleInputChanges}
  value={inputValue}
  testID="addToDoItem"
/>

Violist

Many thanks for your answer @Naishy. What if one wants to put identifiers in custom components ? Can he/she use any of the accessibility identifiers from here: necolas.github.io/react-native-web/docs/accessibility or not ? – Anjanetteanjela

@GeorgePligoropoulos I don't see the relation between react-native and react-native-web here – Locksmith

@Violist this is not true, especially for Android where it is more complexe than that due to React native bug, if you add accessible={true} and/or accessibilityLabel="something", you can have a bunch of undesired effect. A proper answer would explain to everyone how they are related and what are solution for each case. – Locksmith