Menghubungkan React Native ke API

Salah satu bagian terpenting dalam aplikasi React Native adalah menghubungkan aplikasi dengan API backend. Pada artikel ini kita membahas cara menggunakan Axios, menata struktur service, serta menggunakan Context API untuk state global.

1. Instalasi Axios

Axios adalah library HTTP client yang populer dan mudah digunakan.

npm install axios

2. Membuat File Service untuk API

Buat folder /services dan file api.ts untuk menyimpan konfigurasi instance Axios.

// services/api.ts
import axios from "axios";

export const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 8000,
});

3. Membuat Service untuk User

// services/user.service.ts
import { api } from "./api";

export const UserService = {
  getUsers: async () => {
    const response = await api.get("/users");
    return response.data;
  },

  login: async (email, password) => {
    const response = await api.post("/login", { email, password });
    return response.data;
  }
};

4. Menggunakan Context API untuk State Global

// context/AuthContext.tsx
import { createContext, useState } from "react";
import { UserService } from "../services/user.service";

export const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = async (email, password) => {
    const data = await UserService.login(email, password);
    setUser(data.user);
  };

  return (
    <AuthContext.Provider value={{ user, login }}>
      {children}
    </AuthContext.Provider>
  );
}

5. Menggunakan API dari Halaman / Screen

// screens/HomeScreen.tsx
import { useEffect, useState } from "react";
import { UserService } from "../services/user.service";

export default function HomeScreen() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    UserService.getUsers().then((res) => setUsers(res));
  }, []);

  return (
    <View style={{ padding: 20 }}>
      {users.map((user) => (
        <Text key={user.id}>{user.name}</Text>
      ))}
    </View>
  );
}

6. Best Practice Menghubungkan RN ke API

• Gunakan folder /services untuk API.
• Buat instance Axios agar mudah mengatur baseURL & header.
• Gunakan Context API atau Zustand untuk state global.
• Gunakan try/catch agar error API tidak membuat aplikasi crash.
• Simpan token di storage yang aman seperti MMKV.

7. Contoh Interceptor untuk Token

// services/api.ts
api.interceptors.request.use((config) => {
  config.headers.Authorization = "Bearer TOKEN_KAMU";
  return config;
});

Dengan struktur modern seperti di atas, aplikasi React Native akan lebih rapi, mudah dirawat, dan aman ketika berkomunikasi dengan server backend.