# expo-faded-scrollview

> A simple and customizable Expo component that allows you to add fade effect in ScrollView at both ends. Based on rn-faded-scrollview.

Latest version **1.0.11** (published 2020-12-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install expo-faded-scrollview
pnpm add expo-faded-scrollview
yarn add expo-faded-scrollview
bun add expo-faded-scrollview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2020-12-30 |
| First published | 2020-12-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | fergusonic |
| Keywords | react-native, scrollview, scrollview faded, faded scrollview, fadedscrollview, faded, rn-faded-scrollview, expo-faded-scrollview, fade, effects |

## Links

- npm: https://www.npmjs.com/package/expo-faded-scrollview
- Repository: https://github.com/200even/rn-faded-scrollview
- Homepage: https://github.com/200even/expo-faded-scrollview#readme
- Issues: https://github.com/200even/expo-faded-scrollview/issues
- npm.io page: https://npm.io/package/expo-faded-scrollview

## Recent versions

- 1.0.11 (latest) — 2020-12-30
- 1.0.10 — 2020-12-30

## README

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

Vertical Scroll             |  Horizontal Scroll
:-------------------------:|:-------------------------:
![](assets/vertical.gif) | ![](assets/horizontal.gif)

## Installation
This library relies on [expo](https://docs.expo.io/versions/latest/sdk/linear-gradient/)'s LinearGradient.

And now finally run in your project directory.

`npm install expo-faded-scrollview` 

OR

`yarn add expo-faded-scrollview` 

## Documentation
This library accepts all the props of [ScrollView](https://reactnative.dev/docs/scrollview) 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.   |

---
_Source: https://npm.io/package/expo-faded-scrollview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._