Skip to main content
The BeagleProvider component wraps your application to enable the Beagle inspector and logging functionality.

​
Props

​
enabled
boolean
default:"true"
Controls whether Beagle is enabled. When false, all logging is disabled and the inspector is not available. Useful for disabling Beagle in production builds.
​
copy
(value: string) => Promise<void>
Optional function to handle copying text to clipboard. If not provided, copy functionality will be unavailable in the inspector.
​
theme
'light' | 'dark'
default:"'light'"
Visual theme for the Beagle inspector interface.
​
children
React.ReactElement
required
Your application’s root component.

​
Usage

import { BeagleProvider } from 'react-native-beagle';
import Clipboard from '@react-native-clipboard/clipboard';
import { App } from './App';

export default function Root() {
  const handleCopy = async (value: string) => {
    await Clipboard.setString(value);
  };

  return (
    <BeagleProvider
      enabled={__DEV__}
      copy={handleCopy}
      theme="dark"
    >
      <App />
    </BeagleProvider>
  );
}

​
Conditional Rendering

The enabled prop allows you to conditionally enable Beagle based on your environment: 
<BeagleProvider enabled={__DEV__}>
  <App />
</BeagleProvider>
When disabled, BeagleProvider renders a minimal context provider with no-op functions, ensuring zero overhead in production.

​
Theme Support

Beagle supports both light and dark themes that automatically style the entire inspector interface: 
import { useColorScheme } from 'react-native';

function Root() {
  const colorScheme = useColorScheme();

  return (
    <BeagleProvider theme={colorScheme === 'dark' ? 'dark' : 'light'}>
      <App />
    </BeagleProvider>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us