react-native-react-query-devtools

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;