react-native-react-query-devtools
v1.3.10
Published
React Query Dev Tools for React Native
Downloads
20,510
Maintainers
Readme
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;
}
};