Demo

Smooth fade gradients at the edges of your content can make a huge difference in how users perceive scrolling interfaces. They hint at overflow, suggest direction, and provide a more polished look. But implementing them natively in React Native can be tricky...

That’s why I built rn-fade-wrapper—a lightweight, high-performance library for adding native gradient fades to any scrollable or overflowing content. It works with both old and new architectures (Fabric), and supports iOS, Android, and Expo out of the box.

✨ Features

  • ✅ Native rendering via CAGradientLayer (iOS) and Canvas (Android)
  • ↕ Supports vertical and horizontal fades
  • 🌟 Fully customizable: color, size, per-edge control
  • ↔ Inward fading option (towards content)
  • ⚖ Drop-in wrapper component with simple API
  • 🚀 Fabric-ready with TypeScript types

⚡ Quick Example 

import { FadeWrapper } from 'rn-fade-wrapper';

<FadeWrapper
  color="#000"
  size={24}
  orientation="vertical"
>
  <ScrollView>
    <Text>Some long content...Text>
  ScrollView>
FadeWrapper>

📦 Installation 

yarn add rn-fade-wrapper
# or
npm install rn-fade-wrapper

Works with Expo too:

npx expo install rn-fade-wrapper

🔧 Use Cases

  • ScrollViews, FlatLists, and SectionLists
  • Carousels or horizontal sliders
  • Modals with long content
  • Any container with potential overflow

🌐 Under the Hood

  • iOS: uses CAGradientLayer inside a custom UIView, overlaid on the target content.
  • Android: draws a LinearGradient via Canvas on a custom ViewGroup.
  • Efficient onLayout and re-render management to minimize overhead.

🎉 Bonus: Customization Power 

<FadeWrapper
  color="rgba(0,0,0,0.5)"
  sizes={{ top: 16, bottom: 24 }}
  inward
>
  <FlatList ... />
FadeWrapper>

Want horizontal fading? Just set orientation="horizontal" or define left / right in sizes.

📅 Why It Matters

Polished visual feedback can increase perceived performance and user satisfaction. Native gradients feel smooth and fluid, especially in content-heavy UIs. rn-fade-wrapper helps you build delightful UI with minimal effort.

📚 Learn More

If you like this, give it a ⭐ on GitHub or try it out in your next UI!

Happy fading ✨