react-native-assistive-tool

✨ Features

- 🎯 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

> Screenshots coming soon

📦 Installation

``bash
npm install react-native-assistive-tool


or


yarn add react-native-assistive-tool
`

$3

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:
`bash


For shake gesture (optional)

yarn add react-native-shake

For MMKV storage viewer (optional)

yarn add react-native-mmkv-storage
`

$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`)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

huy.trinh
- GitHub: @huytd2510
- Email: huytd2510@gmail.com

🙏 Acknowledgments

- Built with create-react-native-library
- Inspired by iOS AssistiveTouch

---