@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

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

$3

This package requires the following peer dependencies:

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

For screenshot/image picking support:

`bash
npx expo install expo-image-picker
`

Usage

$3

`tsx
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 (

setVisible(true)} />

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

)
}
`

$3

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

`bash
npm install react-native-view-shot
`

`tsx
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 (



setVisible(true)} />

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

)
}
`

Configuration

$3

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

$3

| Property | Type | Description |
| ------------------- | ----------------------------- | ---------------------------------------------- |
| config | SplatConfig | Required. Widget configuration |
| visible | boolean | Required. Controls modal visibility |
| onClose | () => void | Required. Called when close button pressed |
| captureScreenshot | () => Promise | 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:

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

License

MIT