Prerequisites

Leap uses testId to uniquely identify the screen which is used in testing frameworks Espresso, Appium.

Why tag React Native Views in Android?

Leap identifies a screen of native apps uniquely with the properties of an element like resource-id and tag in the screen. In react-native resource-id is auto-generated at run time, 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 tag React Native Views in iOS?

Leap identifies a screen of native apps uniquely with the property of an element called accessibility label in the screen. To tag elements, you need to add an attribute called testID in the element. ReactNative converts testID attribute into accessibility label attribute.
Here are some resources
React-Native and unique identifiers - TIPS AND TRICKS - Documentation
From the official page of Selenium/Appium Troubleshooting
View · React Native
reactnative
From the official page of React Native

How to tag views?

You can tag views by adding testID attribute in the react-native views. Below is a list of react-native basic views with examples on how to add testID. You can tag any react-native views in a similar way.
Assign testID for the view to be unique in the current screen. More the unique testID, easier is the context detection
  1. 1.
    View
Consider a View which has three children. You can assign testID as given below.
<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>
2. Button
<Button
onPress={onPressLearnMore}
title="Learn More"
testID="tag_button_learn_more"
/>
3. 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>
4. TextInput
<TextInput testID="tag_inputtext_enter_name" style={styles.input}
onChangeText={onChangeText} placeholder="Enter Name"/>
5. Image
<Image testID="tag_image_react_native_tiny_logo"
style={styles.tinyLogo}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}/>
6. ImageBackground
<ImageBackground
testID="tag_bg_image_inside_text"
source={image} style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
7. Switch
<Switch testID="tag_switch_privacy_policy"
onValueChange={toggleSwitch}
/>
8. 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>
Whenever a view is selected its property selected changes from false to true. But in the case of Tab Navigation 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.
9. WebViews
<WebView
testID='tag_webview_product_page'
source={{ uri: sourceUri }}
javaScriptEnabled={true}
/>
10. 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>