rn-fade-wrapper

React Native fade gradient 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.

✨ Features

• ⚡ 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

📦 Installation

yarn add rn-fade-wrapper

or

npm install rn-fade-wrapper

Expo

This library works in Expo (with expo prebuild) without additional configuration.

📱 Platform Support

Platform	Old Arch	Fabric
iOS	✅	✅
Android	✅	✅

🚀 Quick Start

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

const MyComponent = () => {
  return (
    <FadeWrapper
      color="#ffffff"
      size={24}
      orientation="vertical"
    >
      <ScrollView>
        <Text>Fading edges example</Text>
      </ScrollView>
    </FadeWrapper>
  );
};

🧩 Props

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.

🎛 Examples

🎯 Custom sides + inward fade:

<FadeWrapper
  color="black"
  inward
  sizes={{ top: 20, bottom: 30 }}
>
  <FlatList ... />
</FadeWrapper>

📜 Horizontal scroll fade:

<FadeWrapper
  color="rgba(0,0,0,0.5)"
  size={16}
  orientation="horizontal"
>
  <ScrollView horizontal>
    {/* content */}
  </ScrollView>
</FadeWrapper>

🛠 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.

📘 License

MIT — free to use, improve and contribute 🎉