Simplify React Native API Calls with react-native-apikit: Goodbye Axios Boilerplate!

✍️ Author: Samad khalid
🔗 GitHub: github.com/SamadK01/apikit
🧩 npm: react-native-apikit

---

🤯 The Problem

React Native developers often get stuck writing the same boilerplate:

• Manual loading state

• Repeated try/catch blocks

• Token headers for every request

• Retry logic

• Error formatting

Example with axios:

setLoading(true);
try {
  const res = await axios.get('/users');
  setData(res.data);
} catch (err) {
  setError(err);
} finally {
  setLoading(false);
}

Now multiply that by 20 endpoints in your app. 😩

---

🎯 The Solution: react-native-apikit

Meet react-native-apikit, a zero-boilerplate API layer designed specifically for React Native.

✅ One-time configuration
✅ Built-in useApi() hook
✅ Supports both axios and fetch
✅ Auto token headers
✅ Clean error object
✅ Retry support

---

📦 Installation

npm install react-native-apikit

or

yarn add react-native-apikit

---

🔧 Setup (Just Once!)

In your App.tsx or startup file:

import { configureApiKit, asyncStorageToken } from 'react-native-apikit';

configureApiKit({
  baseUrl: 'https://your-api.com',
  tokenStorage: asyncStorageToken,
  engine: 'fetch', // or 'axios'
  timeout: 10000,
  retry: 2,
  headers: {
    'X-App-Version': '1.0.0',
  },
  onUnauthorized: () => {
    Alert.alert('Session expired', 'Please login again');
  },
});

Done. Now you're globally configured.

---

🪝 useApi() Hook

tsCopyEditconst {
  get,
  post,
  put,
  patch,
  del,
  loading,
  error,
  data,
  reset,
} = useApi();

💡 Example

const { get, loading, error, data } = useApi();

useEffect(() => {
  get('/users');
}, []);

This handles everything:

• loading state

• error object

• data response

• Retries (if configured)

---

✍️ Real-world Demo (Using JSONPlaceholder)

await get('/users');
await post('/posts', {
  title: 'New Post',
  body: 'Demo content',
  userId: 1,
});
await put('/posts/1', { ... });
await patch('/posts/1', { title: 'Updated' });
await del('/posts/1');

🔐 Token Support

Use asyncStorageToken to manage auth tokens:

await asyncStorageToken.setToken('jwt-token');
const token = await asyncStorageToken.getToken();
await asyncStorageToken.removeToken();

Automatically adds Authorization: Bearer <token> to requests.

---

🔄 Switching Between axios and fetch

Want to switch engines?

configureApiKit({ engine: 'axios' });

You're in control!

---

🧠 Error Handling

Clean and consistent:

if (error) {
  console.log(error.message); // "Request failed"
  console.log(error.status);  // 404, 500 etc.
  console.log(error.data);    // Response body
}

---

🆚 Why Not Axios or Fetch Alone?

---

🎯 Who Is This For?

• React Native devs tired of boilerplate

• Teams needing standard API structure

• Apps using fetch/axios and AsyncStorage

• Developers who want loading/error/data state out of the box

---

🔥 Final Thoughts

Stop writing the same useEffect + loading + catch block over and over.

react-native-apikit helps you:

• Write less code

• Catch errors easier

• Keep logic clean

• Swap engines freely

• Focus on features, not boilerplate

---

📚 Resources

• GitHub: https://github.com/SamadK01/apikit

• npm: https://www.npmjs.com/package/react-native-apikit

---

💬 Feedback?

Have a suggestion or found a bug?
Open an issue or PR on GitHub! I’d love your feedback to keep improving it for the community.