Gathering detailed insights and metrics for @choi2021/react-native-react-query-devtools
Gathering detailed insights and metrics for @choi2021/react-native-react-query-devtools
React Query Dev Tools for React Native
Installations
npm install @choi2021/react-native-react-query-devtoolsDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.15.1
NPM Version
10.7.0
Score
39.8
Supply Chain
54.4
Quality
67.9
Maintenance
100
Vulnerability
94.6
License
Releases
3
Languages
2
TypeScript
JavaScript
TypeScript (98.53%)
JavaScript (1.47%)
Developer
LovesWorking
Download Statistics
Total Downloads
230
Last Day
1
Last Week
5
Last Month
14
Last Year
230
GitHub Statistics
146 Stars
69 Commits
9 Forks
3 Watchers
18 Branches
7 Contributors
Updated on Jul 05, 2025
Bundle Size
56.77 kB
Minified
14.21 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.1
Package Id
@choi2021/react-native-react-query-devtools@1.0.1
Unpacked Size
101.14 kB
Size
25.57 kB
File Count
38
NPM Version
10.7.0
Node Version
20.15.1
Published on
Oct 04, 2024
Total Downloads
Cumulative downloads
Total Downloads
230
Dependencies
2
Peer Dependencies
4
React Query Dev Tools (React Native)
Introduction
React Query Dev Tools The same tool you know and love! Now available for React Native!
Example
- Find a basic example using the lates expo release with this tool here https://github.com/LovesWorking/RN-Dev-Tools-Example
Prerequisites
- React version 18.2.0 or above.
- React Native version 0.73.2 or above.
- React Query version 5.17.19 or above.
- react-native-svg 14.1.0 or above.
Installation
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:
1npm 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.
Usage
Incorporating React Query Dev Tools into your application is straightforward. Begin by importing the DevToolsBubble component.
1import { DevToolsBubble } from 'react-native-react-query-devtools';
Next, integrate the DevToolsBubble component into your app. A common practice is to render it at the root of your layout to ensure it's accessible throughout your app. However, you have the flexibility to place it wherever.
1function RootLayoutNav() { 2 const colorScheme = useColorScheme(); 3 const queryClient = new QueryClient(); 4 5 return ( 6 <QueryClientProvider client={queryClient}> 7 <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}> 8 <Stack> 9 <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> 10 <Stack.Screen name="modal" options={{ presentation: "modal" }} /> 11 </Stack> 12 </ThemeProvider> 13 <DevToolsBubble /> 14 </QueryClientProvider> 15 ); 16}
No vulnerabilities found.
No security vulnerabilities found.