@the-it-dept/bugsplat-react-native

React Native widget for BugSplat bug reporting. Allows users to submit bug reports with screenshots, view their report history, and track issue updates.

Installation

npm install @the-it-dept/bugsplat-react-native

Peer Dependencies

This package requires the following peer dependencies:

npm install @react-native-async-storage/async-storage react-native-svg

For screenshot/image picking support:

npx expo install expo-image-picker

Usage

Basic Usage

import React, { useState } from 'react'
import { Button, View } from 'react-native'
import { Widget } from '@the-it-dept/bugsplat-react-native'

function App() {
  const [visible, setVisible] = useState(false)

  return (
    <View style={{ flex: 1 }}>
      <Button title="Report Bug" onPress={() => setVisible(true)} />

      <Widget
        config={{
          apiKey: 'your-api-key',
          apiUrl: 'https://bugsplat.dev', // optional, defaults to production
        }}
        visible={visible}
        onClose={() => setVisible(false)}
      />
    </View>
  )
}

With Screenshot Capture

To enable automatic screenshot capture, you can use react-native-view-shot:

npm install react-native-view-shot

import React, { useRef, useState } from 'react'
import { Button, View } from 'react-native'
import ViewShot, { captureRef } from 'react-native-view-shot'
import { Widget } from '@the-it-dept/bugsplat-react-native'

function App() {
  const viewRef = useRef(null)
  const [visible, setVisible] = useState(false)

  const captureScreenshot = async () => {
    try {
      const uri = await captureRef(viewRef, {
        format: 'png',
        quality: 0.8,
        result: 'data-uri',
      })
      return uri
    } catch (error) {
      console.error('Screenshot capture failed:', error)
      return null
    }
  }

  return (
    <View ref={viewRef} style={{ flex: 1 }} collapsable={false}>
      <Button title="Report Bug" onPress={() => setVisible(true)} />

      <Widget
        config={{
          apiKey: 'your-api-key',
        }}
        visible={visible}
        onClose={() => setVisible(false)}
        captureScreenshot={captureScreenshot}
      />
    </View>
  )
}

Configuration

SplatConfig Options

| Property | Type | Description | | ---------------- | -------------------- | ----------------------------------------------------- | | apiKey | string | Required. Your BugSplat project API key | | apiUrl | string | API URL (defaults to https://bugsplat.dev) | | primaryColor | string | Primary/accent color for the widget | | accentColor | string | Alias for primaryColor | | theme | 'light' \| 'dark' | Color theme (defaults to 'light') | | title | string | Title shown in the header (defaults to "Report a Bug")| | placeholder | string | Placeholder text for description field | | buttonText | string | Text for the submit button | | historyEnabled | boolean | Show "My Reports" tab (defaults to true) | | previewMode | boolean | Use mock data for development | | onSubmit | (report) => void | Callback after successful submission | | onClose | () => void | Callback when widget is closed |

Widget Props

| Property | Type | Description | | ------------------- | ----------------------------- | ---------------------------------------------- | | config | SplatConfig | Required. Widget configuration | | visible | boolean | Required. Controls modal visibility | | onClose | () => void | Required. Called when close button pressed | | captureScreenshot | () => Promise<string\|null> | Optional screenshot capture function |

Features

• Bug Report Form: Title, description, email fields with validation
• Screenshot Support: Capture screen or pick from gallery
• Report History: View past submissions (when historyEnabled: true)
• Report Details: See GitHub issue status and developer comments
• Theming: Light/dark mode with customizable accent color
• Metadata Collection: Automatic device/platform info collection

Collected Metadata

The widget automatically collects the following device information:

• Platform (iOS/Android)
• OS Version
• Screen dimensions and pixel ratio
• Font scale
• Language/locale
• Timezone
• Timestamp

Individual Components

For custom layouts, you can import components individually:

import {
  ReportForm,
  HistoryList,
  ReportDetail,
  ThemeProvider,
  SplatClient,
  useReporter,
} from '@the-it-dept/bugsplat-react-native'

License

MIT