{"_id":"@2hats/react-native-linear-gradient","_rev":"2-07621da3f66bfd8bb1ffdc163ea9a49c","name":"@2hats/react-native-linear-gradient","description":"A element for react-native","dist-tags":{"latest":"2.2.0"},"versions":{"2.0.0":{"name":"@2hats/react-native-linear-gradient","version":"2.0.0","description":"A element for react-native","main":"index","author":{"name":"Brent Vatne","email":"brentvatne@gmail.com","url":"https://github.com/brentvatne"},"license":"MIT","contributors":[{"name":"Nick Hudkins","email":"nick@nickhudkins.com","url":"https://github.com/nickhudkins"},{"name":"Dmitry Gladkov","email":"dmitry.gladkov@gmail.com","url":"https://github.com/dgladkov"}],"repository":{"type":"git","url":"git+ssh://git@github.com/brentvatne/react-native-linear-gradient.git"},"devDependencies":{"jest-cli":"0.2.1"},"dependencies":{"prop-types":"^15.5.10"},"gitHead":"76cf535c1034d9e3fa9f9eeaa30c314f0c576d21","bugs":{"url":"https://github.com/brentvatne/react-native-linear-gradient/issues"},"homepage":"https://github.com/brentvatne/react-native-linear-gradient#readme","_id":"@2hats/react-native-linear-gradient@2.0.0","_npmVersion":"5.0.4","_nodeVersion":"8.1.2","_npmUser":{"name":"2hats","email":"piaojingtai@gmail.com"},"dist":{"integrity":"sha512-RNDfRdbkEEOr83PVo62BzK6OYg6XB3YWqjzu848Y6b3eDm+tgOkpKQWUIu0b8AjSeQBtIlusFNBDMaaGM++4tg==","shasum":"1660ad1856a0ae71d63a4d6853266b5e6b1921bb","tarball":"https://registry.npmjs.org/@2hats/react-native-linear-gradient/-/react-native-linear-gradient-2.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3DOy+CYiwaFOLk35zavIxeBN+MiQGmtfKF9lSn8s48AIhAMcFjBF5gpa1FAKQgN9uChGrCki4wgWkaZRrjSmRBkO5"}]},"maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-linear-gradient-2.0.0.tgz_1499732153433_0.7380794449709356"}},"2.2.0":{"name":"@2hats/react-native-linear-gradient","version":"2.2.0","description":"A element for react-native","main":"index","author":{"name":"Brent Vatne","email":"brentvatne@gmail.com","url":"https://github.com/brentvatne"},"license":"MIT","contributors":[{"name":"Nick Hudkins","email":"nick@nickhudkins.com","url":"https://github.com/nickhudkins"},{"name":"Dmitry Gladkov","email":"dmitry.gladkov@gmail.com","url":"https://github.com/dgladkov"}],"repository":{"type":"git","url":"git+ssh://git@github.com/brentvatne/react-native-linear-gradient.git"},"dependencies":{"prop-types":"^15.5.10"},"gitHead":"2083881b9ec31938da46175aa12a5eb3e7632079","bugs":{"url":"https://github.com/brentvatne/react-native-linear-gradient/issues"},"homepage":"https://github.com/brentvatne/react-native-linear-gradient#readme","_id":"@2hats/react-native-linear-gradient@2.2.0","_npmVersion":"5.3.0","_nodeVersion":"7.5.0","_npmUser":{"name":"2hats","email":"piaojingtai@gmail.com"},"dist":{"integrity":"sha512-DKKBwett/v7B/FjG+zLt2jQbScTyFYZh9zJwP1jxnbKB6E3O54DfFpvEFz2grNM7/H84kej2kkqTr+AVRLsPQg==","shasum":"1ea2bb67dafbb8b76df7ff5f8172c0c0ff9a9f1f","tarball":"https://registry.npmjs.org/@2hats/react-native-linear-gradient/-/react-native-linear-gradient-2.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbvCpf7Os2ovnd/rr5e4NqIfQx3b87BXR9UrfmhvLGRAiBGl/FmUVBtvSYDdxcUqrH/5LY0sm/i7DQieyvr6onqzg=="}]},"maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-linear-gradient-2.2.0.tgz_1502932215455_0.10856063291430473"}}},"readme":"# react-native-linear-gradient\n\nA `` component for react-native, as seen in\n[react-native-login](https://github.com/brentvatne/react-native-login).\n\nVersion 2.0 supports react-native >= 0.40.0\n\n## Add it to your project\n\nYou can try linking the project automatically:\n\n`$ react-native link`\n\nor do it manually as described below:\n\n### iOS\n\n- Run `npm install react-native-linear-gradient --save`\n\nThen either:\n\n##### Cocoapods\nadd the following line to your Podfile:\n\n```sh\npod 'React', :path => '../node_modules/react-native'\npod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'\n```\n\nor:\n\n##### Manually\n\n1. Open your project in XCode, right click on `Libraries` and click `Add\n Files to \"Your Project Name\"` Look under `node_modules/react-native-linear-gradient` and add `BVLinearGradient.xcodeproj`. [(Screenshot)](http://url.brentvatne.ca/g9Wp).\n2. Add `libBVLinearGradient.a` to `Build Phases -> Link Binary With Libraries`\n [(Screenshot)](http://url.brentvatne.ca/g9Wp).\n3. Click on `BVLinearGradient.xcodeproj` in `Libraries` and go the `Build\n Settings` tab. Double click the text to the right of `Header Search\n Paths` and verify that it has `$(SRCROOT)/../react-native/React` - if it\n isn't, then add it. This is so XCode is able to find the headers that\n the `BVLinearGradient` source files are referring to by pointing to the\n header files installed within the `react-native` `node_modules`\n directory. [(Screenshot)](http://url.brentvatne.ca/7wE0).\n\nThen:\n\n\n- Whenever you want to use it within React code now you can: `import LinearGradient from 'react-native-linear-gradient';`\n\n\n**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**\n\n`\"react-native-linear-gradient\": \"react-native-community/react-native-linear-gradient\",`\n\n**to get the data right from github instead of npm and then `npm install`**\n\nFor instance the podspec file does not contain the right data (author attributes etc..) in npm while it does in the github repo.\n\n#### Android\n\n1. in `android/settings.gradle`\n```\n...\ninclude ':react-native-linear-gradient'\nproject(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')\n```\n\n2. in `android/app/build.gradle` add:\n```\ndependencies {\n ...\n compile project(':react-native-linear-gradient')\n}\n```\n\n3. and finally, in `android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java` for react-native < 0.29,\n or `android/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java` for react-native >= 0.29 add:\n```java\n//...\nimport com.BV.LinearGradient.LinearGradientPackage; // <--- This!\n//...\n@Override\nprotected List getPackages() {\n return Arrays.asList(\n new MainReactPackage(),\n new LinearGradientPackage() // <---- and This!\n );\n}\n```\n\n## Examples\n\n### Simple\n\nThe following code will produce something like this:\n\n![Example code result](https://raw.githubusercontent.com/react-native-community/react-native-linear-gradient/master/images/example.png)\n\n```javascript\nimport LinearGradient from 'react-native-linear-gradient';\n\n// Within your render function\n\n \n Sign in with Facebook\n \n\n\n// Later on in your styles..\nvar styles = StyleSheet.create({\n linearGradient: {\n flex: 1,\n paddingLeft: 15,\n paddingRight: 15,\n borderRadius: 5\n },\n buttonText: {\n fontSize: 18,\n fontFamily: 'Gill Sans',\n textAlign: 'center',\n margin: 10,\n color: '#ffffff',\n backgroundColor: 'transparent',\n },\n});\n```\n\n### Additional props\nIn addition to regular `View` props, you can also provide additional props to customize your gradient look:\n\n#### colors\nAn array of at least two color values that represent gradient colors. Example: `['red', 'blue']` sets gradient from red to blue.\n \n#### start\nAn 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.\n \n#### end\nSame as start, but for the end of the gradient.\n \n#### locations\nAn 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%.\n\n```javascript\n\n \n Sign in with Facebook\n \n\n```\n\n![Example with extra props](https://raw.githubusercontent.com/react-native-community/react-native-linear-gradient/master/images/example-other-props.png)\n\n### Updating the values for fun\n\nCheck 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:\n\n![Example with extra props](https://raw.githubusercontent.com/react-native-community/react-native-linear-gradient/master/images/example-animated.gif)\n\n*This gif was created using [licecap](http://www.cockos.com/licecap/) - a great piece of free OSS*\n\n### An example app\nYou 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).\n\n### License\n\nLicense is MIT\n","maintainers":[{"name":"2hats","email":"piaojingtai@gmail.com"}],"time":{"modified":"2022-04-04T10:42:18.345Z","created":"2017-07-11T00:15:53.662Z","2.0.0":"2017-07-11T00:15:53.662Z","2.2.0":"2017-08-17T01:10:15.712Z"},"homepage":"https://github.com/brentvatne/react-native-linear-gradient#readme","repository":{"type":"git","url":"git+ssh://git@github.com/brentvatne/react-native-linear-gradient.git"},"contributors":[{"name":"Nick Hudkins","email":"nick@nickhudkins.com","url":"https://github.com/nickhudkins"},{"name":"Dmitry Gladkov","email":"dmitry.gladkov@gmail.com","url":"https://github.com/dgladkov"}],"author":{"name":"Brent Vatne","email":"brentvatne@gmail.com","url":"https://github.com/brentvatne"},"bugs":{"url":"https://github.com/brentvatne/react-native-linear-gradient/issues"},"license":"MIT","readmeFilename":"README.md"}