> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ailtonvivaz/react-native-beagle/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Get up and running with React Native Beagle in minutes with this quick start guide.

# Quick Start

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

## Basic Setup

<Steps>
  <Step title="Wrap your app with BeagleProvider">
    Import the `BeagleProvider` component and wrap your app's root component:

    ```tsx theme={null}
    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.
  </Step>

  <Step title="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:

    ```tsx theme={null}
    import { useBeagle } from 'react-native-beagle';

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

      return (
        <Button onPress={showInspector}>Open Beagle Inspector</Button>
      );
    }
    ```

    <Note>
      The `useBeagle` hook provides access to the `showInspector` method to open the inspector UI.
    </Note>
  </Step>

  <Step title="Log your first messages">
    Use the `Beagle` API to log messages and errors:

    ```tsx theme={null}
    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.
  </Step>

  <Step title="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
  </Step>
</Steps>

## What's Next?

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

<CardGroup cols={2}>
  <Card title="Create Custom Plugins" icon="puzzle-piece">
    Learn how to create custom plugins to log analytics events, feature flags, or other custom data.
  </Card>

  <Card title="Customize Detail Pages" icon="file-lines">
    Design custom detail pages for your log types using Beagle's flexible content system.
  </Card>

  <Card title="Configure Themes" icon="palette">
    Customize the inspector UI with light and dark themes to match your app's design.
  </Card>

  <Card title="Export and Share Logs" icon="share">
    Learn how to export logs as JSON for sharing with your team or further analysis.
  </Card>
</CardGroup>

## Complete Example

Here's a complete minimal example putting it all together:

```tsx theme={null}
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>
  );
}
```

<Warning>
  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.
</Warning>