{"id":25024917,"url":"https://github.com/fullstackstation/react-native-svg-animated-linear-gradient","last_synced_at":"2025-04-05T05:09:19.747Z","repository":{"id":21602596,"uuid":"93373444","full_name":"FullstackStation/react-native-svg-animated-linear-gradient","owner":"FullstackStation","description":"A wrap SVG component for animated linear gradient","archived":false,"fork":false,"pushed_at":"2022-04-14T09:08:54.000Z","size":4209,"stargazers_count":436,"open_issues_count":10,"forks_count":110,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-05T05:09:15.093Z","etag":null,"topics":["animated","expo","linear-gradient","react-native","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FullstackStation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-05T06:43:49.000Z","updated_at":"2025-01-15T03:51:59.000Z","dependencies_parsed_at":"2022-08-07T10:00:57.008Z","dependency_job_id":null,"html_url":"https://github.com/FullstackStation/react-native-svg-animated-linear-gradient","commit_stats":null,"previous_names":["virusvn/react-native-svg-animated-linear-gradient"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FullstackStation%2Freact-native-svg-animated-linear-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FullstackStation%2Freact-native-svg-animated-linear-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FullstackStation%2Freact-native-svg-animated-linear-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FullstackStation%2Freact-native-svg-animated-linear-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FullstackStation","download_url":"https://codeload.github.com/FullstackStation/react-native-svg-animated-linear-gradient/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289429,"owners_count":20914464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","expo","linear-gradient","react-native","svg"],"created_at":"2025-02-05T16:33:30.180Z","updated_at":"2025-04-05T05:09:19.721Z","avatar_url":"https://github.com/FullstackStation.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## SVG Animated Linear Gradient [iOS + Android]\n\nThis component make Animated Linear Gradient for all SVG components as child props. You can use this component as loading component like Facebook or Instagram, used for any group of svg.\n\nThis component is using [expo](https://expo.io), if you don't want to use expo, feel free to fork this repo and remove expo, and use [react-native-svg](https://github.com/react-native-community/react-native-svg) instead, or use the forked repo [react-native-content-loader](https://github.com/aschenkel/react-native-content-loader)\n\n## Demo\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/virusvn/react-native-svg-animated-linear-gradient/master/images/demo-svg-animated-linear-gradient.gif\" width=\"300\"\u003e\u003c/td\u003e\u003ctd\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/virusvn/react-native-svg-animated-linear-gradient/master/images/demo-svg-animated-linear-gradient-angle.gif\" width=\"300\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Usage\n`npm i react-native-svg-animated-linear-gradient --save`\n\n`npm i react-native-svg`\n\n`react-native link react-native-svg`\n\nInside your component:\n```js\nimport SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient'\nimport Svg, {Circle, Rect, .... } from 'react-native-svg'\n```\n### Examples\n\n#### Instagram style\n```jsx\n\u003cSvgAnimatedLinearGradient height={300}\u003e\n    \u003cCircle cx=\"30\" cy=\"30\" r=\"30\"/\u003e\n    \u003cRect x=\"75\" y=\"13\" rx=\"4\" ry=\"4\" width=\"100\" height=\"13\"/\u003e\n    \u003cRect x=\"75\" y=\"37\" rx=\"4\" ry=\"4\" width=\"50\" height=\"8\"/\u003e\n    \u003cRect x=\"0\" y=\"70\" rx=\"5\" ry=\"5\" width=\"400\" height=\"200\"/\u003e\n\u003c/SvgAnimatedLinearGradient\u003e\n```\n\n#### Facebook style\n\n```jsx\n\u003cSvgAnimatedLinearGradient\n            primaryColor=\"#e8f7ff\"\n            secondaryColor=\"#4dadf7\"\n    height={140}\u003e\n    \u003cRect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width=\"70\" height=\"70\"/\u003e\n    \u003cRect x=\"80\" y=\"17\" rx=\"4\" ry=\"4\" width=\"300\" height=\"13\"/\u003e\n    \u003cRect x=\"80\" y=\"40\" rx=\"3\" ry=\"3\" width=\"250\" height=\"10\"/\u003e\n    \u003cRect x=\"0\" y=\"80\" rx=\"3\" ry=\"3\" width=\"350\" height=\"10\"/\u003e\n    \u003cRect x=\"0\" y=\"100\" rx=\"3\" ry=\"3\" width=\"200\" height=\"10\"/\u003e\n    \u003cRect x=\"0\" y=\"120\" rx=\"3\" ry=\"3\" width=\"360\" height=\"10\"/\u003e\n\n\u003c/SvgAnimatedLinearGradient\u003e\n```\n#### Code style\n\n```jsx\n\u003cSvgAnimatedLinearGradient\n            primaryColor=\"#fff0f6\"\n            secondaryColor=\"#f783ac\"\n            height={80}\u003e\n    \u003cRect x=\"0\" y=\"0\" rx=\"3\" ry=\"3\" width=\"70\" height=\"10\"/\u003e\n    \u003cRect x=\"80\" y=\"0\" rx=\"3\" ry=\"3\" width=\"100\" height=\"10\"/\u003e\n    \u003cRect x=\"190\" y=\"0\" rx=\"3\" ry=\"3\" width=\"10\" height=\"10\"/\u003e\n    \u003cRect x=\"15\" y=\"20\" rx=\"3\" ry=\"3\" width=\"130\" height=\"10\"/\u003e\n    \u003cRect x=\"155\" y=\"20\" rx=\"3\" ry=\"3\" width=\"130\" height=\"10\"/\u003e\n    \u003cRect x=\"15\" y=\"40\" rx=\"3\" ry=\"3\" width=\"90\" height=\"10\"/\u003e\n    \u003cRect x=\"115\" y=\"40\" rx=\"3\" ry=\"3\" width=\"60\" height=\"10\"/\u003e\n    \u003cRect x=\"185\" y=\"40\" rx=\"3\" ry=\"3\" width=\"60\" height=\"10\"/\u003e\n    \u003cSvg.Rect x=\"0\" y=\"60\" rx=\"3\" ry=\"3\" width=\"30\" height=\"10\"/\u003e\n\u003c/SvgAnimatedLinearGradient\u003e\n```\n### Props\n\n| Prop           | Type   | Default   | Description                                           |\n| -------------- | ------ | --------- | ----------------------------------------------------- |\n| primaryColor   | String | '#eeeeee' | Primary color, also background color                  |\n| secondaryColor | String | '#dddddd' | Secondary color                                       |\n| duration       | Number | 2000      | Animation duration in milliseconds                    |\n| width          | Number | 300       | Width of SVG                                          |\n| height         | Number | 200       | Height of SVG                                         |\n| x1             | String | '0'       | x of point star gradient, accept Number or Percentage |\n| y1             | String | '0'       | y of point star gradient, accept Number or Percentage |\n| x2             | String | '100%'    | x of point end gradient, accept Number or Percentage  |\n| y2             | String | '0'       | y of point end gradient, accept Number or Percentage  |\n| offset         | Number | 1         | Gradient offset value of animation                    |\n\n## TODO\n- Write test\n\n## My blog about React/React Native \n- (Vietnamese only) [Fullstack Station](https://fullstackstation.com/category/lap-trinh/javascript/react/)\n\n## Thankful\n\n- [React Native Svg](https://github.com/react-native-community/react-native-svg)\n- [Vova Bilonenko](https://github.com/delfrrr) with [his gist](https://gist.github.com/delfrrr/0ef8871c6c4630b406e73fb66c091cf0)\n- [React Content Loader](https://github.com/danilowoz/react-content-loader)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackstation%2Freact-native-svg-animated-linear-gradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstackstation%2Freact-native-svg-animated-linear-gradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstackstation%2Freact-native-svg-animated-linear-gradient/lists"}