React Query Dev Tools for React Native

Common errors

• 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`.

  cause This error often occurs if `react-native-svg` is not installed or properly linked, as `DevToolsBubble` relies on it for its internal components.
  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`).

• TypeError: Cannot read property 'setStringAsync' of undefined

  cause The `onCopy` function attempts to use `Clipboard.setStringAsync` (for Expo) but `expo-clipboard` is not installed or imported correctly.
  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)`.

• Invariant Violation: `DevToolsBubble` uses `QueryClient` context but no `QueryClientProvider` was found. Did you forget to add `QueryClientProvider` to your app?

  cause `DevToolsBubble` is rendered without being wrapped by a `QueryClientProvider` from `@tanstack/react-query`, which is necessary to provide the `QueryClient` instance.
  fix Ensure `DevToolsBubble` is a child of `QueryClientProvider` and that `QueryClientProvider` is initialized with a `new QueryClient()` instance, as shown in the quickstart.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install react-native-react-query-devtools npm
• yarn add react-native-react-query-devtools yarn
• pnpm add react-native-react-query-devtools pnpm

Imports

• DevToolsBubble
  wrong:

  import DevToolsBubble from 'react-native-react-query-devtools';

  correct:

  import { DevToolsBubble } from 'react-native-react-query-devtools';

  DevToolsBubble is a named export, not a default export.
• QueryClientProvider

  import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

  Required to provide the `QueryClient` instance to the DevToolsBubble component.
• Clipboard

  import * as Clipboard from 'expo-clipboard'; // For Expo
  // OR
  import { Clipboard } from 'react-native'; // For React Native CLI

  The `onCopy` prop requires a platform-specific Clipboard API. Ensure you import and use the correct one for your environment.

Quickstart

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.

import { DevToolsBubble } from "react-native-react-query-devtools";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import { useColorScheme } from 'react-native';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; // Assuming @react-navigation/native for theming, adjust as needed
import { Stack } from 'expo-router'; // Assuming Expo Router, adjust as needed
import * as Clipboard from 'expo-clipboard'; // For Expo; use 'react-native' for bare React Native CLI

function RootLayoutNav() {
  const colorScheme = useColorScheme();
  const queryClient = new QueryClient();

  // Define your copy function based on your platform (Expo or React Native CLI)
  const onCopy = async (text: string) => {
    try {
      // For Expo:
      await Clipboard.setStringAsync(text);
      // OR for React Native CLI (uncomment and adjust if not using Expo):
      // await Clipboard.setString(text);
      return true;
    } catch (e) {
      console.error("Failed to copy to clipboard:", e);
      return false;
    }
  };

  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        {/* Your app's navigation stack or main components go here */}
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
        </Stack>
      </ThemeProvider>
      {/* DevToolsBubble should be placed outside the main app views to float on top */}
      <DevToolsBubble onCopy={onCopy} queryClient={queryClient} />
    </QueryClientProvider>
  );
}

export default RootLayoutNav;