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.

$3

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.

$3

``bash


Using yarn

yarn add react-native-blur-line

Using npm

npm install react-native-blur-line
`

Usage

`tsx

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

...

...
/>


`

`tsx



...



`

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

`tsx





``