Tagless Data Capture

Automatically capture screen transitions and tap interactions without manual instrumentation for each event.

Step 1 : Set up the NetmeraAnalyticProvider

Wrap your app's root component with NetmeraAnalyticProvider and pass the navigation container via the navigationRef prop. The provider dynamically manages screen tracking and tap tracking based on the configuration received from the Netmera dashboard.

App.tsx

import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native';
import { NetmeraAnalyticProvider } from 'react-native-netmera';

export default function App() {
  const navigationRef = useNavigationContainerRef();

  return (
    <NetmeraAnalyticProvider navigationRef={navigationRef}>
      <NavigationContainer ref={navigationRef}>
        {/* your navigators */}
      </NavigationContainer>
    </NetmeraAnalyticProvider>
  );
}

Order matters: NetmeraAnalyticProvider must be placed outside, wrapping the NavigationContainer. Reversing the order disables screen tracking.

Use a single provider: Only one NetmeraAnalyticProvider should be mounted at a time. The current screen name is stored in a module-level singleton; mounting multiple providers simultaneously will cause them to overwrite each other's screen state.

Step 2 : Choose your React Navigation setup

Dynamic API — React Navigation v6 / v7

The same setup applies to both versions of the Dynamic API: create a ref with useNavigationContainerRef() and pass it to both the Provider and the NavigationContainer.

Tsx

import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native';
import { NetmeraAnalyticProvider } from 'react-native-netmera';

export default function App() {
  const navigationRef = useNavigationContainerRef();

  return (
    <NetmeraAnalyticProvider navigationRef={navigationRef}>
      <NavigationContainer ref={navigationRef}>
        <Stack.Navigator>…</Stack.Navigator>
      </NavigationContainer>
    </NetmeraAnalyticProvider>
  );
}

Static API — React Navigation v7

In the Static API, the component created with createStaticNavigation uses React.forwardRef and accepts the ref prop directly.

Tsx

import {
  useNavigationContainerRef,
  createStaticNavigation,
} from '@react-navigation/native';
import { NetmeraAnalyticProvider } from 'react-native-netmera';

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  const navigationRef = useNavigationContainerRef();

  return (
    <NetmeraAnalyticProvider navigationRef={navigationRef}>
      <Navigation ref={navigationRef} />
    </NetmeraAnalyticProvider>
  );
}

Comparison

Feature	v6 Dynamic	v7 Dynamic	v7 Static
navigationRef required?	Required	Required	Required
Screen tracking	✅Yes	✅Yes	✅Yes
Action tracking	✅Yes	✅Yes	✅Yes

Step 3 : Check architecture compatibility

New Architecture (Fabric) — Recommended

Feature	Status	Code
Screen tracking	Full	Detected via navigationRef
Pressable / TouchableOpacity	Full	—
Switch	Full	Value (true/false) logged when Collect Values is enabled in the dashboard
TextInput focus	Partial	See note below
FlatList / SectionList index	Full	Added automatically when Collect Values is enabled

TextInput — Android New Architecture limitation: On Android Fabric, ReactEditText consumes the ACTION_UP event at the native layer, so onTouchEnd is not triggered for TextInput focus events and automatic tracking does not occur. In this case, use Netmera.trackAction inside the onFocus callback to record the interaction manually.

Legacy Architecture (Paper)

The same setup applies as with New Architecture — navigationRef is required for both architectures.

Feature	Status	Note
Screen tracking	Full	navigationRef required
Pressable / TouchableOpacity	Full	—
Switch	Full	—
TextInput focus	Full	—
FlatList / SectionList index	Full	Added automatically when Collect Values is enabled

Step 4 : Review action tracking behavior

When autotracking detects a touch, it uses the following priority order to identify the component. If no value is found in the chain, the event is not logged.

Priority Order

accessibilityLabel→ "add-to-cart" ✅ Recommended
testID→ "btn-submit"
placeholder→ "Enter your email"
First child text→ "Add to Cart"  Fragile fallback

Log format

Log Format

HomeScreen   | add-to-cart                      - standard tap
SettingsScreen | dark-mode-switch | true         - with Switch value
ProductList  | FlatList | product-card | index:3 - FlatList
CategoryList | SectionList | product-card | section:1,index:2 - SectionList

Automatically supported components

Component	Identification Order	Note
Pressable	accessibilityLabel → testID → text	—
TouchableOpacity	accessibilityLabel → testID → text	—
TouchableHighlight	accessibilityLabel → testID → text	—
Switch	accessibilityLabel → testID	Value (true/false) logged when Collect Values is enabled in the dashboard
TextInput	accessibilityLabel → testID → placeholder	Logged on focus; content is not captured
FlatList items	accessibilityLabel → testID → text	Item index added automatically when Collect Values is enabled
SectionList items	accessibilityLabel → testID → text	Section and item index added when Collect Values is enabled

Step 5 : Add manual tracking for unsupported components

Autotracking works by inspecting the onPress and onValueChange props in the fiber tree of React Native's standard components (Pressable, TouchableOpacity, Switch).

Components that do not directly expose these props are not automatically tracked. Third-party components that internally use Pressable or TouchableOpacity and forward an accessibilityLabel can be tracked automatically.

Manual Tracking: Netmera.trackAction

Use Netmera.trackAction for interactions that are not automatically captured. The method automatically prepends the current screen name to the path.

import { Netmera } from 'react-native-netmera';

// Basic usage
Netmera.trackAction('category-selector');
// → "HomeScreen|category-selector"

// With value — | separator builds a structured path
Netmera.trackAction(`category-selector|${selectedItem}`);
// → "HomeScreen|category-selector|Electronics"

Example: Third-Party Dropdown

<SelectDropdown
  data={categories}
  onSelect={(selectedItem) => {
    Netmera.trackAction(`category-selector|${selectedItem}`);
  }}
  renderButton={(selectedItem) => (
    <View accessibilityLabel="category-selector">
      <Text>{selectedItem ?? 'Select Category'}</Text>
    </View>
  )}
/>

Example: Gesture-Based Component

const swipeGesture = Gesture.Pan().onEnd(() => {
  runOnJS(Netmera.trackAction)('product-card|swipe');
});

<GestureDetector gesture={swipeGesture}>
  <View>…</View>
</GestureDetector>

Step 6 : Apply best practices

Using accessibilityLabel

The most effective way to improve tracking quality is to add meaningful accessibilityLabel to interactive components. This is especially important for icon buttons and components without text content.

❌Not tracked

// No identifier — not logged
<Pressable onPress={handleCart}>
  <CartIcon />
</Pressable>

✅Tracked

// With accessibilityLabel
<Pressable
  accessibilityLabel="add-to-cart"
  onPress={handleCart}>
  <CartIcon />
</Pressable>

Identifier choice comparison

Method	Stability	Note
accessibilityLabel	High	Language-independent; also improves screen reader support
testID	Medium	May be stripped from production builds
Text content	Low	Changes with copy updates or localization; path drifts

For TextInput

For TextInput components where accessibilityLabel or testID cannot be added, placeholder is used as a fallback. However, placeholder is locale-sensitive — prefer an explicit label when possible.

// ✓ Preferred
<TextInput
  accessibilityLabel="email-input"
  placeholder="Enter your email address"
/>

// ⚠ Works but path drifts if placeholder changes
<TextInput
  placeholder="Enter your email address"
/>