{"id":14875,"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.","status":"active","version":"1.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/LovesWorking/react-native-react-query-devtools","tags":["javascript","react-query","tanstack","state management","dev tools","react native","QA","debugging","typescript"],"install":[{"cmd":"npm install react-native-react-query-devtools","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-react-query-devtools","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-react-query-devtools","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core state management library that the dev tools inspect.","package":"@tanstack/react-query","optional":false},{"reason":"React framework is required for all React Native applications.","package":"react","optional":false},{"reason":"Core React Native framework.","package":"react-native","optional":false},{"reason":"Required for rendering UI elements within the dev tools.","package":"react-native-svg","optional":false}],"imports":[{"note":"DevToolsBubble is a named export, not a default export.","wrong":"import DevToolsBubble from 'react-native-react-query-devtools';","symbol":"DevToolsBubble","correct":"import { DevToolsBubble } from 'react-native-react-query-devtools';"},{"note":"Required to provide the `QueryClient` instance to the DevToolsBubble component.","symbol":"QueryClientProvider","correct":"import { QueryClientProvider, QueryClient } from '@tanstack/react-query';"},{"note":"The `onCopy` prop requires a platform-specific Clipboard API. Ensure you import and use the correct one for your environment.","symbol":"Clipboard","correct":"import * as Clipboard from 'expo-clipboard'; // For Expo\n// OR\nimport { Clipboard } from 'react-native'; // For React Native CLI"}],"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."},"warnings":[{"fix":"Ensure your project uses React 19.1.0+ and React Native 0.78.0+ for full compatibility, especially if you are using React 19.","message":"The README explicitly states prerequisites of React version 19.1.0 or above and React Native 0.78.0 or above (for React 19 support). This can be more restrictive than the peer dependency range `^18 || ^19` for React, potentially breaking applications on older React versions.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Install `react-native-svg` via `npm install react-native-svg` or `yarn add react-native-svg` and follow its installation instructions, particularly for bare React Native projects requiring native module linking.","message":"The `react-native-svg` package is a mandatory peer dependency. Failure to install and link it correctly will result in runtime errors related to UI rendering within the dev tools.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Provide a correct `onCopy` function that utilizes either `Clipboard.setStringAsync` (Expo) or `Clipboard.setString` (React Native CLI), ensuring the respective clipboard module is imported and available.","message":"The `onCopy` prop is required by `DevToolsBubble` and must provide a function that handles copying text to the clipboard using a platform-specific API (e.g., `expo-clipboard` for Expo or `react-native/Libraries/Components/Clipboard/Clipboard` for React Native CLI). Omitting or incorrectly implementing this prop will disable copy functionality and may cause errors.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `react-native-svg` is installed (`npm install react-native-svg`) and, for bare React Native projects, native modules are linked (`npx react-native autolink-android-app` and `cd ios && pod install`).","cause":"This error often occurs if `react-native-svg` is not installed or properly linked, as `DevToolsBubble` relies on it for its internal components.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `RootLayoutNav`."},{"fix":"For Expo, install `expo-clipboard` (`npx expo install expo-clipboard`) and import it as `import * as Clipboard from 'expo-clipboard';`. For React Native CLI, ensure `import { Clipboard } from 'react-native';` and use `Clipboard.setString(text)`.","cause":"The `onCopy` function attempts to use `Clipboard.setStringAsync` (for Expo) but `expo-clipboard` is not installed or imported correctly.","error":"TypeError: Cannot read property 'setStringAsync' of undefined"},{"fix":"Ensure `DevToolsBubble` is a child of `QueryClientProvider` and that `QueryClientProvider` is initialized with a `new QueryClient()` instance, as shown in the quickstart.","cause":"`DevToolsBubble` is rendered without being wrapped by a `QueryClientProvider` from `@tanstack/react-query`, which is necessary to provide the `QueryClient` instance.","error":"Invariant Violation: `DevToolsBubble` uses `QueryClient` context but no `QueryClientProvider` was found. Did you forget to add `QueryClientProvider` to your app?"}],"ecosystem":"npm"}