{"id":13486227,"url":"https://github.com/catalinmiron/react-native-css-gradient","last_synced_at":"2025-04-06T13:11:56.685Z","repository":{"id":56796986,"uuid":"153261920","full_name":"catalinmiron/react-native-css-gradient","owner":"catalinmiron","description":"React Native css gradients - react-native-linear-gradient with css gradient support","archived":false,"fork":false,"pushed_at":"2023-02-27T22:42:38.000Z","size":4846,"stargazers_count":165,"open_issues_count":8,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-05-02T06:19:03.215Z","etag":null,"topics":["css","css-gradient","expo","gradient","gradients","linear-gradient","native","react","react-native","repeating-gradients"],"latest_commit_sha":null,"homepage":"https://snack.expo.io/@catalinmiron/react-native-css-gradient","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/catalinmiron.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"catalinmiron","patreon":"catalinmiron","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"http://buymeacoffee.com/catalinmiron"}},"created_at":"2018-10-16T09:49:21.000Z","updated_at":"2024-04-22T07:37:55.000Z","dependencies_parsed_at":"2024-01-29T07:28:15.675Z","dependency_job_id":"57beae3a-b333-4757-9d79-6cd504b92c67","html_url":"https://github.com/catalinmiron/react-native-css-gradient","commit_stats":{"total_commits":15,"total_committers":4,"mean_commits":3.75,"dds":"0.19999999999999996","last_synced_commit":"0e401bdcf48d6cef25efbb26b38295a4c4b6caa7"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catalinmiron%2Freact-native-css-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catalinmiron%2Freact-native-css-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catalinmiron%2Freact-native-css-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catalinmiron%2Freact-native-css-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/catalinmiron","download_url":"https://codeload.github.com/catalinmiron/react-native-css-gradient/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485290,"owners_count":20946398,"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":["css","css-gradient","expo","gradient","gradients","linear-gradient","native","react","react-native","repeating-gradients"],"created_at":"2024-07-31T18:00:42.025Z","updated_at":"2025-04-06T13:11:56.665Z","avatar_url":"https://github.com/catalinmiron.png","language":"JavaScript","readme":"# CSS Gradient for LinearGradient\n\nCSS background image for React-Native using `LinearGradient` from [Expo](https://expo.io).\nSupported backgrounds:\n- [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)\n- [repeating-linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient)\n\n\n![image](https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/gif.gif)\n\u003cbr/\u003e\n\u003cimg src=\"https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad1.png\" width=\"400\"\u003e\n\u003cbr/\u003e\n\u003cimg src=\"https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad2.png\" width=\"400\"\u003e\n\u003cbr/\u003e\n\u003cimg src=\"https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad3.png\" width=\"400\"\u003e\n\u003cbr/\u003e\n\u003cimg src=\"https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad4.png\" width=\"400\"\u003e\n\u003cbr/\u003e\n\u003cimg src=\"https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad5.png\" width=\"400\"\u003e\n\u003cbr/\u003e\n\u003cimg src=\"https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/grad6.png\" width=\"400\"\u003e\n\n\n### Usage\n\n```js\nimport Gradient from 'react-native-css-gradient';\n\nrender() {\n    const gradient = `linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%),\n                      repeating-linear-gradient(-115deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 40px),\n                      repeating-linear-gradient(115deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 40px)`;\n\n    return \u003cGradient gradient={gradient} style={yourStyle}\u003e\n}\n```\n\nTODO: Add fallback to `react-native-linear-gradient` package in case when Expo is missing.\n\n### Props\n\n|Prop|Details|\n|---|---|\n|gradient|CSS Gradient (linear and repeating) are working for the moment|\n|style|default styles (**Note, if you're going to use repeating gradient you have to specify the width and height**)|\n|children|-|\n\n\n### About\n\nIf you have questions please don't hesitate to contact me on [Twitter](http://twitter.com/mironcatalin).\n","funding_links":["https://github.com/sponsors/catalinmiron","https://patreon.com/catalinmiron","http://buymeacoffee.com/catalinmiron"],"categories":["Libraries","Others"],"sub_categories":["Releases"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatalinmiron%2Freact-native-css-gradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatalinmiron%2Freact-native-css-gradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatalinmiron%2Freact-native-css-gradient/lists"}