React Components

The WhatzBug SDK provides React components for gesture tracking, screen identification, and journey recording. With the simplified integration model, most of these are optional — setNavigationRef() replaces per-screen wrappers, and WZBDebugRoot is no longer required. These remain available for advanced manual override scenarios.

Components Overview

<WZBDebugRoot> (deprecated)

No longer required. With the simplified integration model (init({ debug: true })), gesture capture is wired automatically. This component still works but is no longer recommended for new integrations.

import { WZBDebugRoot } from '@whatzbug/react-native';

export default function App() {
  return (
    <WZBDebugRoot>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </WZBDebugRoot>
  );
}

<WZBScreen name="...">

Wrap each screen component. The name prop is used to label journey events and correlate screenshots.

import { WZBScreen } from '@whatzbug/react-native';

function ProfileScreen() {
  return (
    <WZBScreen name="ProfileScreen">
      <View>
        <Text>User Profile</Text>
      </View>
    </WZBScreen>
  );
}

useWZBScreen(name) Hook

Alternative to the component wrapper. Call at the top of your screen component.

import { useWZBScreen } from '@whatzbug/react-native';

function SettingsScreen() {
  useWZBScreen('SettingsScreen');
  return <View>...</View>;
}

<WZBScrollView>

Drop-in replacement for ScrollView. Accepts all standard ScrollView props.

import { WZBScrollView } from '@whatzbug/react-native';

function ContentScreen() {
  return (
    <WZBScreen name="ContentScreen">
      <WZBScrollView>
        {/* Your scrollable content */}
      </WZBScrollView>
    </WZBScreen>
  );
}

<WZBFlatList> / <WZBSectionList>

Drop-in replacements for FlatList and SectionList. Accept all standard props.

import { WZBFlatList } from '@whatzbug/react-native';

function ItemListScreen({ items }) {
  return (
    <WZBScreen name="ItemListScreen">
      <WZBFlatList
        data={items}
        renderItem={({ item }) => <ItemCard item={item} />}
        keyExtractor={(item) => item.id}
      />
    </WZBScreen>
  );
}

Import Summary

import {
  WZBDebugRoot,
  WZBScreen,
  useWZBScreen,
  WZBScrollView,
  WZBFlatList,
  WZBSectionList,
} from '@whatzbug/react-native';

Next Steps