Tag React Native Views in Android and iOS
- 22 Sep 2022
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Tag React Native Views in Android and iOS
- Updated On 22 Sep 2022
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
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?