Bugstory NPM | npm.io

Bugstory

A React Native library that allows you to easily create bug reports with screenshots and device info and send them directly to Jira. This library uses the device shake gesture as a trigger to create a bug report.

Installation

To install bugstory, run the following command:

npm install bugstory

Once the installation is complete, install the necessary pods:

npx pod-install

Usage

Importing the library

Import useBugReportModal and BugReportModal from the bugstory library in your component:

import { useBugReportModal, BugReportModal } from 'bugstory';

Initialization

Inside your main App component, initialize the bug reporter with your Jira instance details:

const { createReport, sendReport, modalRef } = useBugReportModal({
    jiraInstance: '<Your Jira Instance URL>',
    jiraProjectKey: '<Your Jira Project Key>',
    jiraEmail: '<Your Jira Email>',
    jiraApiKey: '<Your Jira API Key>',
    shakeToReportEnabled: true
});

Adding BugReportModal to the Component Tree

Finally, place the BugReportModal component somewhere in your component tree. This will create a modal that can be shown to collect bug reports:

<BugReportModal ref={modalRef} sendReport={sendReport} />

Note: The BugReportModal component must be placed inside the main App component.

Creating a Bug Report

You can invoke the createReport function to bring up the modal and start the bug reporting process:

createReport();

Example

Here is a complete example of how to use the library:

// App.tsx

import React from 'react';
import { SafeAreaView, Button } from 'react-native';
import { useBugReportModal, BugReportModal } from 'bugstory';

const App = () => {
  const { createReport, sendReport, modalRef } = useBugReportModal({
    jiraInstance: '',
    jiraProjectKey: '',
    jiraEmail: '',
    jiraApiKey: '',
    shakeToReportEnabled: true,
  });

  return (
    <>
      <BugReportModal ref={modalRef} sendReport={sendReport} />
      <SafeAreaView
        style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
      >
        <Button title="Open Bug Report" onPress={createReport} />
      </SafeAreaView>
    </>
  );
};

export default App;