React Query Dev Tools The same tool you know and love! Now available for React Native!

• Find a basic example using the lates expo release with this tool here https://github.com/LovesWorking/RN-Dev-Tools-Example

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

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.

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

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

  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 />
    </QueryClientProvider>
  );
}