A lightweight gradient blur line for React Native
npm install react-native-blur-lineA 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.
---



This package requires react-native-linear-gradient as a 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.
``bashUsing yarn
yarn add react-native-blur-line
Usage
`tsximport 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
``