1 | # react-native-linear-gradient
|
2 |
|
3 | A `<LinearGradient>` component for react-native, as seen in
|
4 | [react-native-login](https://github.com/brentvatne/react-native-login).
|
5 |
|
6 | Version 2.0 supports react-native >= 0.40.0
|
7 |
|
8 | ## Add it to your project
|
9 |
|
10 | You can try linking the project automatically:
|
11 |
|
12 | `$ react-native link`
|
13 |
|
14 | or do it manually as described below:
|
15 |
|
16 | ### iOS
|
17 |
|
18 | - Run `npm install react-native-linear-gradient --save`
|
19 |
|
20 | Then either:
|
21 |
|
22 | ##### Cocoapods
|
23 | add the following line to your Podfile:
|
24 |
|
25 | ```sh
|
26 | pod 'React', :path => '../node_modules/react-native'
|
27 | pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
|
28 | ```
|
29 |
|
30 | or:
|
31 |
|
32 | ##### Manually
|
33 |
|
34 | 1. Open your project in XCode, right click on `Libraries` and click `Add
|
35 | Files to "Your Project Name"` Look under `node_modules/react-native-linear-gradient` and add `BVLinearGradient.xcodeproj`. [(Screenshot)](http://url.brentvatne.ca/g9Wp).
|
36 | 2. Add `libBVLinearGradient.a` to `Build Phases -> Link Binary With Libraries`
|
37 | [(Screenshot)](http://url.brentvatne.ca/g9Wp).
|
38 | 3. Click on `BVLinearGradient.xcodeproj` in `Libraries` and go the `Build
|
39 | Settings` tab. Double click the text to the right of `Header Search
|
40 | Paths` and verify that it has `$(SRCROOT)/../react-native/React` - if it
|
41 | isn't, then add it. This is so XCode is able to find the headers that
|
42 | the `BVLinearGradient` source files are referring to by pointing to the
|
43 | header files installed within the `react-native` `node_modules`
|
44 | directory. [(Screenshot)](http://url.brentvatne.ca/7wE0).
|
45 |
|
46 | Then:
|
47 |
|
48 |
|
49 | - Whenever you want to use it within React code now you can: `import LinearGradient from 'react-native-linear-gradient';`
|
50 |
|
51 |
|
52 | **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**
|
53 |
|
54 | `"react-native-linear-gradient": "react-native-community/react-native-linear-gradient",`
|
55 |
|
56 | **to get the data right from github instead of npm and then `npm install`**
|
57 |
|
58 | For instance the podspec file does not contain the right data (author attributes etc..) in npm while it does in the github repo.
|
59 |
|
60 | #### Android
|
61 |
|
62 | 1. in `android/settings.gradle`
|
63 | ```
|
64 | ...
|
65 | include ':react-native-linear-gradient'
|
66 | project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
|
67 | ```
|
68 |
|
69 | 2. in `android/app/build.gradle` add:
|
70 | ```
|
71 | dependencies {
|
72 | ...
|
73 | compile project(':react-native-linear-gradient')
|
74 | }
|
75 | ```
|
76 |
|
77 | 3. and finally, in `android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java` for react-native < 0.29,
|
78 | or `android/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java` for react-native >= 0.29 add:
|
79 | ```java
|
80 | //...
|
81 | import com.BV.LinearGradient.LinearGradientPackage; // <--- This!
|
82 | //...
|
83 | @Override
|
84 | protected List<ReactPackage> getPackages() {
|
85 | return Arrays.<ReactPackage>asList(
|
86 | new MainReactPackage(),
|
87 | new LinearGradientPackage() // <---- and This!
|
88 | );
|
89 | }
|
90 | ```
|
91 |
|
92 | ## Examples
|
93 |
|
94 | ### Simple
|
95 |
|
96 | The following code will produce something like this:
|
97 |
|
98 | ![Example code result](https://raw.githubusercontent.com/react-native-community/react-native-linear-gradient/master/images/example.png)
|
99 |
|
100 | ```javascript
|
101 | import LinearGradient from 'react-native-linear-gradient';
|
102 |
|
103 | // Within your render function
|
104 | <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
|
105 | <Text style={styles.buttonText}>
|
106 | Sign in with Facebook
|
107 | </Text>
|
108 | </LinearGradient>
|
109 |
|
110 | // Later on in your styles..
|
111 | var styles = StyleSheet.create({
|
112 | linearGradient: {
|
113 | flex: 1,
|
114 | paddingLeft: 15,
|
115 | paddingRight: 15,
|
116 | borderRadius: 5
|
117 | },
|
118 | buttonText: {
|
119 | fontSize: 18,
|
120 | fontFamily: 'Gill Sans',
|
121 | textAlign: 'center',
|
122 | margin: 10,
|
123 | color: '#ffffff',
|
124 | backgroundColor: 'transparent',
|
125 | },
|
126 | });
|
127 | ```
|
128 |
|
129 | ### Additional props
|
130 | In addition to regular `View` props, you can also provide additional props to customize your gradient look:
|
131 |
|
132 | #### colors
|
133 | An array of at least two color values that represent gradient colors. Example: `['red', 'blue']` sets gradient from red to blue.
|
134 |
|
135 | #### start
|
136 | 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.
|
137 |
|
138 | #### end
|
139 | Same as start, but for the end of the gradient.
|
140 |
|
141 | #### locations
|
142 | 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%.
|
143 |
|
144 | ```javascript
|
145 | <LinearGradient
|
146 | start={{x: 0.0, y: 0.25}} end={{x: 0.5, y: 1.0}}
|
147 | locations={[0,0.5,0.6]}
|
148 | colors={['#4c669f', '#3b5998', '#192f6a']}
|
149 | style={styles.linearGradient}>
|
150 | <Text style={styles.buttonText}>
|
151 | Sign in with Facebook
|
152 | </Text>
|
153 | </LinearGradient>
|
154 | ```
|
155 |
|
156 | ![Example with extra props](https://raw.githubusercontent.com/react-native-community/react-native-linear-gradient/master/images/example-other-props.png)
|
157 |
|
158 | ### Updating the values for fun
|
159 |
|
160 | 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:
|
161 |
|
162 | ![Example with extra props](https://raw.githubusercontent.com/react-native-community/react-native-linear-gradient/master/images/example-animated.gif)
|
163 |
|
164 | *This gif was created using [licecap](http://www.cockos.com/licecap/) - a great piece of free OSS*
|
165 |
|
166 | ### An example app
|
167 | 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).
|
168 |
|
169 | ### License
|
170 |
|
171 | License is MIT
|