Skip to content

LEARN.md

Latest commit

 

History

History
133 lines (88 loc) · 3.77 KB

LEARN.md

File metadata and controls

133 lines (88 loc) · 3.77 KB

Learn: React Native API Debugger

Welcome to the React Native API Debugger learning guide!
This resource is built for students, educators, and anyone eager to learn about debugging, inspecting, and analyzing network requests in React Native applications.

🚀 What Will You Learn?

  • How to intercept and inspect network requests in a React Native app.
  • How to debug APIs visually using a draggable overlay.
  • How to use advanced features like copying cURL, device shake, and filtering.
  • How to integrate optional native modules in a cross-platform project.
  • Best practices for debugging and securing mobile apps.

🛠️ Prerequisites

  • Basic knowledge of React Native.
  • Node.js and npm installed on your machine.
  • A working React Native project (Expo or CLI).

📦 Getting Started

1. Install the Package

npm install react-native-api-debugger

2. (Optional) Install Peer Dependencies

To unlock advanced features, install these as needed:

npm install @react-native-clipboard/clipboard react-native-shake react-native-gesture-handler react-native-reanimated

The debugger will throw clear errors if you enable an advanced feature but haven't installed its dependency.

🧑‍💻 Hands-On Exercise

Step 1: Basic Setup

Add the overlay to your app:

import React, { useEffect } from 'react';
import { View } from 'react-native';
import { networkLogger, NetworkLoggerOverlay } from 'react-native-api-debugger';

export default function App() {
  useEffect(() => {
    networkLogger.setupInterceptor();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {/* Your app content */}
      <NetworkLoggerOverlay
        draggable={false}
        enableDeviceShake={false}
        useCopyToClipboard={false}
        showRequestHeader={false}
        showResponseHeader={false}
        networkLogger={networkLogger}
      />
    </View>
  );
}

Step 2: Enable Features

Try enabling features one by one. For example, after installing @react-native-clipboard/clipboard, set useCopyToClipboard={true} in the overlay props and see how copy-to-clipboard works.

Step 3: Experiment

  • Make network requests in your app (e.g., with fetch).
  • Observe them appearing in the overlay.
  • Try filtering requests, copying cURL commands, and inspecting headers.

🎓 Learning Activities

Activity 1: Debug a Real API

  • Integrate the debugger into a simple app.
  • Make requests to a public API (like JSONPlaceholder).
  • Use the overlay to inspect request/response data.

Activity 2: Secure Your App

  • Discuss why you should only use network debugging tools in development.
  • Explore how to exclude sensitive endpoints (see excludeUrls in the docs).

Activity 3: Extend the Debugger

  • Propose a new feature (e.g., dark mode or exporting logs).
  • Fork the repo, add your feature, and open a pull request!

💡 Discussion Questions

  • Why is it important to inspect network requests during development?
  • What risks are associated with logging network data in production?
  • How can modular, optional dependencies improve the developer experience in React Native?

🏆 Share Your Learning

📚 More Resources

Happy Debugging! 🚦