1.0.13 • Published 2 years ago

rn-faded-scrollview v1.0.13

Weekly downloads
188
License
MIT
Repository
github
Last release
2 years ago

rn-faded-scrollview

A simple and customisable React Native component that allows you to add fade effect in ScrollView at both ends.

Vertical ScrollHorizontal Scroll
npm.ionpm.io

Sponsor

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-scrollview

OR

yarn add rn-faded-scrollview

Documentation

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

Props

NameDescriptionDefaultType
allowStartFadeAdd fade at the start of ScrollViewfalseBoolean
allowEndFadeAdd fade at the end of ScrollViewtrueBoolean
fadeSizeFade size i.e( width incase of horizontal and height incase of vertical ScrollView)20Number
fadeColorsColors for fade effect'rgba(229, 229, 229, 0.18)', 'rgba(206, 201, 201, 0.6)', 'rgba(206, 201, 201, 0.9)'Array
scrollThresholdThreshold to control fade hide/show when it reaches start or end10Number
scrollEventThrottleThis controls how often the scroll event will be fired while scrolling (as a time interval in ms)16Number
allowDividerAllow divider at fade end.falseBoolean
isRtlFor RTL LayoutsfalseBoolean
onContentSizeChangeonContentSizeChange call back added, function will return contentWidth and contentHeightFunction

Styling

For styling pass these props.

containerStyle, startFadeStyle, endFadeStyle and dividerStyle.

Events

NameCallback paramDescription
isCloseToEndBooleanif scroll is close to end or not.
isCloseToStartBooleanif scroll is close to start or not.

License

MIT

1.0.13

2 years ago

1.0.12

2 years ago

1.0.11

2 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago