Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/LovesWorking/react-native-react-query-devtools below:

LovesWorking/rn-better-dev-tools-internal: React Native Dev Tools for React Native

React Query Dev Tools The same tool you know and love! Now available for React Native with enhanced features and modern UI!

• 🌐 Network Toggle: Toggle online/offline mode to test your app's offline behavior
• 🗑️ Cache Management: Clear query cache and mutation cache with dedicated buttons
• 📱 Resizable Modal: Drag and resize the dev tools panel for optimal viewing
• 🎨 Updated UI: Modern, clean interface with improved usability
• 🔍 Enhanced Query Inspector: Better query and mutation details with improved navigation
• 📋 Copy Functionality: Copy query/mutation data to clipboard for debugging

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

• React Native: version 0.78.0 or above (required for React 19 support)
• React: version 19.1.0 or above
• React Query: version 5.17.19 or above
• react-native-svg: 15.0.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. 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} queryClient={queryClient} />
    </QueryClientProvider>
  );
}

• Online/Offline Toggle: Test your app's behavior in different network conditions
• Visual Indicators: Clear status indicators for network state

• Clear Query Cache: Remove all cached queries with one click
• Clear Mutation Cache: Clear all mutation history and state
• Selective Clearing: Context-aware clearing based on current tab (queries/mutations)

• Resizable Panel: Drag corners to resize the dev tools panel to your preferred size
• Moveable Modal: Drag the panel around the screen for optimal positioning
• Tab Navigation: Switch between Queries and Mutations views
• Modern Design: Clean, intuitive interface with improved readability

• Detailed Information: View comprehensive query/mutation data
• State Visualization: Clear indicators for loading, error, and success states
• Data Copying: Copy query keys, data, and other information to clipboard
• Real-time Updates: Live updates as your queries and mutations change

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;
  }
};

The DevToolsBubble component accepts additional props for customization:

interface DevToolsBubbleProps {
  queryClient: QueryClient; // Required: The QueryClient instance to use
  onCopy: (text: string) => Promise<boolean>;
  // Optional: Callback when selection state changes
  onSelectionChange?: (hasSelection: boolean) => void;
  // Optional: Custom pan responder for advanced gesture handling
  panResponder?: PanResponderInstance;
}

• ✅ React Native 0.78.0+ (with React 19 support)
• ✅ Expo SDK 52+
• ✅ iOS 15.1+
• ✅ Android API 24+
• ✅ New Architecture compatible
• ✅ TypeScript support included

1. Module not found errors: Ensure you're using React Native 0.78.0+ for React 19 compatibility
2. SVG rendering issues: Make sure react-native-svg is properly installed and linked
3. Copy functionality not working: Verify your onCopy function implementation matches your platform

• The dev tools automatically optimize rendering for large query/mutation lists
• Use the clear cache functions to reset state when needed
• The resizable panel remembers your preferred size across sessions

MIT License - see LICENSE file for details.

Contributions are welcome! Please feel free to submit a Pull Request.

If you encounter any issues or have questions, please open an issue on GitHub.

Take a shortcut from web developer to mobile development fluency with guided learning

Enjoyed this project? Learn to use React Native to build production-ready, native mobile apps for both iOS and Android based on your existing web development skills.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4