A different and unique take on creating gradients and gradients with blur

by React Native Example

React Native: Native Gradient Blur View

This library is a thin React Native bridge around iOS: shashankpali/EZYGradientView

  • iOS: It is a different and unique take on creating gradients and gradients with blur on the iOS platform. The default CAGradientLayer implementation works just fine, but is confusing and gives different results than expected.

Getting started

  • npm install react-native-gradient-blur-view --save
  • react-native link react-native-gradient-blur-view

Usage

import RNGradientBlurView from 'react-native-gradient-blur-view';

<RNGradientBlurView style={styles.gradientView} />

Props

Prop Type Default Note
firstColor string Primary Color
secondColor: iOS string Secondary Color
angle: iOS number Angle of Color Division
colorRatio: iOS number Color Ratio
fadeIntensity number Fade Intensity Value
blurOpacity number Blur Opacity Value

TO-DO

  • Android Support

GitHub