How to add pull-to-refresh to a React Native list?

Gifted ListView simplifies this by setting refreshable to true and implementing the onFetch callback to handle data fetching. The README's simple example shows configuring it for both iOS and Android with native-style controls.

Gifted ListView vs FlatList: which is better for React Native?

Gifted ListView is easier for adding pull-to-refresh and infinite scrolling quickly, but FlatList is more performant, modern, and recommended by React Native. Use Gifted ListView for legacy projects, but switch to FlatList for new apps to avoid deprecated components.

How to customize the loading indicator in Gifted ListView?

Use the customStyles prop to adjust UI elements like paginationView, as shown in the example where backgroundColor is set. The advanced example provides more details on styling loaders and empty states.

Does Gifted ListView support section headers in lists?

Yes, it supports sections by enabling withSections and structuring data accordingly. This feature is listed in the README, allowing organized list views similar to React Native's SectionList.

How to handle pagination with Gifted ListView for infinite scrolling?

Implement the onFetch callback to manage page-based data fetching and use the pagination prop. The example demonstrates returning rows and setting allLoaded to true when no more data is available.

Is Gifted ListView compatible with React Native 0.60 and above?

Compatibility is limited because it's based on the deprecated ListView. While it might work, issues could arise due to changes in React Native. Check the GitHub repo for updates, but consider migrating to FlatList for better support.

Open-Awesome

react-native-gifted-listview

MITJavaScriptv0.0.51

A React Native ListView component with pull-to-refresh, infinite scrolling, and customizable features for iOS and Android.

GitHub

1.6k stars287 forks0 contributors

What is react-native-gifted-listview?

Gifted ListView is a React Native component that provides an enhanced ListView with built-in pull-to-refresh and infinite scrolling capabilities. It solves the problem of implementing common mobile list interactions manually, saving development time and ensuring consistent behavior across iOS and Android.

Target Audience

React Native developers building mobile apps that require interactive lists with dynamic content loading, such as social feeds, product catalogs, or news readers.

Value Proposition

Developers choose Gifted ListView for its native-like performance, easy customization, and out-of-the-box support for essential list features without relying on external libraries or complex implementations.

Overview

✌️ ListView with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps

Use Cases

Best For

Adding pull-to-refresh functionality to React Native lists
Implementing infinite scrolling for paginated data feeds
Building customizable list views with section headers
Creating mobile apps with smooth, native-style list interactions
Reducing boilerplate code for list-based UIs in React Native
Ensuring consistent list behavior across iOS and Android platforms

Not Ideal For

Projects using React Native 0.43+ where ListView is deprecated in favor of FlatList
Apps requiring high-performance virtualized lists with minimal memory overhead
Teams needing modern React Native features like hooks or concurrent mode support
Developers prioritizing actively maintained libraries with regular updates

Pros & Cons

Pros

Native Refresh Controls

Implements pull-to-refresh for iOS and touch-to-refresh for Android using React Native's RefreshControl, ensuring consistent native behavior across platforms as shown in the changelog and demo GIFs.

Built-in Infinite Scrolling

Provides pagination with touch-to-load-more out-of-the-box, simplifying seamless content loading without manual implementation, as demonstrated in the simple example with the pagination prop.

Customizable Styling

Offers flexible theming for loaders, pagination views, and empty states through the customStyles prop, allowing easy UI adjustments per the advanced example.

Section Support

Enables organizing list items with section headers by setting withSections to true, making it suitable for structured lists as listed in the features.

Cons

Deprecated Base Component

Relies on React Native's ListView, which is deprecated and replaced by FlatList and SectionList, risking compatibility issues and lack of future optimizations.

Limited Performance Features

Lacks advanced virtualization and memory management found in FlatList, which can lead to slower performance with large datasets or complex list interactions.

Minimal Active Development

The last changelog entry is for version 0.0.13, indicating infrequent updates and potential bugs with newer React Native versions, as seen in the sparse maintenance history.

Frequently Asked Questions

Related Projects

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.

Stars17,917

Forks2,105

Last commit19 hours ago

lottie-react-native

Lottie wrapper for React Native.

Stars17,211

Forks1,801

Last commit5 days ago

react-native-maps

React Native Mapview component for iOS + Android

Material Design for React Native (Android & iOS)

Stars14,457

Forks2,244

Last commit14 hours ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub