React Native Bidirectional infinite Smooth Scroll

React Native Bidirectional infinite Smooth Scroll

React Native Bi-directional Infinite Scroll React Native - Bidirectional Infinite Smooth Scroll

📜 React Native Bi-directional Infinite Scroll

[ Built with ♥ at Stream ]

FlatList by react-native only allows infinite scroll in one direction (using onEndReached). This package adds capability on top of FlatList to allow infinite scroll from both directions, and also maintains smooth scroll UX.

Features

  • Accepts prop onStartReached & onEndReached, which you can use to load more results.
  • Calls to onEndReached and onStartReached have been optimized.
  • Inline loading Indicators, which can be customized as well.
  • Uses flat-list-mvcp to maintain scroll position or smooth scroll UX.

| | | | iOS | Android |

🛠 Installation

yarn add react-native-bidirectional-infinite-scroll @stream-io/flat-list-mvcp

🔮 Usage

Please check the example app for working demo.

import { FlatList } from "react-native-bidirectional-infinite-scroll";

<FlatList
    data={numbers}
    renderItem={ListItem}
    keyExtractor={(item) => item.toString()}
    onStartReached={onStartReached} // required, should return a promise
    onEndReached={onEndReached} // required, should return a promise
    showDefaultLoadingIndicators={true} // optional
    onStartReachedThreshold={10} // optional
    onEndReachedThreshold={10} // optional
    activityIndicatorColor={'black'} // optional
    HeaderLoadingIndicator={() => { /** Your loading indicator */ }} // optional
    FooterLoadingIndicator={() => { /** Your loading indicator */ }} // optional
    // You can use any other prop on react-native's FlatList
/>

Note:

  • onEndReached and onStartReached only get called once, per content length.
  • onEndReached and onStartReached must return a promise.
  • maintainVisibleContentPosition is fixed, and can't be modified through props.
  • doesn't accept ListFooterComponent via prop, since it is occupied by FooterLoadingIndicator

✍ Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Download Details:

Author: GetStream

Source Code: https://github.com/GetStream/react-native-bidirectional-infinite-scroll

react-native react mobile-apps

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.