Skip to main content

​
Quick Start

This guide will help you set up React Native Beagle and start logging in your app.

​
Basic Setup

1

Wrap your app with BeagleProvider

Import the BeagleProvider component and wrap your app’s root component:
import { BeagleProvider } from 'react-native-beagle';

export default function App() {
  return (
    <BeagleProvider>
      {/* Your app components */}
    </BeagleProvider>
  );
}
The BeagleProvider initializes Beagle and makes it available throughout your app via React Context.
2

Add a way to open the inspector

By default, Beagle does not open automatically. You can add a button or use a gesture (like shaking the device) to trigger it manually.Here’s an example using the useBeagle hook and a button:
import { useBeagle } from 'react-native-beagle';

function MyComponent() {
  const { showInspector } = useBeagle();

  return (
    <Button onPress={showInspector}>Open Beagle Inspector</Button>
  );
}
The useBeagle hook provides access to the showInspector method to open the inspector UI.
3

Log your first messages

Use the Beagle API to log messages and errors:
import { Beagle, ErrorLog, MessageLog } from 'react-native-beagle';

// Log an info message
Beagle.log(new MessageLog('App loaded', 'info'));

// Log an error
try {
  // Some code that might throw an error
} catch (error) {
  Beagle.log(new ErrorLog(error));
}
Network requests are logged automatically, so you don’t need to do anything extra to track API calls.
4

Open the inspector and view logs

Tap the button you created (or trigger your custom gesture) to open the Beagle inspector. You’ll see:
  • All logged messages and errors
  • Automatic network request logs with full details
  • The ability to filter, search, and export logs
  • Detailed views with headers, bodies, and timing information

​
What’s Next?

You’ve successfully set up React Native Beagle! Here are some next steps:

Create Custom Plugins

Learn how to create custom plugins to log analytics events, feature flags, or other custom data.

Customize Detail Pages

Design custom detail pages for your log types using Beagle’s flexible content system.

Configure Themes

Customize the inspector UI with light and dark themes to match your app’s design.

Export and Share Logs

Learn how to export logs as JSON for sharing with your team or further analysis.

​
Complete Example

Here’s a complete minimal example putting it all together: 
import React from 'react';
import { View, Button } from 'react-native';
import { BeagleProvider, useBeagle, Beagle, MessageLog } from 'react-native-beagle';

function HomeScreen() {
  const { showInspector } = useBeagle();

  const handlePress = () => {
    Beagle.log(new MessageLog('Button pressed', 'info'));
  };

  return (
    <View>
      <Button onPress={handlePress} title="Do Something" />
      <Button onPress={showInspector} title="Open Beagle" />
    </View>
  );
}

export default function App() {
  return (
    <BeagleProvider>
      <HomeScreen />
    </BeagleProvider>
  );
}
Remember to disable Beagle in production builds to avoid exposing sensitive information. You can conditionally render the BeagleProvider based on __DEV__ or an environment variable.

Build docs developers (and LLMs) love

Get started for freeTalk to us