> ## 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.

# Introduction

> React Native Beagle is your trusty debugging companion, helping you sniff out bugs and performance issues in your React Native applications.

# React Native Beagle

React Native Beagle is your trusty debugging companion, helping you sniff out bugs and performance issues in your React Native applications. Like a keen-nosed Beagle on the trail, it tracks network requests, logs custom data, and provides a user-friendly interface for inspecting your app's inner workings during development and testing.

## Why Beagle?

Beagle is designed to make debugging React Native apps easier and more efficient. It's a zero-dependency, lightweight tool that seamlessly integrates into your development workflow without adding bloat to your application.

## Key Features

<CardGroup cols={2}>
  <Card title="Automatic Network Logging" icon="network-wired">
    Automatically logs all network requests and responses, including headers, body, and timing information.
  </Card>

  <Card title="Customizable Plugins" icon="puzzle-piece">
    Create your own plugins to log custom data, such as analytics events, feature flags, or storage operations.
  </Card>

  <Card title="Custom Log Detail Pages" icon="file-lines">
    Design custom detail pages for different log types to display relevant information in a structured way.
  </Card>

  <Card title="Built-in Log Types" icon="list-check">
    Provides built-in log types for common use cases, such as messages and errors.
  </Card>

  <Card title="Export Logs" icon="download">
    Export logs as JSON for sharing or further analysis.
  </Card>

  <Card title="Themeable UI" icon="palette">
    Choose from light and dark themes to match your app's design.
  </Card>

  <Card title="Clipboard Integration" icon="clipboard">
    Easily copy log details to the clipboard for sharing or further analysis.
  </Card>

  <Card title="Zero Dependencies" icon="feather">
    No external dependencies means a smaller bundle size and fewer conflicts.
  </Card>
</CardGroup>

## Get Started

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/installation">
    Install React Native Beagle in your project
  </Card>

  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Set up Beagle and start logging in minutes
  </Card>

  <Card title="Custom Plugins" icon="plug">
    Learn how to create custom plugins for your specific logging needs
  </Card>

  <Card title="Content Types" icon="shapes">
    Explore the flexible content system for building rich detail pages
  </Card>
</CardGroup>

## Example Use Cases

* **Debug Network Issues**: Inspect API requests and responses to identify connectivity problems or malformed data
* **Track Analytics Events**: Create custom plugins to log analytics events and verify they're firing correctly
* **Monitor Errors**: Catch and log errors with detailed stack traces and context
* **Inspect Feature Flags**: Log feature flag states to debug conditional functionality
* **Verify Storage Operations**: Track AsyncStorage or other storage operations to ensure data persistence

<Note>
  Beagle is designed for development and testing environments. Make sure to disable it in production builds to avoid exposing sensitive information.
</Note>