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

Installation

npm install @ruttl/bug-tracking

or

yarn add @ruttl/bug-tracking

⚙️ Expo Project Plugin Setup

Step 1: Wrap your app with GestureHandlerRootView

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

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BugTracking
        projectID="PROJECT_ID"
        token="TOKEN"
      />
      {/* Your other components */}
    </GestureHandlerRootView>
  );
}

Step 2: Modify babel.config.js

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

Step 3: Install Required Libraries

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

Step 4: Clean & Rebuild Project

npx expo prebuild

⚙️ React Native CLI Plugin Setup

Step 1: Import core dependencies at the top of index.js or App.js

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

Step 2: Wrap your app with GestureHandlerRootView

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

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BugTracking
        projectID="PROJECT_ID"
        token="TOKEN"
      />
      {/* Your other components */}
    </GestureHandlerRootView>
  );
}

Step 3: Modify babel.config.js

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

Step 4: Install Required Libraries

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

Step 5: Clean & Rebuild Project

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.