2015-03-31 17:44:16 +00:00
## react-native-linear-gradient
2015-03-31 18:42:53 +00:00
A `<LinearGradient>` component for react-native, as seen in
[react-native-login ](https://github.com/brentvatne/react-native-login ).
### Add it to your project
1. Run `npm install react-native-linear-gradient --save`
2. Open your project in XCode, right click on `Libraries` and click `Add
Files to "Your Project Name" [(Screenshot) ](http://url.brentvatne.ca/g9Wp ).
3. Add `libBVLinearGradient.a` to `Build Phases -> Link Binary With Libraries`
[(Screenshot) ](http://url.brentvatne.ca/g9Wp ).
4. Click on `BVLinearGradient.xcodeproj` in `Libraries` and go the `Build
Phases` tab. Double click the text to the right of `Header Search
2015-07-07 21:48:43 +00:00
Paths` and verify that it has `$(SRCROOT)/../react-native/React` - if it
2015-03-31 18:42:53 +00:00
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 ).
5. Whenever you want to use it within React code now you can: `var LinearGradient =
require('react-native-linear-gradient');`
2015-04-06 20:46:12 +00:00
## Examples
2015-03-31 18:42:53 +00:00
2015-04-06 20:49:44 +00:00
### Simple
2015-03-31 18:42:53 +00:00
The following code will produce something like this:
2015-03-31 18:44:26 +00:00
![Example code result ](https://raw.githubusercontent.com/brentvatne/react-native-linear-gradient/master/example.png )
2015-03-31 18:42:53 +00:00
```javascript
// 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',
},
});
```
2015-04-06 20:49:44 +00:00
### Additional props
2015-04-01 00:48:11 +00:00
You can also use start and end points, as well as specify the locations
for the gradient color changes with the `start` , `end` and `locations`
props:
```javascript
< LinearGradient
start={[0,0.25]} end={[0.5,1]}
locations={[0,0.5,0.6]}
colors={['#4c669f', '#3b5998', '#192f6a']}
style={styles.linearGradient}>
< Text style = {styles.buttonText} >
Sign in with Facebook
< / Text >
< / LinearGradient >
```
2015-04-01 00:49:22 +00:00
![Example with extra props ](https://raw.githubusercontent.com/brentvatne/react-native-linear-gradient/master/example-other-props.png )
2015-04-01 00:48:11 +00:00
2015-04-06 20:49:44 +00:00
### Updating the values for fun
2015-04-06 20:46:12 +00:00
Check out [Examples/AnimatedGradient] (`git clone` this project, cd into it, npm install, open in XCode and run) to see how this is done:
![Example with extra props ](https://raw.githubusercontent.com/brentvatne/react-native-linear-gradient/master/example-animated.gif )
2015-04-06 20:49:44 +00:00
2015-04-06 20:46:12 +00:00
*This gif was created using [licecap ](http://www.cockos.com/licecap/ ) - a great piece of free OSS*
2015-04-01 00:48:11 +00:00
### An example app
2015-04-08 22:52:12 +00:00
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#L70-L73 ).