rg

rn-gradients

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

Showing:

Popularity

Downloads/wk

0

GitHub Stars

7

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Readme

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)
};

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial