react-native-scroll-mask

Fades the edges of a scroll view so people get a hint there's more to see. The top edge only shows up once you've scrolled down a bit, and the bottom fades away as you reach the end.

I put this together after running into twilson.net/scroll-mask and wanting the same effect in React Native.

Install

npm i react-native-scroll-mask

Usage

Wrap a scrollable and pass the color sitting behind it.

import { ScrollView } from "react-native";
import { ScrollMask } from "react-native-scroll-mask";

<ScrollMask color="#0b0b0f" style={{ flex: 1 }}>
  <ScrollView />
</ScrollMask>;

Props

| Prop | Type | Default | What it does | | -------------- | ---------------------- | ------------ | -------------------------------------------------------------------------- | | children | ReactElement | required | One scrollable element (ScrollView, FlatList, FlashList, …). | | color | string | required | The background behind the scrollable. Edges fade into this. | | horizontal | boolean | child's prop | Fade direction. Falls back to the child's horizontal, then to false. | | fadeSize | number | 40 | How long each faded edge is, in px. | | fadeDistance | number | 24 | How much you scroll (px) to take a fade from hidden to fully shown. | | style | StyleProp<ViewStyle> | — | Style for the wrapper. | | resetKey | unknown | — | Change it to snap the tracked scroll offset back to 0 after a data swap. |

License

MIT