DEV Community: Samad khalid

Stop using FlatList — Try react-native-unilist for faster list rendering in React Native

Samad khalid — Mon, 07 Jul 2025 11:19:20 +0000

Hi devs 👋

I just published a new React Native package called react-native-unilist — a lightweight, highly-performant replacement for FlatList.

🎯 Features:

Ultra-fast rendering

Clean and minimal API

Supports custom item components

📦 Install:

npm install react-native-unilist

🔗 GitHub: github.com/SamadK01/react-native-unilist
📦 NPM: npmjs.com/package/react-native-unilist

Would love your feedback, stars, and contributions!

— Samad Khalid ✌️

reactnative #javascript #opensource #devcommunity #showdev #npm

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

Samad khalid — Fri, 04 Jul 2025 06:53:30 +0000

✍️ 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

💬 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.

Build Faster, Cleaner Lists in React Native with react-native-unilist

Samad khalid — Thu, 03 Jul 2025 07:23:08 +0000

When working on mobile apps in React Native, developers often spend unnecessary time building list UIs — especially when dealing with repeated patterns like FlatList and ScrollView. These components are powerful but require setup, styling, and often lead to duplicated logic when reused across screens.

That’s why I created react-native-unilist — a simple yet powerful wrapper component that helps you render list-based UIs quickly, with less code, and better reusability.

Why I Built This Library
As a React Native developer, I’ve worked on multiple apps where lists were a central part of the UI — from product displays to settings screens, and user profiles to dashboard overviews. I found myself repeating the same FlatList logic, with custom cards, layout props, and handlers — just to render a simple, scrollable interface.

Instead of rewriting the same structure every time, I wanted a reusable, drop-in component where I could just pass in data and quickly choose the layout style I needed.

That’s how react-native-unilist was born.

What is react-native-unilist?
react-native-unilist is a customizable and lightweight component that simplifies how lists are rendered in React Native. It wraps common use cases for FlatList and ScrollView but gives you layout presets like cards, horizontal lists, and minimal rows — so you can build consistent UIs faster.

All you need to do is pass your data, define keys (like titleKey or subtitleKey), and choose the type of list you want — no need to configure FlatList from scratch.

Key Features
Multiple List Types: Support for card, horizontal, list, minimal, and more

Fast Setup: Pass in data and props — no extra boilerplate

Clean Design: Comes with ready-made styles that work out of the box

Flexible & Reusable: Easily integrates into any React Native project

Ideal for MVPs and Production Apps: Build faster with fewer bugs

Installation
You can install the library with:

bash
Copy
Edit
npm install react-native-unilist
or

bash
Copy
Edit
yarn add react-native-unilist
Basic Example
tsx
Copy
Edit
import { UniList } from 'react-native-unilist';

const data = [
{ id: '1', title: 'React Native', subtitle: 'Cross-platform framework' },
{ id: '2', title: 'Expo', subtitle: 'Toolchain for quick dev' },
];

export default function App() {
return (
data={data}
type="card" // Other types: 'horizontal', 'minimal', etc.
titleKey="title"
subtitleKey="subtitle"
onPressItem={(item) => console.log('Clicked:', item)}
/>
);
}
You don’t need to configure FlatList or apply conditional layouts — UniList handles it internally based on the type you provide.

When Should You Use This?
This library is ideal if:

You need card-based or horizontal scrolling lists

You're prototyping and want faster UI rendering

You want cleaner, DRY code for lists

You want one component to work across multiple screens with different styles

Available List Types
You can currently use:

card – Material-style cards with padding

horizontal – Side-scrollable rows

minimal – Simple rows, ideal for settings/profile

list – Traditional list with dividers

What's Coming Next?
I'm actively maintaining the project and plan to add:

Custom renderers for more advanced use cases

Support for image thumbnails

Better accessibility and animation hooks

You’re welcome to open issues or contribute directly on GitHub.

Links and Resources
📦 NPM: https://www.npmjs.com/package/react-native-unilist

💻 GitHub: https://github.com/SamadK01/react-native-unilist

👨‍💻 Author: Samad Khalid – LinkedIn

Final Thoughts
If you’re tired of duplicating FlatList code and want a simpler, more readable way to render lists in React Native, give react-native-unilist a try. It’s beginner-friendly, production-ready, and designed with flexibility in mind.

I built this library to solve a problem I was personally facing — and I hope it helps you as much as it’s helped me and my team.

If you like it, star the repo, contribute, or just drop feedback. Thanks for reading!

Ready to try it?
➡️ npm install react-native-unilist
and start building faster lists today.