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

#reactnative #webdev #javascript #programming

✍️ 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 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?
Feature Axios/Fetch react-native-apikit
Manual loading/error ✅ Required ❌ Handled internally
Token storage support ❌ ✅ Built-in
Retry logic ❌ ✅ Simple config
Switch engines ❌ ✅ fetch/axios
Hook integration ❌ ✅ useApi()
Global headers/timeouts Manual ✅ Via configureApiKit
🎯 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