status-im
/
react-native-linear-gradient
mirror of https://github.com/status-im/react-native-linear-gradient.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update README with new prop types, more examples

This commit is contained in:
Dmitry Gladkov 2017-03-30 15:24:07 +03:00 committed by GitHub
parent 28f503d010
commit 50d3254495
1 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -130,19 +130,18 @@ var styles = StyleSheet.create({
You can also use start and end points, as well as specify the locations You can also use start and end points, as well as specify the locations
for the gradient color changes with the `start`, `end`, `colors` and `locations` for the gradient color changes with the `start`, `end`, `colors` and `locations`
props: props:
#### colors #### colors
An array of colors that represent stops in the gradient. At least two colors are required (otherwise it's not a gradient, it's just a fill!). An array of at least two color values that represent gradient steps. Example: `['red', 'blue']` sets gradient from red to blue.
#### start #### start
An array of [x, y] where x and y are floats. They represent the position that the gradient starts at, as a fraction of the overall size of the gradient. For example, [0.1, 0.1] means that the gradient will start 10% from the top and 10% from the left. An 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 #### end
Same as start but for the end of the gradient. Same as start, but for the end of the gradient.
#### locations #### locations
An array of the same lenth as colors, where each element is a float with the same meaning as the start and end values, but instead they indicate where the color at that index should be. 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 ```javascript
<LinearGradient <LinearGradient