react-native-blur-line

A lightweight, customizable gradient blur line for React Native. Perfect for creating soft fade-out effects at the top or bottom of ScrollView, FlatList, or SectionList components.

Screenshots

Installation

This package requires react-native-linear-gradient as a peer dependency.

1. Install Peer Dependency

You must follow the Official Installation Guide for react-native-linear-gradient first.
Since it contains native code, ensure you run pod install for iOS after installing it.

2. Install this library

# Using yarn
yarn add react-native-blur-line

# Using npm
npm install react-native-blur-line

Usage

import BlurLine from 'react-native-blur-line';

...



<BlurLine />

<FlatList
  ...
/>

<BlurLine bottom />

<BlurLine color={#FF8800} />

<ScrollView>
  ...
</ScrollView>

<BlurLine bottom color="rgba(0, 0, 0, 1)" />

Props

| Prop | Type | Default Value | Description | | --------- | --------- | ------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | bottom | boolean | false | If true, the gradient direction is inverted (fades out upwards) for the bottom of the screen | | horizontal | boolean | false | If true, the blur line will be drawn for a horizontal list/view | | color | string | "rgba(255,255,255,1)" | The starting color of the blur. Should be the same as your background color. | | style | ViewStyle | { width: '100%', height: 10, zIndex: 1 } with top: 10 or if bottom prop is true, bottom: 10 | Basically to override existing style and customize its usage as you like. |

Color Format Support

<BlurLine color="#000" />
<BlurLine color="#FF8800" />
<BlurLine color="#FF880080" />
<BlurLine color="rgb(255, 0, 0)" />
<BlurLine color="rgba(0, 0, 0, 1)" />