{"id":14981566,"url":"https://github.com/phamfoo/react-native-figma-squircle","last_synced_at":"2025-05-15T09:07:16.701Z","repository":{"id":37778221,"uuid":"376035017","full_name":"phamfoo/react-native-figma-squircle","owner":"phamfoo","description":"Figma-flavored squircles for React Native","archived":false,"fork":false,"pushed_at":"2025-03-04T08:28:55.000Z","size":772,"stargazers_count":341,"open_issues_count":1,"forks_count":16,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-11T23:36:26.096Z","etag":null,"topics":["expo","figma","react","react-native","squircle"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/phamfoo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-11T13:31:17.000Z","updated_at":"2025-04-26T21:44:28.000Z","dependencies_parsed_at":"2024-06-19T05:26:58.628Z","dependency_job_id":"27d445a5-bec1-4e25-aaaa-48161e76528b","html_url":"https://github.com/phamfoo/react-native-figma-squircle","commit_stats":{"total_commits":35,"total_committers":2,"mean_commits":17.5,"dds":0.05714285714285716,"last_synced_commit":"82784f5eb0f57dcade74d445883139df408392d6"},"previous_names":["tienphaw/react-native-figma-squircle"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-figma-squircle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-figma-squircle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-figma-squircle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Freact-native-figma-squircle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phamfoo","download_url":"https://codeload.github.com/phamfoo/react-native-figma-squircle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310515,"owners_count":22049469,"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":["expo","figma","react","react-native","squircle"],"created_at":"2024-09-24T14:03:51.363Z","updated_at":"2025-05-15T09:07:11.687Z","avatar_url":"https://github.com/phamfoo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Figma Squircle\n\n[![Stable Release](https://img.shields.io/npm/v/react-native-figma-squircle)](https://npm.im/react-native-figma-squircle) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)\n\n\u003e Figma-flavored squircles for React Native\n\n## Disclaimer\n\n\u003e This library is not an official product from the Figma team and does not guarantee to produce the same results as you would get in Figma.\n\n## What is this?\n\nFigma has a great feature called [corner smoothing](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing), allowing you to create rounded shapes with a seamless continuous curve (squircles).\n\n![](squircle.jpg)\n\nThis library helps you bring those squircles to your React Native apps.\n\n## Before you install\n\nThis library is a very light abstraction on top of [figma-squircle](https://github.com/tienphaw/figma-squircle). We also depend on [react-native-svg](https://github.com/react-native-svg/react-native-svg) to draw the SVG background. In many cases, it's a better idea to just use [figma-squircle](https://github.com/tienphaw/figma-squircle) directly:\n\n- You can use [react-native-skia](https://shopify.github.io/react-native-skia/docs/shapes/path) instead of `react-native-svg`.\n- More control and flexibility. For example, clipping can be done very easily using [Clip Path](https://shopify.github.io/react-native-skia/docs/group/#clip-path).\n\n## Installation\n\nInstall [react-native-svg](https://github.com/software-mansion/react-native-svg)\n\nInstall this library:\n\n```sh\nnpm install react-native-figma-squircle\n```\n\nMake sure [the New Architecture](https://reactnative.dev/architecture/landing-page) is enabled.\n## Usage\n\nA `SquircleView` can be used just like a normal `View`, except the background is rendered separately from the view background. So to change how it looks, you'll have to use the `squircleParams` prop instead of the `style` prop.\n\n```jsx\nimport { SquircleView } from 'react-native-figma-squircle'\n\nfunction PinkSquircle() {\n  return (\n    \u003cSquircleView\n      style={{ width: 200, height: 200 }}\n      squircleParams={{\n        cornerSmoothing: 0.7,\n        cornerRadius: 30,\n        fillColor: 'pink',\n      }}\n    /\u003e\n  )\n}\n```\n\n## Props\n\nInherits [View Props](https://facebook.github.io/react-native/docs/view#props)\n\n### squircleParams\n\n#### cornerSmoothing\n\n\u003e `number` | **Required**\n\nGoes from 0 to 1, controls how smooth the corners should be.\n\n#### cornerRadius\n\n\u003e `number` | defaults to `0`\n\n#### topLeftCornerRadius\n\n\u003e `number`\n\n#### topRightCornerRadius\n\n\u003e `number`\n\n#### bottomRightCornerRadius\n\n\u003e `number`\n\n#### bottomLeftCornerRadius\n\n\u003e `number`\n\n#### fillColor\n\n\u003e `Color` | defaults to `#000`\n\nSimilar to `backgroundColor` in the `style` prop.\n\n#### strokeColor\n\n\u003e `Color` | defaults to `#000`\n\nSimilar to `borderColor` in the `style` prop.\n\n#### strokeWidth\n\n\u003e `number` | defaults to `0`\n\nSimilar to `borderWidth` in the `style` prop.\n\n## Thanks\n\n- Figma team for publishing [this article](https://www.figma.com/blog/desperately-seeking-squircles/) and [MartinRGB](https://github.com/MartinRGB) for [figuring out all the math](https://github.com/MartinRGB/Figma_Squircles_Approximation) behind it.\n- [George Francis](https://github.com/georgedoescode) for creating [Squircley](https://squircley.app/), which was my introduction to squircles.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphamfoo%2Freact-native-figma-squircle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphamfoo%2Freact-native-figma-squircle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphamfoo%2Freact-native-figma-squircle/lists"}