---
title: "Tag React Native Views in Android"
slug: "tag-react-native-views-in-android"
updated: 2026-08-06T15:34:25Z
published: 2026-08-06T15:34:25Z
canonical: "support.whatfix.com/tag-react-native-views-in-android"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tag React Native Views in Android and iOS

Whatfix Mobile uses testID to uniquely identify the screen which is used in testing frameworks [Espresso](https://developer.android.com/training/testing/espresso) and [Appium](https://appium.io/docs/en/latest/).

### Why should you tag React Native Views in Android?

Whatfix Mobile uniquely identifies the screen of native apps with the properties of an element such as 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. React Native 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 accessibilityIdentifier on the screen. To tag the elements, you need to add an attribute called testID in the element. React Native converts the testID attribute into the accessibilityIdentifier attribute.

          Info:

          

For more information on React Native views and identifiers see,

- [View in React Native](https://reactnative.dev/docs/view.html#testid)
- [React Native and unique identifiers](https://developers.perfectomobile.com/display/TT/React-Native+and+unique+identifiers)

### How to tag views?

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 might tag any React Native view in a similar way.

          Note:

          

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

          Info:

          

Expand the accordion(s) for more details.

    View
    
     

Consider a View which has three children. You might 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>
```

 

 
 

          Info:

          

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>
```