rn-faded-flatlist

1.0.0 • Public • Published

rn-faded-scrollview

A simple and customisable React Native component that allows you to add fade effect in FlatList at both ends. Based on rn-faded-scrollview.

Vertical Scroll Horizontal Scroll

Installation

This library relies on react-native-linear-gradient. Follow setup instructions of linear gradient.

And now finally run in your project directory.

npm install rn-faded-flatlist

OR

yarn add rn-faded-flatlist

Documentation

This library accepts all the props of FlatList and some additional props.

Props

Name Description Default Type
allowStartFade Add fade at the start of ScrollView false Boolean
allowEndFade Add fade at the end of ScrollView true Boolean
fadeSize Fade size i.e( width incase of horizontal and height incase of vertical ScrollView) 20 Number
fadeColors Colors for fade effect ['rgba(229, 229, 229, 0.18)', 'rgba(206, 201, 201, 0.6)', 'rgba(206, 201, 201, 0.9)'] Array
scrollThreshold Threshold to control fade hide/show when it reaches start or end 10 Number
allowDivider Allow divider at fade end. false Boolean.
isRtl For RTL Layouts false Boolean.

Styling

For styling pass these props.

containerStyle, startFadeStyle, endFadeStyle and dividerStyle.

Events

Name Callback param Description
isCloseToEnd Boolean if scroll is close to end or not.
isCloseToStart Boolean if scroll is close to start or not.

Package Sidebar

Install

npm i rn-faded-flatlist

Weekly Downloads

3

Version

1.0.0

License

MIT

Unpacked Size

11.3 kB

Total Files

4

Last publish

Collaborators

  • jamenamcinteer