172 lines
5.8 KiB
Markdown
172 lines
5.8 KiB
Markdown
# react-native-linear-gradient
|
|
|
|
A `<LinearGradient>` component for react-native, as seen in
|
|
[react-native-login](https://github.com/brentvatne/react-native-login).
|
|
|
|
Version 2.0 supports react-native >= 0.40.0
|
|
|
|
## Add it to your project
|
|
|
|
You can try linking the project automatically:
|
|
|
|
`$ react-native link`
|
|
|
|
or do it manually as described below:
|
|
|
|
### iOS
|
|
|
|
- Run `npm install react-native-linear-gradient --save`
|
|
|
|
Then either:
|
|
|
|
##### Cocoapods
|
|
add the following line to your Podfile:
|
|
|
|
```sh
|
|
pod 'React', :path => '../node_modules/react-native'
|
|
pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
|
|
```
|
|
|
|
or:
|
|
|
|
##### Manually
|
|
|
|
1. Open your project in XCode, right click on `Libraries` and click `Add
|
|
Files to "Your Project Name"` Look under `node_modules/react-native-linear-gradient` and add `BVLinearGradient.xcodeproj`. [(Screenshot)](http://url.brentvatne.ca/g9Wp).
|
|
2. Add `libBVLinearGradient.a` to `Build Phases -> Link Binary With Libraries`
|
|
[(Screenshot)](http://url.brentvatne.ca/g9Wp).
|
|
3. Click on `BVLinearGradient.xcodeproj` in `Libraries` and go the `Build
|
|
Settings` tab. Double click the text to the right of `Header Search
|
|
Paths` and verify that it has `$(SRCROOT)/../react-native/React` - if it
|
|
isn't, then add it. This is so XCode is able to find the headers that
|
|
the `BVLinearGradient` source files are referring to by pointing to the
|
|
header files installed within the `react-native` `node_modules`
|
|
directory. [(Screenshot)](http://url.brentvatne.ca/7wE0).
|
|
|
|
Then:
|
|
|
|
|
|
- Whenever you want to use it within React code now you can: `import LinearGradient from 'react-native-linear-gradient';`
|
|
|
|
|
|
**If you're having trouble, you can point your `package.json` at github to see if the issue has been fixed. Simply change the dependency**
|
|
|
|
`"react-native-linear-gradient": "react-native-community/react-native-linear-gradient",`
|
|
|
|
**to get the data right from github instead of npm and then `npm install`**
|
|
|
|
For instance the podspec file does not contain the right data (author attributes etc..) in npm while it does in the github repo.
|
|
|
|
#### Android
|
|
|
|
1. in `android/settings.gradle`
|
|
```
|
|
...
|
|
include ':react-native-linear-gradient'
|
|
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
|
|
```
|
|
|
|
2. in `android/app/build.gradle` add:
|
|
```
|
|
dependencies {
|
|
...
|
|
compile project(':react-native-linear-gradient')
|
|
}
|
|
```
|
|
|
|
3. and finally, in `android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java` for react-native < 0.29,
|
|
or `android/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java` for react-native >= 0.29 add:
|
|
```java
|
|
//...
|
|
import com.BV.LinearGradient.LinearGradientPackage; // <--- This!
|
|
//...
|
|
@Override
|
|
protected List<ReactPackage> getPackages() {
|
|
return Arrays.<ReactPackage>asList(
|
|
new MainReactPackage(),
|
|
new LinearGradientPackage() // <---- and This!
|
|
);
|
|
}
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Simple
|
|
|
|
The following code will produce something like this:
|
|
|
|
|
|
|
|
```javascript
|
|
import LinearGradient from 'react-native-linear-gradient';
|
|
|
|
// Within your render function
|
|
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
|
|
<Text style={styles.buttonText}>
|
|
Sign in with Facebook
|
|
</Text>
|
|
</LinearGradient>
|
|
|
|
// Later on in your styles..
|
|
var styles = StyleSheet.create({
|
|
linearGradient: {
|
|
flex: 1,
|
|
paddingLeft: 15,
|
|
paddingRight: 15,
|
|
borderRadius: 5
|
|
},
|
|
buttonText: {
|
|
fontSize: 18,
|
|
fontFamily: 'Gill Sans',
|
|
textAlign: 'center',
|
|
margin: 10,
|
|
color: '#ffffff',
|
|
backgroundColor: 'transparent',
|
|
},
|
|
});
|
|
```
|
|
|
|
### Additional props
|
|
In addition to regular `View` props, you can also provide additional props to customize your gradient look:
|
|
|
|
#### colors
|
|
An array of at least two color values that represent gradient colors. Example: `['red', 'blue']` sets gradient from red to blue.
|
|
|
|
#### start
|
|
An optional object of the following type: `{ x: number, y: number }`. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: `{ x: 0.1, y: 0.1 }` means that the gradient will start 10% from the top and 10% from the left.
|
|
|
|
#### end
|
|
Same as start, but for the end of the gradient.
|
|
|
|
#### locations
|
|
An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in `colors` prop. Example: `[0.1, 0.75, 1]` means that first color will take 0% - 10%, second color will take 10% - 75% and finally third color will occupy 75% - 100%.
|
|
|
|
```javascript
|
|
<LinearGradient
|
|
start={{x: 0.0, y: 0.25}} end={{x: 0.5, y: 1.0}}
|
|
locations={[0,0.5,0.6]}
|
|
colors={['#4c669f', '#3b5998', '#192f6a']}
|
|
style={styles.linearGradient}>
|
|
<Text style={styles.buttonText}>
|
|
Sign in with Facebook
|
|
</Text>
|
|
</LinearGradient>
|
|
```
|
|
|
|
|
|
|
|
### Updating the values for fun
|
|
|
|
Check out [Examples/AnimatedGradient](https://github.com/react-native-community/react-native-linear-gradient/blob/master/Examples/AnimatedGradient/src/index.js) (`git clone` this project, cd into it, npm install, open in XCode and run) to see how this is done:
|
|
|
|
|
|
|
|
*This gif was created using [licecap](http://www.cockos.com/licecap/) - a great piece of free OSS*
|
|
|
|
### An example app
|
|
You can see this component in action in [brentvatne/react-native-login](https://github.com/brentvatne/react-native-login/blob/master/App/Screens/LoginScreen.js#L58-L62).
|
|
|
|
### License
|
|
|
|
License is MIT
|