ScrollFade

Fades the edges of a scrollable so content looks like it passes under the boundary rather than being cut off at it.

This is the React Native equivalent of shadcn/ui's scroll-fade utility. That one is CSS mask-image driven by a scroll timeline; React Native has neither, so the fades here are gradient overlays whose opacity follows the scroll position.

Usage

import { ScrollFade, Badge } from 'panelui-native';
import { ScrollView } from 'react-native';

<ScrollFade>
  <ScrollView horizontal showsHorizontalScrollIndicator={false}>
    {tags.map((tag) => (
      <Badge key={tag}>{tag}</Badge>
    ))}
  </ScrollView>
</ScrollFade>

Orientation comes from the child's horizontal prop — a horizontal list fades left and right, a vertical one top and bottom.

On a surface

The fade resolves to the page background by default. When the scrollable sits on a card, tell it which colour to blend into or the fade will show as a band:

<Card>
  <ScrollFade color="var(--color-card)">
    <ScrollView>…</ScrollView>
  </ScrollFade>
</Card>

One edge only

<ScrollFade edges="end" size={64}>
  <ScrollView>…</ScrollView>
</ScrollFade>

API Reference

Also accepts every ViewProps.

Notes

Each edge only fades once there is content past it, so a list scrolled to the top shows nothing at the top. The scroll position is read via onScroll at scrollEventThrottle={16}; your own onScroll on the child still fires.