React Native Tutorial

How to Use a Mock API in React Native While Your Backend Is Being Built

Connect your React Native app to a hosted Forge API endpoint so you can develop real mobile screens without depending on a local mock server.

Mobile development often becomes awkward when your API only exists on localhost. A hosted Forge API endpoint gives your simulator, emulator, or physical device a normal HTTPS URL that it can reach while your real backend is still being built.

What we are building

React Native screen

↓

getApiRes()

↓

API_BASE_URL

↓

Forge API

1. Why use a hosted mock API with React Native?

A React Native application does not always share the same localhost as your development computer. That can make local mock servers awkward to reach from Android emulators, iOS simulators, or physical devices.

A hosted URL avoids localhost setup

Forge API gives your mobile app an HTTPS endpoint that works like a normal remote backend, so you can focus on building the interface.

2. Create your Forge API endpoint

Create a project and add a /products endpoint using:

products responsejson

[
  {
    "id": 1,
    "name": "Wireless Headphones",
    "price": 79.99,
    "inStock": true
  },
  {
    "id": 2,
    "name": "Mechanical Keyboard",
    "price": 109.99,
    "inStock": true
  },
  {
    "id": 3,
    "name": "USB-C Hub",
    "price": 49.99,
    "inStock": false
  }
]

Your hosted endpoint will look similar to:

text

https://apis.getforgeapi.com/YOUR_PROJECT_KEY/products

Create the endpoint now

Add the products JSON above and use the generated Forge API URL in your React Native application.

Create your mock API

3. Keep the API base URL in one place

src/config/api.tsts

const API_BASE_URL =
  "https://apis.getforgeapi.com/YOUR_PROJECT_KEY";

export default API_BASE_URL;

Individual API calls can now append /products, /users, /orders, or any other route.

4. Create a reusable API helper

src/services/api.tsts

import API_BASE_URL from "../config/api";

export async function getApiRes(endpoint: string) {
  const path = endpoint.replace(/^\/+/, "");
  const response = await fetch(`${API_BASE_URL}/${path}`);

  if (!response.ok) {
    throw new Error(`API request failed: ${response.status}`);
  }

  return response.json();
}

Example usagets

await getApiRes("products");
await getApiRes("users");
await getApiRes("orders");

5. Load the data in a React Native screen

src/screens/ProductsScreen.tsxtsx

import { useEffect, useState } from "react";
import {
  ActivityIndicator,
  FlatList,
  Text,
  View,
} from "react-native";

import { getApiRes } from "../services/api";

type Product = {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
};

export default function ProductsScreen() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    async function loadProducts() {
      try {
        const data = await getApiRes("products");
        setProducts(data);
      } catch {
        setError("Could not load products.");
      } finally {
        setLoading(false);
      }
    }

    loadProducts();
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  if (error) {
    return <Text>{error}</Text>;
  }

  return (
    <FlatList
      data={products}
      keyExtractor={(item) => String(item.id)}
      renderItem={({ item }) => (
        <View>
          <Text>{item.name}</Text>
          <Text>${item.price}</Text>
        </View>
      )}
    />
  );
}

The screen handles loading, failure and successful API states using the same hosted endpoint your production application will eventually replace.

Test on real devices too

Because the endpoint is hosted, you can open the application on a simulator or physical device without exposing a development machine's localhost server.

6. Switch to production later

src/config/api.tsts

const API_BASE_URL = "https://api.example.com";

export default API_BASE_URL;

If your real backend preserves the same routes and response shapes, your screen and API helper can remain unchanged.

Keep the API contract consistent

Design the Forge API responses to match the backend contract your mobile application expects in production.

Next steps

Use the same helper for profile screens, orders, feeds, dashboards and any other API-driven part of your React Native application.

Create a mock API Read the Forge API docs