https://github.com/kusstar/react-native-fading-edge
A <FadingEdge/> component for react-native
https://github.com/kusstar/react-native-fading-edge
android android-fadingedgelayout react-native
Last synced: 11 months ago
JSON representation
A <FadingEdge/> component for react-native
- Host: GitHub
- URL: https://github.com/kusstar/react-native-fading-edge
- Owner: KusStar
- License: mit
- Created: 2020-08-22T04:28:22.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-30T14:29:00.000Z (over 2 years ago)
- Last Synced: 2025-07-02T00:48:10.765Z (about 1 year ago)
- Topics: android, android-fadingedgelayout, react-native
- Language: Java
- Homepage: https://www.npmjs.com/package/react-native-fading-edge
- Size: 6.84 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-fading-edge
A \ component for react-native.
## Platforms Supported
- [ ] iOS
- [x] Android, use [Android-FadingEdgeLayout](https://github.com/bosphere/Android-FadingEdgeLayout)
## Getting Started
```
$ yarn add react-native-fading-edge
```
or
```
$ npm install --save react-native-fading-edge
```
#### Using React Native >= 0.60
Linking the package manually is not required anymore with [Autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).
#### Using React Native < 0.60
```
$ react-native link react-native-fading-edge
```
## Usage
```jsx
import React from 'react';
import { View, Text } from 'react-native';
import FadingEdge from 'react-native-fading-edge';
const App = () => (
Hello, World.
)
```
## Props
```ts
// ViewProps: https://github.com/facebook/react-native-website/blob/master/docs/view.md#props
interface FadingEdgeProps extends ReactNative.ViewProps {
top: number;
left: number;
bottom: number;
right: number;
}
```
## Motivation
Firstly I use [react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient) and [react-native-masked-view](https://github.com/react-native-community/react-native-masked-view) to implement this effect:
```jsx
import MaskedView from '@react-native-community/masked-view';
import LinearGradient from 'react-native-linear-gradient';
const FadingEdge = ({ children }) => (
}
>
{children}
);
```
But its performance was terrible and had rendering issues. Maybe they were not designed to do stuff like this.
So I found the [Android-FadingEdgeLayout](https://github.com/bosphere/Android-FadingEdgeLayout) and made this wrapper.
## Thanks
- [Android-FadingEdgeLayout](https://github.com/bosphere/Android-FadingEdgeLayout)
- [react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient)
- [react-native-masked-view](https://github.com/react-native-community/react-native-masked-view)
## License
[MIT](LICENSE)