Mm-scroll NPM | npm.io

Features

This package provides features like infinite scrolling and lazy loading.

Components

RNInfiniteScroll
RNImageText

To use any of the provided Components, install this package as below:

Install the package:

npm install --save @rnaccelerators/infinite-scroll

InfiniteScroll

Import the InfiniteScroll component:

import {RNInfiniteScroll} from '@rnaccelerators/infinite-scroll'

Usage:

 <RNInfiniteScroll
    style={style}
    itemList={data}
    keyExtractor={keyExtractor}
    onEndReached={onEndReached}
    onEndReachedThreshold={onEndReachedThreshold}
    ListFooterComponent={ListFooterComponent}
    removeClippedSubviews={removeClippedSubviews}
    initialNumToRender={initialNumToRender}
    maxToRenderPerBatch={maxToRenderPerBatch}
    updateCellsBatchingPeriod={updateCellsBatchingPeriod}
    windowSize={windowSize}
    showsVerticalScrollIndicator={showsVerticalScrollIndicator}
    renderItem={renderItem}
    refreshing={refreshing}
    onRefresh={onRefresh}
/>

API

Prop	Type	Required	Description
`style`	`style`	`Yes`	Styles for Flatlist.
`itemList`	`Array`	`Yes`	Source of elements for the list.
`renderItem`	`Function`	`Yes`	Takes an item from the data array and maps it to a React Element.
`keyExtractor`	`String`	`No`	Used to extract a unique key for a given item at the specified index.
`onEndReached`	`Function`	`Yes`	Called when the scroll position gets within onEndReachedThreshold.
`onEndReachedThreshold`	`Number`	`No`	How far from the end the bottom edge of the list must be from the end of the content to trigger the onEndReached callback.
`ListFooterComponent`	`Function`	`No`	Rendered at the very end of the list.
`removeClippedSubviews`	`Boolean`	`No`	Unmount components when outside of window.
`initialNumToRender`	`Number`	`No`	Number of items to render in the initial batch.
`maxToRenderPerBatch`	`Number`	`No`	Controls the amount of items rendered per batch.
`updateCellsBatchingPeriod`	`Number`	`No`	adjuts the time between each batch in ms.
`windowSize`	`Number`	`No`	Number of items rendered outside of the visible area.
`showsVerticalScrollIndicator`	`Boolean`	`No`	Enable/disable the ScrollIndicator.
`refreshing`	`Boolean`	`No`	Whether the view should be indicating an active refresh.
`onRefresh`	`Function`	`No`	Called when the view starts refreshing.

RNImageText

Import the RNImageText component:

import {RNImageText} from '@rnaccelerators/infinite-scroll'

Usage:

 <RNImageText
    title={title}
    id={id}
    url={url}
    onLoadStart={onLoadStart}
    onLoadEnd={onLoadEnd}
    styleCell={styleCell}
    styleImageView={styleImageView}
    styleImage={styleImage}
    styleDescription={styleDescription}
    styleName={styleName}
    styleRole={styleRole}
/>

API

Prop	Type	Required	Description
`title`	`Text`	`No`	Text for Text Component.
`id`	`Text`	`No`	Text for Text Component.
`url`	`URL`	`Yes`	url for image.
`onLoadStart`	`Function`	`No`	Invoked on load start.
`onLoadEnd`	`Function`	`No`	Invoked when load either succeeds or fails.
`styleCell`	`Style`	`Yes`	Style for Cell which contains Image and Text.
`styleImageView`	`Style`	`Yes`	Style for View which contains Image.
`styleImage`	`Style`	`Yes`	Style for Image.
`styleDescription`	`Style`	`No`	Style for View which contains Name and Role.
`styleName`	`Style`	`No`	Style for Name Text.
`styleRole`	`Style`	`No`	Style for Role Text.

prop-types react-dom react-native-web

@everything-registry/sub-chunk-2182 @zalastax/nolb-mm @infinitebrahmanuniverse/nolb-mm

1.0.0

3 years ago