π₯ Fade gradient wrapper for React Native scrollable views and overlays on iOS and Android.
npm install rn-fade-wrapper

rn-fade-wrapper is a simple, highly-performant React Native component that adds smooth, customizable fade gradients to the edges of any content. Perfect for enhancing the user experience in scrollable containers, lists, carousels, modals, or any view with overflowing content.
---
- β‘ Native rendering for iOS and Android
- π Supports vertical and horizontal gradient directions
- π¨ Fully customizable fade size and color (per side or uniform)
- βοΈ Optional inward mode to fade towards content instead of outward
- π§© Simple API: drop-in wrapper with intuitive props
- πͺ Great performance with low overhead β ideal for scroll views and animations
---
``bash`
yarn add rn-fade-wrapper
or
`bash`
npm install rn-fade-wrapper
This library works in Expo (with expo prebuild) without additional configuration.
---
| Platform | Old Arch | Fabric |
|----------|----------|--------|
| iOS | β
| β
|
| Android | β
| β
|
---
`tsx
import { FadeWrapper } from 'rn-fade-wrapper';
const MyComponent = () => {
return (
size={24}
orientation="vertical"
>
);
};
`
---
| Prop | Type | Default | Description |
|--------------|----------------------------|----------------------|-------------|
| color | string | "#ffffff" | Fade color (can be any valid color string) |size
| | number | 20 | Uniform fade size in points |style
| | ViewStyle | {Β zIndex:Β 2Β } | Custom style applied to the wrapper view |inward
| | boolean | false | Makes the gradient fade inward (towards the center) instead of outward |sizes
| | { top?: number, right?: number, bottom?: number, left?: number } | undefined | Specific fade sizes per edge (overrides size and orientation) |orientation
| | 'horizontal' \| 'vertical' | 'vertical' | Preset for direction: applies size to top/bottom or left/right |children
| | React.ReactNode | β | Your wrapped content |
> Note: sizes takes precedence over both size and orientation.
---
tsx
color="black"
inward
sizes={{ top: 20, bottom: 30 }}
>
`$3
`tsx
color="rgba(0,0,0,0.5)"
size={16}
orientation="horizontal"
>
{/ content /}
`---
π Under the Hood
- iOS: Uses
CAGradientLayer inside native UIView
- Android: Draws LinearGradient on custom ViewGroup using Canvas
- Handles layout and re-renders with platform-specific logic for consistency---
π‘ UX Tip
Use
rn-fade-wrapper` to subtly indicate content overflow β especially in carousels, scroll views, and horizontal sliders. Gradients help hint to the user that there's more to scroll, improving engagement.---
MIT β free to use, improve and contribute π