rn-gradients

A 100% JS solution to adding linear and radial gradients to your React Native projects.

Note: This project was an experiment to see if color gradients were possible in React Native with just pure JS. This package IS NOT performant and I would only recommend using it if you can't get the other (native) gradient packages to work or if you are only rendering 1 - 2 gradients at a time.

LinearGradient

RadialGradient

children are supported

Install

npm install rn-gradients

Import

import { LinearGradient, RadialGradient } from 'rn-gradients';

Example

(more in the src folder)

<LinearGradient
  height={250}
  width={370}
  colors={['#ade', '#fde']}
  rotation={42}
  style={{ justifyContent: 'center', alignItems: 'center' }}
>
  <Text style={{ fontSize: 42, fontWeight: '900', color: '#fff9' }}>Hello World</Text>
</LinearGradient>

Props

LinearGradient.propTypes = {
  height: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired,
  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
  intervals: PropTypes.arrayOf(PropTypes.number),
  rotation: PropTypes.number // in degrees - NOT radians.
};

RadialGradient.propTypes = {
  height: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired,
  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
  intervals: PropTypes.arrayOf(PropTypes.number)
};