React Query Dev Tools for React Native
npm install react-native-react-query-devtoolsReact Query Dev Tools The same tool you know and love! Now available for React Native with enhanced features and modern UI!
- 🌐 Network Toggle: Toggle online/offline mode to test your app's offline behavior
- 🗑️ Cache Management: Clear query cache and mutation cache with dedicated buttons
- 📱 Resizable Modal: Drag and resize the dev tools panel for optimal viewing
- 🎨 Updated UI: Modern, clean interface with improved usability
- 🔍 Enhanced Query Inspector: Better query and mutation details with improved navigation
- 📋 Copy Functionality: Copy query/mutation data to clipboard for debugging
- Find a basic example using the latest expo release with this tool here https://github.com/LovesWorking/RN-Dev-Tools-Example
- React Native: version 0.78.0 or above (required for React 19 support)
- React: version 19.1.0 or above
- React Query: version 5.17.19 or above
- react-native-svg: 15.0.0 or above
To integrate React Query Dev Tools into your React Native project, follow these simple installation steps. Open your terminal, navigate to your project directory, and execute:
``bash`
npm install react-native-react-query-devtools
This command adds the react-native-react-query-devtools package to your project dependencies, making the Dev Tools available for use.
Incorporating React Query Dev Tools into your application is straightforward. Begin by importing the DevToolsBubble component.
`javascript`
import { DevToolsBubble } from "react-native-react-query-devtools";
Next, integrate the DevToolsBubble component into your app. To enable object copying functionality, you must provide a custom copy function that works with your platform (Expo or React Native CLI).
`javascript
function RootLayoutNav() {
const colorScheme = useColorScheme();
const queryClient = new QueryClient();
// Define your copy function based on your platform
const onCopy = async (text: string) => {
try {
// For Expo:
await Clipboard.setStringAsync(text);
// OR for React Native CLI:
// await Clipboard.setString(text);
return true;
} catch {
return false;
}
};
return (
);
}
`
- Online/Offline Toggle: Test your app's behavior in different network conditions
- Visual Indicators: Clear status indicators for network state
- Clear Query Cache: Remove all cached queries with one click
- Clear Mutation Cache: Clear all mutation history and state
- Selective Clearing: Context-aware clearing based on current tab (queries/mutations)
- Resizable Panel: Drag corners to resize the dev tools panel to your preferred size
- Moveable Modal: Drag the panel around the screen for optimal positioning
- Tab Navigation: Switch between Queries and Mutations views
- Modern Design: Clean, intuitive interface with improved readability
- Detailed Information: View comprehensive query/mutation data
- State Visualization: Clear indicators for loading, error, and success states
- Data Copying: Copy query keys, data, and other information to clipboard
- Real-time Updates: Live updates as your queries and mutations change
The onCopy prop is required to enable copying functionality in the dev tools. This function should:
- Accept a string parameter
- Return a Promise
- Return true if the copy was successful, false otherwise
Example implementations:
For Expo:
`typescript
import * as Clipboard from "expo-clipboard";
const onCopy = async (text: string) => {
try {
await Clipboard.setStringAsync(text);
return true;
} catch {
return false;
}
};
`
For React Native CLI:
`typescript
import Clipboard from "@react-native-clipboard/clipboard";
const onCopy = async (text: string) => {
try {
await Clipboard.setString(text);
return true;
} catch {
return false;
}
};
`
The DevToolsBubble component accepts additional props for customization:
`typescript``
interface DevToolsBubbleProps {
queryClient: QueryClient; // Required: The QueryClient instance to use
onCopy: (text: string) => Promise
// Optional: Callback when selection state changes
onSelectionChange?: (hasSelection: boolean) => void;
// Optional: Custom pan responder for advanced gesture handling
panResponder?: PanResponderInstance;
}
- ✅ React Native 0.78.0+ (with React 19 support)
- ✅ Expo SDK 52+
- ✅ iOS 15.1+
- ✅ Android API 24+
- ✅ New Architecture compatible
- ✅ TypeScript support included
1. Module not found errors: Ensure you're using React Native 0.78.0+ for React 19 compatibility
2. SVG rendering issues: Make sure react-native-svg is properly installed and linked
3. Copy functionality not working: Verify your onCopy function implementation matches your platform
- The dev tools automatically optimize rendering for large query/mutation lists
- Use the clear cache functions to reset state when needed
- The resizable panel remembers your preferred size across sessions
MIT License - see LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
If you encounter any issues or have questions, please open an issue on GitHub.