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?

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"
/>