dev tool
npm install react-native-assistive-tool!npm version
!npm downloads
!license
!platform
A beautiful and powerful debugging tool for React Native apps 🚀
A floating assistive touch button that provides easy access to network logs, storage viewer, navigation state, and Redux store - all in one beautiful, modern UI.
- 🎯 Beautiful Modern UI - Clean, intuitive interface with smooth animations
- 📡 Network Logger - Monitor all HTTP/HTTPS requests and responses
- 💾 AsyncStorage Viewer - View and manage your app's local storage
- 🧭 Navigation Logger - Debug navigation state and history
- 🔄 Redux Logger - Inspect Redux store and actions
- 📱 Shake to Open - Quick access by shaking your device
- 🎨 Customizable - Customize colors, size, tabs, and components
- ⚡ Performant - Lightweight with smooth animations
> Screenshots coming soon
``bash`
npm install react-native-assistive-toolor
yarn add react-native-assistive-tool
This library requires the following peer dependencies. Install them based on which features you want to use:
#### Required for all features:
`bash`
yarn add react-native-gesture-handler
yarn add react-native-safe-area-context
#### For Network Logger:
`bash`
yarn add react-native-network-logger
#### For AsyncStorage Viewer:
`bash`
yarn add @react-native-async-storage/async-storage
#### For Navigation Logger:
`bash`
yarn add @react-navigation/native @react-navigation/native-stack
#### For Redux Logger:
`bash`
yarn add react-redux redux
#### Optional:
`bashFor shake gesture (optional)
yarn add react-native-shake
$3
If you're using CocoaPods, run:
`bash
cd ios && pod install
`🚀 Usage
$3
`jsx
import React from 'react';
import { AssistiveTouch } from 'react-native-assistive-tool';
import { NavigationContainer } from '@react-navigation/native';const navigationRef = React.createRef();
export default function App() {
return (
size={70}
navigationRef={navigationRef}
>
{/ Your app content /}
);
}
`$3
`jsx
import React from 'react';
import { AssistiveTouch } from 'react-native-assistive-tool';
import { NavigationContainer } from '@react-navigation/native';const navigationRef = React.createRef();
export default function App() {
return (
size={70}
color="#007AFF"
navigationRef={navigationRef}
tabs={['network', 'data']} // Custom tabs
customNetworkComponent={ }
onPress={() => console.log('Button pressed')}
onMoveEnd={() => console.log('Button moved')}
callbackEventShowDebugger={() => console.log('Debugger opened')}
>
{/ Your app content /}
);
}
`$3
`jsx
hideAssistiveTouch={true}
>
{/ Your app content - button won't be shown /}
`📚 API Reference
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
size | number | 70 | Size of the floating button in pixels |
| color | string | "#007AFF" | Color of the button (hex format) |
| navigationRef | RefObject | undefined | Required for Navigation Logger feature |
| tabs | string[] | ['network', 'data', 'navigation', 'redux'] | Custom tabs to display |
| customNetworkComponent | ReactNode | undefined | Custom network logger component |
| debugAddOnView | DebugAddOnView[] | undefined | Custom debug views to add |
| hideAssistiveTouch | boolean | false | Hide the floating button |
| onPress | () => void | undefined | Callback when button is pressed |
| onMoveEnd | () => void | undefined | Callback when button movement ends |
| callbackEventShowDebugger | () => void | undefined | Callback when debugger is opened |$3
`typescript
interface DebugAddOnView {
title: string;
component: React.ReactNode;
}
`$3
You can add custom debug views to the modal:
`jsx
debugAddOnView={[
{
title: 'custom',
component:
}
]}
>
{/ Your app /}
`🎨 Customization
$3
You can provide a custom button component:
`jsx
button={ }
>
{/ Your app /}
`$3
Only show specific tabs:
`jsx
tabs={['network', 'data']} // Only network and data tabs
>
{/ Your app /}
`$3
Replace the default network logger:
`jsx
import { NetworkLogger } from 'your-custom-network-logger'; customNetworkComponent={ }
>
{/ Your app /}
`🔧 Features Details
$3
- View all HTTP/HTTPS requests and responses
- Filter and search through requests
- View request/response headers and body
- Export requests data$3
- View all stored key-value pairs
- Search and filter storage items
- Edit and delete stored values$3
- View current navigation state
- See navigation history
- Debug navigation actions$3
- Inspect Redux store state
- View dispatched actions
- Track state changes🎯 Shake to Open
The debugger can be opened by shaking your device. Make sure
react-native-shake is installed and properly configured.💡 Tips
- The floating button automatically snaps to the nearest edge when released
- Tap the button once to open the debugger
- Drag the button to move it around
- Customize the button size and color to match your app theme
🤝 Contributing
Contributions are welcome! Please see our Contributing Guide for details.
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)This project is licensed under the MIT License - see the LICENSE file for details.
huy.trinh
- GitHub: @huytd2510
- Email: huytd2510@gmail.com
- Built with create-react-native-library
- Inspired by iOS AssistiveTouch
---
Made with ❤️ for React Native developers
⭐ Star this repo if you find it helpful!