Top
Tag React Native Views in Android and iOS
  • 22 Sep 2022
  • 2 Minutes To Read
  • Dark
    Light
  • PDF

Tag React Native Views in Android and iOS

  • Dark
    Light
  • PDF

Article summary

Whatfix Mobile uses testID to uniquely identify the screen which is used in testing frameworks Espresso and Appium.

Why should you tag React Native Views in Android?

Whatfix Mobile identifies the screen of native apps uniquely with the properties of an element like resource-id and tag in the screen. In React Native, the resource-id is auto-generated at run time. Hence, it is not reliable to identify a screen using resource-id. But tag is not auto-generated; rather, it needs to be added manually. To tag elements, you need to add an attribute called testID in the element. ReactNative converts testID attribute into tag attribute.

Why should you tag React Native Views in iOS?

Whatfix Mobile identifies the screen of native apps uniquely with the property of an element called the accessibility label on the screen. To tag the elements, you need to add an attribute called testID in the element. ReactNative converts the testID attribute into the accessibility label attribute.

your title goes here

For more information on React Native views and identifiers see,

How to tag views?

You can tag views by adding testID attribute in the React Native views.
The following is a list of React Native basic views with examples on how to add testID. You can tag any React Native view in a similar way.

your title goes here

Assign a unique testID for the view in the current screen. If the testID is unique, context detection is better.

View

Consider a View which has three children. You can assign testID as shown in the following code snippet.

<View style={{ flexDirection: "row", height: 100, padding: 20}}>
      <View testID="tag_view_blue" style={{ backgroundColor: "blue", flex: 0.3 }} />
      <View testID="tag_view_red" style={{ backgroundColor: "red", flex: 0.5 }} />
      <Text testID="tag_text_hello_world" >Hello World!</Text>
</View>

Button

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  testID="tag_button_learn_more"  
/>

Text

<Text testID="tag_text_hello_world_base" style={styles.baseText}>
  <Text testID="tag_text_title_hello_world" style={styles.titleText} onPress={onPressTitle}>
    {"Hello world"}
    {"\n"}
    {"\n"}
  </Text>
  <Text testID="tag_text_body_hello_world" numberOfLines={5}>{bodyText}</Text>
</Text>

TextInput

<TextInput testID="tag_inputtext_enter_name" style={styles.input} 
      onChangeText={onChangeText} placeholder="Enter Name"/>

Image

<Image testID="tag_image_react_native_tiny_logo"
       style={styles.tinyLogo}
       source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}/>

ImageBackground

<ImageBackground 
     testID="tag_bg_image_inside_text"
     source={image} style={styles.image}>
     <Text style={styles.text}>Inside</Text>
</ImageBackground>

Switch

<Switch testID="tag_switch_privacy_policy"
        onValueChange={toggleSwitch}
      />

Tab Navigation

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen testID="tag_tab_home_screen_selected" name="Home" component={HomeScreen} />
    <Tab.Screen testID="tag_tab_setting_screen" name="Settings" component={SettingsScreen} />
  </Tab.Navigator>
</NavigationContainer>

your title goes here

Whenever a view is selected, its property selected changes from false to true. But in the case of Tab Navigation, the selected property doesn't change. In this case, Leap won't be able to identify the selected tab. For leap to identify selected tab, whenever a tab is selected, append the testID with _selected key. In this scenario, if HomeScreen Tab is selected, change the testID to tag_tab_home_screen_selected. if SettingsScreen Tab is selected, change testID to tag_tab_setting_screen_selected.

WebViews

<WebView
        testID='tag_webview_product_page'          
        source={{ uri: sourceUri }}
        javaScriptEnabled={true}
/>

ScrollView

<ScrollView
        testID='tag_scrollview_product_page'          
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text testID='tag_text_pull_down_to_refresh'>Pull down to see RefreshControl indicator</Text>
      </ScrollView>


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.