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.
Top comments (0)