rn-dev-bugtool 🚀 A powerful, dev-only bug reporting tool for React Native and Expo apps. Triggered by device shake, it captures critical information to help you debug and fix issues faster. Perfect for development environments and debugging mobile apps on the go.

Features ✨ Shake to report: Trigger bug reporting with a simple shake of your device.

Captures console logs: Collect console logs for debugging.

Network logs: Capture network request data for easier debugging.

Crash logs: Gather detailed crash reports.

Local state: Collect async storage data to understand app state.

Easy integration: Simple setup for both React Native and Expo apps.

Installation 📦

1. Install via npm: bash Copy Edit npm install rn-dev-bugtool
2. Or install via yarn: bash Copy Edit yarn add rn-dev-bugtool Setup 🔧 Step 1: Integrate BugReportModal into your App Add the BugReportModal component in your app where you'd like to show the bug reporting UI

tsx Copy Edit import { BugReportModal } from 'rn-dev-bugtool';

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

const handleSubmit = async ({ title, description }) => { console.log('Bug Report Submitted:', title, description); // Handle the submission (e.g., send to a backend or save locally) };

return ( <> <BugReportModal visible={visible} onClose={() => setVisible(false)} onSubmit={handleSubmit} /> {/* Other app components */} </> ); }; Step 2: Configure Shake Event You can use the Expo Accelerometer to trigger the shake event.

tsx Copy Edit import { useShake } from 'rn-dev-bugtool';

const App = () => { const [visible, setVisible] = useState(false); const shakeHandler = useShake(() => { setVisible(true); // Show bug report modal when the device is shaken });

return ( <> <BugReportModal visible={visible} onClose={() => setVisible(false)} onSubmit={handleSubmit} /> </> ); }; Usage 📊 Once integrated, users can trigger bug reports simply by shaking their device. The tool collects useful logs like:

Console Logs: Helps in capturing detailed app behavior.

Network Logs: Useful for debugging API calls.

Crash Reports: Automatically collects any crash-related logs.

Local State: Fetches app data from AsyncStorage to help with debugging app state.

Customization 🎨 You can further customize the tool as needed by modifying the source code, or adding additional collectors based on your app's requirements.

Collector Files: You can modify or add more collectors for different logs like Redux state, device info, etc.

Example: Add a new collector to capture Redux state:

tsx Copy Edit import { collectReduxState } from './reduxCollector';

const collectState = async () => { const reduxState = await collectReduxState(); console.log('Redux State:', reduxState); }; Contributing 🤝 We welcome contributions to improve this tool! Feel free to open issues or pull requests. Here's how you can get started:

Fork the repository.

Create a branch (git checkout -b feature-branch).

Make changes and commit them (git commit -am 'Add feature').

Push to the branch (git push origin feature-branch).

Open a pull request.

License 📝 MIT License. See the LICENSE file for more details.

Roadmap 📈 Support for more logging options (Redux state, device logs)

Provide customizable modal themes

Improve performance and add more integrations

Add better error handling and recovery in the tool