react-native-unilist

The most powerful, flexible, and beautiful FlatList & ScrollView wrapper for React Native.

---

🚀 Why use react-native-unilist?

• All-in-one: FlatList, ScrollView, Grid, Masonry, Carousel, Cards, Pagination, Search, Themes, and more!
• Super easy: Minimal code, maximum features.
• Beautiful UI: Pre-built card designs, layouts, and theme system.
• SEO Keywords: React Native List, FlatList, ScrollView, Grid, Masonry, Carousel, Card, Pagination, Search, Theme, Universal List, Best List Library, react-native-unilist

---

📦 Installation

npm install react-native-unilist
# or
yarn add react-native-unilist

---

⚡ Quick Example

import { UniList, ElevatedCard } from 'react-native-unilist';

const data = [
  { id: 1, title: 'Item 1', subtitle: 'Subtitle 1' },
  { id: 2, title: 'Item 2', subtitle: 'Subtitle 2' },
];

<UniList
  data={data}
  renderItem={item => (
    <ElevatedCard title={item.title} subtitle={item.subtitle} />
  )}
/>

---

✨ Features

• FlatList & ScrollView: Smart switching, best performance
• Pre-built Cards: 5 types × 5 styles (Modern, Classic, Minimal, Material, Neumorphic)
• Layouts: Grid, Masonry, Carousel
• Theme System: Light/Dark + color schemes
• Pagination: Infinite scroll, loading states
• Search & Filter: Built-in hooks, highlight results
• Horizontal/Vertical: Both directions
• Loading/Empty States: Customizable
• Imperative API: Scroll to index/top
• TypeScript Support: Full types
• SEO Optimized: All major list keywords

---

🖼️ Card & Layout Examples

import { ElevatedCard, OutlinedCard, GradientCard, GlassCard } from 'react-native-unilist';

<ElevatedCard title="Modern Card" cardStyle="modern">...</ElevatedCard>
<OutlinedCard title="Classic Card" cardStyle="classic">...</OutlinedCard>
<GradientCard title="Gradient Card" cardStyle="material">...</GradientCard>
<GlassCard title="Glass Card" cardStyle="neumorphic">...</GlassCard>

Grid Layout:

import { GridLayout } from 'react-native-unilist';
<GridLayout columns={2} spacing={12}>...</GridLayout>

Carousel Layout:

import { CarouselLayout } from 'react-native-unilist';
<CarouselLayout autoplay interval={3000} showDots>...</CarouselLayout>

Masonry Layout:

import { MasonryLayout } from 'react-native-unilist';
<MasonryLayout columns={2} spacing={8}>...</MasonryLayout>

---

🎨 Theme System

import { ThemeManager, useTheme } from 'react-native-unilist';
ThemeManager.getInstance().setThemeType('dark', 'blue');
const theme = useTheme();

---

🔍 Pagination & Search

Pagination:

import { usePagination } from 'react-native-unilist';
const { data, loading, hasMore, loadMore } = usePagination({ ... });

Search:

import { useSearch } from 'react-native-unilist';
const { query, results, setQuery } = useSearch({ ... });

---

📝 Props Reference

UniList

Prop	Type	Description
data	array	List data
renderItem	function(item, index) => ReactNode	Render each item
children	ReactNode	For ScrollView mode
spacing	number	Space between items
horizontal	boolean	Horizontal scroll
ListEmptyComponent	ReactNode	Empty state UI
loading	boolean	Loading state
contentContainerStyle	style	Container style

Card

Prop	Type	Description
type	string	elevated, outlined, filled, ...
cardStyle	string	modern, classic, minimal, ...
title	string	Card title
subtitle	string	Card subtitle
children	ReactNode	Card content
...	...	...

---

📚 More Examples

• See USAGE_EXAMPLES.md for advanced usage
• See Example App

---

🤝 Contributing

Pull requests welcome! See CONTRIBUTING.md.

---

📄 License

MIT

---

Keywords: react-native, FlatList, ScrollView, List, Grid, Masonry, Carousel, Card, Pagination, Search, Theme, Universal List, Best List Library, react-native-unilist

---

Made with ❤️ by SamadK01