{"library":"react-native-react-query-devtools","title":"React Query Dev Tools for React Native","description":"The `react-native-react-query-devtools` package provides a dedicated debugging interface for applications utilizing TanStack React Query within a React Native environment. It offers functionalities analogous to its web counterpart, including an online/offline network toggle, comprehensive cache management for clearing queries and mutations, and a movable, resizable modal interface. The package aims to enhance the debugging experience on mobile platforms with a modern UI, improved query and mutation inspectors, and a copy-to-clipboard feature (which requires a platform-specific `onCopy` implementation). While the current npm metadata indicates version 1.5.1, recent changelogs from `@buoy-gg` (potentially a related project or monorepo by the same author) show versions up to 2.1.10, suggesting ongoing, active development, though the direct versioning for this specific package is ambiguous. Its key differentiator is adapting the well-known React Query Dev Tools experience specifically for React Native, addressing mobile-specific interaction patterns and environmental requirements.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-react-query-devtools"],"cli":null},"imports":["import { DevToolsBubble } from 'react-native-react-query-devtools';","import { QueryClientProvider, QueryClient } from '@tanstack/react-query';","import * as Clipboard from 'expo-clipboard'; // For Expo\n// OR\nimport { Clipboard } from 'react-native'; // For React Native CLI"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { DevToolsBubble } from \"react-native-react-query-devtools\";\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport React from 'react';\nimport { useColorScheme } from 'react-native';\nimport { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; // Assuming @react-navigation/native for theming, adjust as needed\nimport { Stack } from 'expo-router'; // Assuming Expo Router, adjust as needed\nimport * as Clipboard from 'expo-clipboard'; // For Expo; use 'react-native' for bare React Native CLI\n\nfunction RootLayoutNav() {\n  const colorScheme = useColorScheme();\n  const queryClient = new QueryClient();\n\n  // Define your copy function based on your platform (Expo or React Native CLI)\n  const onCopy = async (text: string) => {\n    try {\n      // For Expo:\n      await Clipboard.setStringAsync(text);\n      // OR for React Native CLI (uncomment and adjust if not using Expo):\n      // await Clipboard.setString(text);\n      return true;\n    } catch (e) {\n      console.error(\"Failed to copy to clipboard:\", e);\n      return false;\n    }\n  };\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <ThemeProvider value={colorScheme === \"dark\" ? DarkTheme : DefaultTheme}>\n        {/* Your app's navigation stack or main components go here */}\n        <Stack>\n          <Stack.Screen name=\"(tabs)\" options={{ headerShown: false }} />\n          <Stack.Screen name=\"modal\" options={{ presentation: \"modal\" }} />\n        </Stack>\n      </ThemeProvider>\n      {/* DevToolsBubble should be placed outside the main app views to float on top */}\n      <DevToolsBubble onCopy={onCopy} queryClient={queryClient} />\n    </QueryClientProvider>\n  );\n}\n\nexport default RootLayoutNav;\n","lang":"typescript","description":"This quickstart demonstrates how to integrate `DevToolsBubble` into a React Native application, providing a `QueryClient` and a platform-specific `onCopy` function for clipboard functionality. It assumes an Expo or React Native CLI setup with navigation.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}