Skip to main content

Debugging Network Requests in React Native: Axios, Fetch, and Flipper Tips

· 9 min read
Michael
Mobile Developer
Last updated on October 23, 2025

debugging react native

Welcome — this short guide helps you quickly find and fix networking issues in React Native apps. You'll get practical steps to inspect requests with Flipper, add logging and error handling with Axios interceptors, use the native Fetch API for troubleshooting, run simple tests, and deploy fixes via Expo's OTA updates.

Debugging network requests in React Native apps is crucial for troubleshooting API issues like slow loads, errors, or failed authentication. This beginner-friendly guide shows you how to debug with Axios and Fetch in React Native 0.75.4 apps using Expo SDK 51, leveraging Flipper for inspection and Axios interceptors for logging. We’ll ensure compatibility with iOS (Xcode 16+, iOS 18 SDK) and Android (SDK 35), using TypeScript for type safety and EAS Update for deployment. Expo SDK 51 supports the New Architecture, including bridgeless mode, for better performance. For upgrading to newer React Native versions, see the React Native upgrade guide. For pre-debugged templates, explore Instamobile or Dopebase.

Let’s uncover and fix those network gremlins!

Prerequisites​

Ensure you have:

  • Node.js (v20.x or later, LTS): nodejs.org
  • npm (v10.x or later)
  • EAS CLI: For Expo management
  • Android Studio (2024.3.2+): Android SDK 35, NDK r25+
  • Xcode (16+): iOS 18 SDK (macOS only)
  • VS Code or similar editor
  • Git: For version control
  • A React Native project (Expo SDK 51)
  • A REST API endpoint (e.g., jsonplaceholder.typicode.com)
  • Flipper: fbflipper.com
  • macOS: For iOS builds

Note: Expo Go supports SDK 51 but may limit custom native code or New Architecture features. Use Expo Snack for quick prototyping.

What are network requests? Network requests are HTTP calls (GET, POST, etc.) your app makes to servers to fetch or send data, like loading user profiles. Debugging involves inspecting these calls for errors or delays. Learn more in React Native’s networking guide.

Step 1: Set Up Your Project​

Create a React Native project and configure it for network debugging.

1.1 Create Project​

Install EAS CLI:

npm install -g eas-cli

Create a project:

npx create-expo-app MyApp --template blank-typescript

Navigate to the project:

cd MyApp

1.2 Configure app.config.js​

Update app.config.js for OTA updates:

export default () => ({
  name: "MyApp",
  slug: "myapp",
  version: "1.0.0",
  orientation: "portrait",
  icon: ".https://docs.instamobile.io/assets/icon.png",
  splash: {
    image: ".https://docs.instamobile.io/assets/splash.png",
    resizeMode: "contain",
    backgroundColor: "#ffffff"
  },
  ios: {
    bundleIdentifier: "com.myapp.app",
    buildNumber: "1.0.0"
  },
  android: {
    package: "com.myapp.app",
    versionCode: 1
  },
  updates: {
    enabled: true,
    url: "https://u.expo.dev/your-project-id",
    checkAutomatically: "ON_LOAD",
    fallbackToCacheTimeout: 0
  }
});

1.3 Test Locally​

Run the app:

npx expo start

Press i for iOS or a for Android to verify setup.

Step 2: Use Flipper for Network Inspection​

Flipper is the go-to tool for debugging network requests.

2.1 Install Flipper​

Download Flipper from fbflipper.com and add to your project:

npm install react-native-flipper

2.2 Enable in Podfile​

Update ios/Podfile:

use_flipper!({ 'Flipper' => '0.250.0' })
post_install do |installer|
  flipper_post_install(installer)
end

Run:

cd ios && pod install

2.3 Inspect Requests​

Start your app:

npx expo start

In Flipper, open the Network plugin to view requests, headers, responses, and timings. Filter by URL or status code.

What is Flipper? Flipper is a debugging platform for inspecting network traffic, logs, and performance. See Flipper’s network guide.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Step 3: Debug with Axios​

Use Axios for HTTP requests with built-in debugging features.

3.1 Install Axios​

Install Axios:

npm install [email protected]

3.2 Set Up Axios Interceptors​

Create src/api/api.ts with interceptors for logging:

import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios';

const api: AxiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000,
});

// Request interceptor
api.interceptors.request.use(
  (config) => {
    console.log('Request:', config.method?.toUpperCase(), config.url);
    return config;
  },
  (error) => Promise.reject(error)
);

// Response interceptor
api.interceptors.response.use(
  (response: AxiosResponse) => {
    console.log('Response:', response.status, response.config.url);
    return response;
  },
  (error: AxiosError) => {
    console.error('Error:', error.response?.status, error.config?.url);
    return Promise.reject(error);
  }
);

export const getPosts = async () => {
  const response = await api.get('/posts');
  return response.data;
};

3.3 Use in Component​

Update src/App.tsx:

import { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import { getPosts } from './api/api';

export default function App() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const data = await getPosts();
        setPosts(data);
      } catch (error) {
        console.error('Fetch error:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchPosts();
  }, []);

  return (
    <View style={{ flex: 1, padding: 20 }}>
      {loading ? <Text>Loading...</Text> : (
        <FlatList
          data={posts}
          keyExtractor={item => item.id.toString()}
          renderItem={({ item }) => <Text>{item.title}</Text>}
        />
      )}
    </View>
  );
}

What are Axios interceptors? Interceptors allow logging or modifying requests/responses globally, ideal for debugging network issues.

Step 4: Debug with Native Fetch​

Use React Native’s built-in Fetch for simple debugging.

4.1 Basic Fetch Call​

Update src/App.tsx with Fetch:

useEffect(() => {
  const fetchPosts = async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const data = await response.json();
      setPosts(data);
    } catch (error) {
      console.error('Fetch error:', error);
    } finally {
      setLoading(false);
    }
  };
  fetchPosts();
}, []);

4.2 Add Headers and Logging​

For advanced debugging:

const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
});
console.log('Response status:', response.status);
console.log('Response headers:', response.headers);

What is Fetch? Fetch is React Native’s native API for HTTP requests, simpler than Axios but without interceptors. See MDN Fetch guide.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Step 5: Implement Error Handling​

Handle network errors gracefully.

5.1 Enhance Axios Service​

Update src/api/api.ts for error handling:

export const getPosts = async () => {
  try {
    const response = await api.get('/posts');
    return response.data;
  } catch (error) {
    const axiosError = error as AxiosError;
    console.error('API Error:', axiosError.response?.data || axiosError.message);
    throw axiosError;
  }
};

5.2 UI Error Display​

Update src/App.tsx:

const [error, setError] = useState<string | null>(null);

const fetchPosts = async () => {
  try {
    const data = await getPosts();
    setPosts(data);
    setError(null);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
};

return (
  <View style={{ flex: 1, padding: 20 }}>
    {error && <Text style={{ color: 'red' }}>{error}</Text>}
    {/* ... FlatList */}
  </View>
);

Step 6: Test Network Debugging​

Verify debugging with tests and manual inspection.

6.1 Set Up Automated Tests​

Install:

npm install --save-dev jest @types/jest ts-jest @testing-library/react-native @testing-library/jest-native axios-mock-adapter

Mock Axios in src/__tests__/api.test.ts:

import { getPosts } from '../api/api';
import axios from 'axios';

jest.mock('axios');

test('fetches posts successfully', async () => {
  const mockData = [{ id: 1, title: 'Test' }];
  axios.get.mockResolvedValue({ data: mockData });
  const posts = await getPosts();
  expect(posts).toEqual(mockData);
});

Run:

npm test

6.2 Manual Testing​

  • Use Flipper’s Network plugin to inspect requests.
  • Test offline mode with device airplane mode.
  • Simulate errors with invalid URLs.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Step 7: Deploy with OTA Updates​

Deploy debugging fixes with Over-The-Air (OTA) updates.

7.1 Configure OTA​

Install expo-updates:

npm install expo-updates

Check at docs.expo.dev.

Ensure app.config.js includes OTA settings (Step 1.2).

Update src/App.tsx for OTA:

import * as Updates from 'expo-updates';

useEffect(() => {
  const checkForUpdates = async () => {
    try {
      const update = await Updates.checkForUpdateAsync();
      if (update.isAvailable) {
        await Updates.fetchUpdateAsync();
        await Updates.reloadAsync();
      }
    } catch (e) {
      console.error('Update check failed:', e);
    }
  };
  if (!__DEV__) {
    checkForUpdates();
  }
  // ... fetch data
}, []);

7.2 Publish Update​

Configure EAS:

eas update:configure

Publish:

eas update --branch production

Test:

eas build --profile preview --platform all

Troubleshooting Tips​

  • Network Errors: Check Flipper’s Network plugin for status codes. Verify API endpoints.
  • Axios Issues: Use interceptors for detailed logging. Update to 1.11.0 if needed.
  • Fetch Problems: Ensure response.ok checks and proper JSON parsing.
  • Dependency Issues: Run npm list and update per Expo’s compatibility guide.
  • Build Fails: Ensure Xcode 16+ and Android SDK 35. Clear caches.
  • OTA Issues: Verify EXPO_TOKEN and app.config.js’s updates.url. Run eas update:configure.
  • Android Build Hangs: For RN 0.75.4, increase Gradle memory (android/gradle.properties: org.gradle.jvmargs=-Xmx4096m). See Stack Overflow.
  • Expo Go Limitations: Custom native code may not work in Expo Go; build a custom dev client. Use Expo Snack for prototyping.

End-of-Article Recap​

You’ve learned to:

Quick Reference Checklist​

Looking for a custom mobile application?

Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.

Get in Touch

Conclusion​

You’ve mastered debugging network requests in your React Native 0.75.4 app with Expo SDK 51, using Flipper, Axios 1.11.0, and EAS Update. For new projects, adopt Expo SDK 53 with the New Architecture to future-proof against old architecture deprecations. For upgrading to newer React Native versions, see the React Native upgrade guide. For pre-debugged templates, explore Instamobile or Dopebase. Dive deeper with Expo’s documentation or join the community at reactnative.dev.

Additional Resources​