diff --git a/README.md b/README.md
index bbd5a6d..2f468a4 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,126 @@
-# linear-gradient-taro
+# Linear Gradient Taro
-linear gradient fro taro
+linear gradient fro taro, reference react-native-linear-gradient & react-native-web-linear-gradient add web and miniprogram support. the documentation modified from project react-native-linear-gradient.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage and Examples](#examples)
+- [Props](#props)
+- [Example App](#an-example-app)
+- [Troubleshooting](#troubleshooting)
+- [Other Platforms](#other-platforms)
+
+## Installation
+
+Using Yarn
+
+```sh
+yarn add linear-gradient-taro
+```
+
+Using npm
+
+```sh
+npm install linear-gradient-taro --save
+```
+
+### With React Native >= 0.60
+
+Run `npx pod-install`
+
+### Simple
+
+The following code will produce something like this:
+
+
+
+```javascript
+import LinearGradient from 'linear-gradient-taro';
+
+// Within your render function
+
+
+ Sign in with Facebook
+
+
+```
+
+### Horizontal gradient
+
+Using the styles from above, set `start` and `end` like this to make the gradient go from left to right, instead of from top to bottom:
+
+```javascript
+
+
+ Sign in with Facebook
+
+
+```
+
+### Animated Gradient
+
+Check out [Examples/AnimatedGradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient/blob/master/Examples/AnimatedGradient/App.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*
+
+### Transparent Gradient
+
+The use of `transparent` color will most likely not lead to the expected result. `transparent` is actually a transparent black color (`rgba(0, 0, 0, 0)`). If you need a gradient in which the color is "fading", you need to have the same color with changing alpha channel. Example:
+
+```jsx
+// RGBA
+
+
+
+// Hex
+
+
+```
+
+## 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
+
+
+ Sign in with Facebook
+
+
+```
+
+
+
+#### useAngle / angle / angleCenter
+
+You may want to achieve an angled gradient effect, similar to those in image editors like Photoshop.
+One issue is that you have to calculate the angle based on the view's size, which only happens asynchronously and will cause unwanted flickr.
+
+In order to do that correctly you can set `{ useAngle: true, angle: 45, angleCenter: { x: 0.5, y: 0.5} }`, to achieve a gradient with a 45 degrees angle, with its center positioned in the view's exact center.
+
+`useAngle` is used to turn on/off angle based calculation (as opposed to `start`/`end`).
+`angle` is the angle in degrees.
+`angleCenter` is the center point of the angle (will control the weight and stretch of the gradient like it does in photoshop.
diff --git a/package.json b/package.json
index 1fae3dc..0bbb7d6 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"check-integration-tests": "run-s check-integration-test:*",
"diff-integration-tests": "mkdir -p diff && rm -rf diff/test && cp -r test diff/test && rm -rf diff/test/test-*/.git && cd diff && git init --quiet && git add -A && git commit --quiet --no-verify --allow-empty -m 'WIP' && echo '\\n\\nCommitted most recent integration test output in the \"diff\" directory. Review the changes with \"cd diff && git diff HEAD\" or your preferred git diff viewer.'",
"watch:build": "tsc -p tsconfig.json -w",
+ "watch:buildmodule": "tsc -p tsconfig.module.json -w",
"watch:test": "nyc --silent ava --watch",
"cov": "run-s build test:unit cov:html cov:lcov && open-cli coverage/index.html",
"cov:html": "nyc report --reporter=html",
diff --git a/src/index.ts b/src/index.ts
index 218d542..2836435 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,5 +7,9 @@ if (process.env.TARO_ENV === 'rn') {
} else {
implementation = require('./lib/index')
}
-const linearGradient: ComponentType = implementation.default || implementation
+
+interface ExtendLinearGradientProps extends LinearGradientProps {
+ className?: string
+}
+const linearGradient: ComponentType = implementation.default || implementation
export default linearGradient
diff --git a/src/lib/index.tsx b/src/lib/index.tsx
index 669b884..109868e 100644
--- a/src/lib/index.tsx
+++ b/src/lib/index.tsx
@@ -47,13 +47,13 @@ export default class LinearGradient extends PureComponent {
const { start, end } = this.props
- const direction = getDirction(start, end)
- if(direction) return direction
-
if (this.props.useAngle) {
return this.props.angle + 'deg';
}
+ const direction = getDirction(start, end)
+ if(direction) return direction
+
// Math.atan2 handles Infinity
const angle =
Math.atan2(
@@ -85,18 +85,17 @@ export default class LinearGradient extends PureComponent
{children}