In-app QA logging and debugging package for React Native – Debug console, network logging, error tracking
npm install react-native-qa-loggerA powerful in-app logging and debugging package for React Native, designed specifically for QA and development builds. Inspired by Loggycian for Flutter, this package provides a comprehensive logging solution with a beautiful UI for viewing logs, network requests, and errors directly inside your app.

---
Debugging mobile apps is painful — logs are scattered across Metro, Logcat, Xcode and network inspectors.
QA teams struggle to reproduce issues. Developers lose time switching tools.
react-native-qa-logger brings everything inside your app itself.
One button. One console. All logs. All network calls. All errors.
---
* In-App Debug Console (Bottom Sheet UI)
* Floating Draggable Debug Button (snap-to-edge)
* Axios Network Request & Response Logging
* Global JS Error & Promise Rejection Capture
* Color Coded Logs
* Expandable Log Items
* Search & Filter (All, Network, Errors)
* Zero Production Impact (Disabled in Prod)
* Full TypeScript Support
* 100% JS – No Native Code
---
``bash`
npm install react-native-qa-loggeror
yarn add react-native-qa-logger
---
`tsx
import React, { useState } from 'react';
import { SafeAreaView } from 'react-native';
import axios from 'axios';
import {
logger,
setupNetworkLogger,
setupErrorHandlers,
DebugButton,
DebugConsole,
} from 'react-native-qa-logger';
const apiClient = axios.create({
baseURL: 'https://api.example.com',
});
setupNetworkLogger(apiClient);
setupErrorHandlers();
export default function App() {
const [visible, setVisible] = useState(false);
return (
);
}
`
---
`ts`
logger.info('User logged in', { userId: 12 });
logger.warn('Slow API', { duration: 4800 });
logger.error('Payment failed', error);
---
`ts`
setupNetworkLogger(apiClient, {
sensitiveHeaders: ['authorization', 'x-api-key'],
maxBodyLength: 10000,
});
---
`ts`
setupErrorHandlers();
Captures:
* Global JS errors
* Unhandled promise rejections
* Console errors
---
Draggable floating debug button.
`tsx`
---
Bottom sheet debug console.
`tsx`
---
`ts`
logger.configure({ maxLogs: 500 });
---
Shubhanshu Barnwal
Open-Source Author & React Native Engineer
🌐 https://shubhanshubb.dev
📧 connect@shubhanshubb.dev
For feature requests, integrations, paid support, or consulting — feel free to reach out.
---
* [ ] Fetch API logger
* [ ] Export logs
* [ ] Share logs
* [ ] Log persistence
* [ ] Performance metrics
* [ ] Screenshot capture
---
MIT
---
> Made with ❤️ by Shubhanshu Barnwal
> Open-Source Author of react-native-qa-logger`
> 🌐 https://shubhanshubb.dev | 📧 connect@shubhanshubb.dev
---