Quickstart

Get WhatzBug running in your React Native app in under 5 minutes.

Prerequisites

• A React Native project (0.60+)
• Node.js 18+
• WhatzBug Desktop App installed

Step 1: Install the SDK

npm install @whatzbug/react-native
# or
yarn add @whatzbug/react-native

For iOS, run:

cd ios && pod install

Step 2: Initialize the SDK

In your app’s entry point (e.g., App.tsx), initialize with debug: true to auto-connect to the Desktop App:

import WhatzBug from '@whatzbug/react-native';

await WhatzBug.init({
  projectId: 'your-project-id',
  publishableKey: 'pk_your_publishable_key',
  apiBaseUrl: 'https://api.whatzbug.com',
  debug: true, // auto-connects to WhatzBug Desktop
});

That’s it for basic setup. The SDK will auto-start all monitoring features and connect to the Desktop App.

Step 3: Screen Attribution (Recommended)

For reliable screen detection in the Desktop timeline, pass your React Navigation ref:

import { createNavigationContainerRef } from '@react-navigation/native';

const navigationRef = createNavigationContainerRef();
WhatzBug.setNavigationRef(navigationRef);

// Then use navigationRef in your NavigationContainer:
<NavigationContainer ref={navigationRef}>
  {/* Your app content */}
</NavigationContainer>

Step 4: Verify

1. Open the WhatzBug Desktop App
2. Run your React Native app (emulator or device)
3. You should see your device appear in the Desktop App’s Connection Panel
4. Navigate through your app — logs, network requests, and events will appear in real-time

Legacy Setup

The previous setup pattern using enableDebug() and <WZBDebugRoot> is still supported but no longer required. See the Debug Connection docs for details.

Next Steps