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 latest expo release with this tool here https://github.com/LovesWorking/RN-Dev-Tools-Example

Prerequisites

• React native version 0.63.0 or above.
• React Query version 5.17.19 or above.
• react-native-svg 15.0.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:

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.

Usage

Incorporating React Query Dev Tools into your application is straightforward. Begin by importing the DevToolsBubble component.

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).

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 (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
        </Stack>
      </ThemeProvider>
      <DevToolsBubble onCopy={onCopy} />
    </QueryClientProvider>
  );
}

Copy Function

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:

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:

import Clipboard from "@react-native-clipboard/clipboard";

const onCopy = async (text: string) => {
  try {
    await Clipboard.setString(text);
    return true;
  } catch {
    return false;
  }
};