react-native-gradient
v0.4.9
Published
Gradient component for React Native
Downloads
10
Readme
react-native-gradient
Gradient component for React Native.
Requirements
- iOS
- Swift (see the last note on this piece of documentation for more info)
- CocoaPods
- Android
- Kotlin
- Gradle
Installation
First, use NPM to install this package:
npm install react-native-gradient --save
After this you can continue the installation for one (or all) platforms below.
iOS
The only supported method of installing react-native-gradients is through CocoaPods. To do so, add the following to your Podfile:
pod 'react-native-gradient', :path => 'node_modules/react-native-gradient/ios'
Android
The only supported method of installing react-native-gradients is through Gradle. To do so, follow these steps:
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Addimport com.q42.rngradient.GradientPackage;
to the imports at the top of the file - Addnew GradientPackage()
to the list returned by thegetPackages()
method - Append the following lines to
android/settings.gradle
:include ':react-native-gradient' project(':react-native-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gradient/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-gradient')
Usage
Linear gradient
The linear gradient is a component like any other:
import Gradient from 'react-native-gradient';
<Gradient.Linear colors={['red', 'blue']} />
Props
colors
(required): An array of css-style colors, from the beginning to the end of the gradient.locations
(optional, iOS only): An array of numbers, to manipulate how the gradient is drawn. For example, you can give it[0.8, 1.0]
to show the first color for 80% of the gradient.- Any other view-related props (like
style
,transform
orpointerEvents
) are passed through, so feel free to use those if you need them.
Radial gradient
The radial gradient is a component like any other:
import Gradient from 'react-native-gradient';
<Gradient.Radial colors={['red', 'blue']} radius={200} />
Props
colors
(required): An array of css-style colors, from the beginning to the end of the gradient.radius
(required): A number of the size (points) of the radius.locations
(optional, iOS only): An array of numbers, to manipulate how the gradient is drawn. For example, you can give it[0.8, 1.0]
to show the first color for 80% of the gradient.center
(optional): An array of exactly two numbers who define the center of the gradient in percentages. Defaults to[0.5, 0.5]
.- Any other view-related props (like
style
,transform
orpointerEvents
) are passed through, so feel free to use those if you need them.
TODO
- Tests
- Angle support
- Remove the CocoaPods requirement
- Remove the Kotlin requirement
- Remove the Swift requirement