{"id":19355628,"url":"https://github.com/only-icesoul/react-native-clippath","last_synced_at":"2025-09-09T15:39:38.582Z","repository":{"id":57336089,"uuid":"393151161","full_name":"Only-IceSoul/react-native-clippath","owner":"Only-IceSoul","description":"ClipPath Android Web IOS - Hardware accelerated","archived":false,"fork":false,"pushed_at":"2021-11-28T14:54:37.000Z","size":241,"stargazers_count":2,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-05T17:39:13.686Z","etag":null,"topics":["accelerated","android","clip","clippath","exo","gpu","hardware","ios","native","path","react","react-native","web"],"latest_commit_sha":null,"homepage":"","language":"Java","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/Only-IceSoul.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":"2021-08-05T19:28:57.000Z","updated_at":"2021-11-28T14:54:40.000Z","dependencies_parsed_at":"2022-09-11T02:11:57.094Z","dependency_job_id":null,"html_url":"https://github.com/Only-IceSoul/react-native-clippath","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/Only-IceSoul/react-native-clippath","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Only-IceSoul%2Freact-native-clippath","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Only-IceSoul%2Freact-native-clippath/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Only-IceSoul%2Freact-native-clippath/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Only-IceSoul%2Freact-native-clippath/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Only-IceSoul","download_url":"https://codeload.github.com/Only-IceSoul/react-native-clippath/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Only-IceSoul%2Freact-native-clippath/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267253072,"owners_count":24060135,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["accelerated","android","clip","clippath","exo","gpu","hardware","ios","native","path","react","react-native","web"],"created_at":"2024-11-10T06:03:04.187Z","updated_at":"2025-07-26T22:33:56.460Z","avatar_url":"https://github.com/Only-IceSoul.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native ClipPath\n\nandroid: api 21+   \nios : 10.0+   \nweb: svg    \n  \n Example --\u003e [Demo](https://github.com/Only-IceSoul/canal/tree/master/react-native/LiquidSwipe/ClipPath)   \n\u003cimg src=\"./src/demo.jpg\" width=\"300\"\u003e\n\n## Getting started\n\n`$ npm install react-native-clippathview --save`  \n`$ react-native link react-native-clippathview`  \n  \n### Yarn\n\n`yarn add react-native-clippathview`\n\n## IOS\n\n**Add Swift**\n\n(If you are using expo sdk \u003e=42 you don't need to do this)\n\n/ios/name_project\n\nadd a .swift file\n\n# Usage\nClipPathViewH (Android Layer type Hardware)  \n```javascript\nimport {ClipPathView , ClipPathViewH } from 'react-native-clippathview'\n\n// TODO: What to do with the module?\n    \u003cClipPathView style={{backgroundColor:'green'}} \n\n       \n        d={myPath}\n        viewBox={myViewBox}\n        \n        \n    \n    \u003e\n  \n        \u003cView \u003e\n            \u003cText style={{color:'white'}}\u003ehello world\u003c/Text\u003e\n        \u003c/View\u003e\n        \n    \u003c/ClipPathView\u003e\n\n```\n\n## Props   \n\n| Name | description | type | default |\n| --- | --- | --- | --- |\n| svgKey | Each view must have a different key  | String | \"\" |\n| d | The shape, defined by a series of commands   | String | \"\" |\n| viewBox | defines the position and dimension, in user space    | Array[Number] (4) | undefined |\n| align | the aligment     | String | xMidYMid |\n| aspect | aspect ratio   | String | meet |\n| fillRule | determines what side of a path is inside a shape  | String | nonzero |\n| strokeWidth | defines the thickness of a line (mobile) | Number | 1 \n| strokeCap | line cap  (mobile) | string | 'butt' |\n| strokeJoin | line join  (mobile) | string | 'miter' |\n| strokeMiter | control the behavior of miter (mobile) | Number | 4 |\n| strokeStart | the start  (mobile) | Number | 0 |\n| strokeEnd | the end  (mobile) | Number | 1 |\n\n\u003cbr\u003e\n\n### Transform ###  \n\n\u003cbr\u003e\n\nThe percentageValue property refers to the fact that the Origin will be multiplied by the size of the view.  \n  \n| Name | type | default |\n| --- | --- | --- |\n| translateZ | Number (zIndex) | 0 |\n| transX | Number | 0 |\n| transY | Number | 0 |\n| transPercentageValue | Bool | false |\n| rot | Number | 0 |\n| rotOx | Number | 0 |\n| rotOy | Number | 0 |\n| rotPercentageValue | Bool | false |\n| sc | Number | 1 |\n| scX | Number | 1 |\n| scY | Number | 1 |\n| scO | Number | 0 |\n| scOx | Number | 0 |\n| scOy | Number | 0 |\n| scPercentageValue | Bool | false |\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonly-icesoul%2Freact-native-clippath","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonly-icesoul%2Freact-native-clippath","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonly-icesoul%2Freact-native-clippath/lists"}