@ruttl/bug-tracking

Introduction

Welcome to the official Bug Tracking React Native component provided by ruttl. This component allows you to seamlessly capture visual bugs in your mobile apps and annotate them with ease.

The Bug Tracking React Native component is open source — contributions are welcome!

✅ Supported Platforms

- React Native CLI
- Expo (SDK 48+)
- Android (up to API 31 & 32 / Android 12)

🚀 Quick Start

$3

``bash
npm install @ruttl/bug-tracking
`

or

`bash
yarn add @ruttl/bug-tracking
`

⚙️ Expo Project Plugin Setup

$3


`tsx
import React from 'react';
import { BugTracking } from '@ruttl/bug-tracking';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
return (

projectID="PROJECT_ID"
token="TOKEN"
/>
{/ Your other components /}

);
}
`

$3


`js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'], // Add this last
};
};
`

$3

`bash
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-view-shot
yarn add react-native-svg
yarn add react-native-image-picker
yarn add react-native-device-info
yarn add react-native-material-ripple
yarn add expo-audio
`

$3

`bash
npx expo prebuild
`

⚙️ React Native CLI Plugin Setup

$3

`js
import 'react-native-gesture-handler';
import 'react-native-reanimated';
`

$3

`tsx
import React from 'react';
import { BugTracking } from '@ruttl/bug-tracking';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
return (

projectID="PROJECT_ID"
token="TOKEN"
/>
{/ Your other components /}

);
}
`

$3


`js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
`

$3

`bash
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-view-shot
yarn add react-native-svg
yarn add react-native-image-picker
yarn add react-native-safe-area-context
yarn add react-native-screens
yarn add react-native-btr
yarn add react-native-device-info
yarn add react-native-material-ripple
yarn add expo-audio
`

$3

`bash
npx react-native run-android
`

---

📌 How to Use

Once set up, click on the floating ruttl icon in the app.
Use touch gestures to encircle the bug or area you want to highlight, write a brief description, and submit it.
You can also change the highlight color from the toolbar.

---

📌 Props

| Prop | Description | Type | Required |
|-------------|----------------------------------------------|--------|----------|
| projectID | Your Ruttl project ID | string | ✅ Yes |
| token` | Auth token generated by your server backend | string | ✅ Yes |

---

🛠️ Need Help?

If you're having trouble setting up the SDK or encountering bugs, please reach out to our support team via ruttl.com/contact or check the docs.