{"id":15024980,"url":"https://github.com/malaa-tech/expo-squircle-view","last_synced_at":"2025-04-12T12:52:09.847Z","repository":{"id":217754473,"uuid":"744731361","full_name":"Malaa-tech/expo-squircle-view","owner":"Malaa-tech","description":"A native implementation for figma corner smoothing (Squircle Shape) for react native expo apps ⏹️","archived":false,"fork":false,"pushed_at":"2024-01-23T12:30:54.000Z","size":921,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-10T10:31:01.631Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Kotlin","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/Malaa-tech.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":"2024-01-17T22:24:33.000Z","updated_at":"2024-06-09T17:27:18.156Z","dependencies_parsed_at":null,"dependency_job_id":"8eca6261-e798-496e-b384-e5b52a5652ea","html_url":"https://github.com/Malaa-tech/expo-squircle-view","commit_stats":null,"previous_names":["malaa-tech/expo-squircle-view"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Fexpo-squircle-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Fexpo-squircle-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Fexpo-squircle-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malaa-tech%2Fexpo-squircle-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Malaa-tech","download_url":"https://codeload.github.com/Malaa-tech/expo-squircle-view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219847633,"owners_count":16556350,"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":[],"created_at":"2024-09-24T20:01:18.492Z","updated_at":"2024-11-07T13:03:42.528Z","avatar_url":"https://github.com/Malaa-tech.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# expo-squircle-view\n\nA native implementation for figma corner smoothing (Squircle Shape) for react native expo apps\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"830\" alt=\"Screenshot 2024-01-19 at 3 55 14 PM\" src=\"https://github.com/Malaa-tech/expo-squircle-view/assets/24798045/1c403119-11bc-49c0-9310-d8211ae6b020\"\u003e\n\u003c/p\u003e\n\n\n# Installation in managed Expo projects\n```\nnpm install expo-squircle-view \n```\nor\n```\nyarn add expo-squircle-view \n```\n\nThen prebuild your app\n\n# Installation in bare React Native projects\n\nFor bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.\nthen do \n```\nnpm install expo-squircle-view\n```\nthen do `npx pod-install`\n\n\n# Running Example\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"300\" src=\"https://github.com/Malaa-tech/expo-squircle-view/assets/24798045/4157ad73-cf18-45ea-b130-379bd33635f0\"\u003e\n\u003c/p\u003e\n\n\n### Props (All props are optional)\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eExplanation\u003c/th\u003e\n    \u003cth\u003eDefault Value\u003c/th\u003e\n  \u003c/td\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ecornerSmoothing\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eControls the amount of smoothing for the radius, \u003ccode\u003e0\u003c/code\u003e means there is no smoothing (will render like any other \u003ccode\u003eView\u003c/code\u003e, 100 is maximum amount\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e100\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003epreserveSmoothing\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eSetting this value to \u003ccode\u003efalse\u003c/code\u003e the produced squircle will match the figma shape exactly, setting this to \u003ccode\u003efalse\u003c/code\u003e will give you even more smoothing for higher \u003ccode\u003eborderRadius\u003c/code\u003e values\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eborderRadius\u003c/code\u003e or \u003ccode\u003estyle.borderRadius\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThe component's border radius, you can either set it directly or set it from style.borderRadius like any other view\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ebackgroundColor\u003c/code\u003e or \u003ccode\u003estyle.backgroundColor\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eColorValue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eThe background color of the component, you can either set it directly or set it from style.backgroundColor like any other view\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etransparent\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eborderColor\u003c/code\u003e or \u003ccode\u003estyle.borderColor\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eColorValue\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eSince borders has to match the squircle, you can either set it directly or set it from style.borderColor like any other view\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003etransparent\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eborderWidth\u003c/code\u003e or \u003ccode\u003estyle.borderWidth\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eSince borders has to match the squircle, you can either set it directly or set it from style.borderWith like any other view\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eignoreBorderWidthFromPadding\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eboolean\u003cViewStyle\u003e\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eWe introduced a breaking change in 0.6.0, if you want your styles to work the same as pre 0.6, enable this. when value is \u003ccode\u003efalse\u003c/code\u003e the style will match react-native View behavior, when \u003ccode\u003etrue\u003c/code\u003e it will ignore border width from affecting the padding of the content\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003estyle\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eStyleProp\u003cViewStyle\u003e\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eDefault style prop for the component, like any other view\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n### Basic Example \n\n```tsx | pure\nimport { Text, View } from \"react-native\";\nimport { SquircleView } from \"expo-squircle-view\";\n\nexport default function App() {\n  return (\n    \u003cView\n      style={{\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        flex: 1,\n      }}\n    \u003e\n      \u003cSquircleView\n        cornerSmoothing={100} // 0-100\n        preserveSmoothing={true} // false matches figma, true has more rounding\n        style={{\n          width: 200,\n          height: 100,\n          flexDirection: \"row\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          backgroundColor: \"pink\",\n          borderRadius: 40,\n          borderColor: \"gray\",\n          borderWith: 4\n        }}\n      \u003e\n        \u003cText\u003eSquircle\u003c/Text\u003e\n      \u003c/SquircleView\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n### Using as a Button\n\nimport SquircleButton instead of SquircleView, and use it the same way as a TouchableOpacity\n\n```tsx | pure\nimport { SquircleButton } from \"expo-squircle-view\"; \n\n...\n  \u003cSquircleButton\u003e\n  ...\n  \u003c/SquircleButton\u003e\n...\n\n```\n\n### Kudos\nLibraries that made this possible\n\nhttps://github.com/phamfoo/figma-squircle\n\nhttps://github.com/phamfoo/react-native-figma-squircle\n\nhttps://github.com/samuel-rl/react-native-squircle\n\n\nBlog from figma team explaining squircle\n\nhttps://www.figma.com/blog/desperately-seeking-squircles/\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalaa-tech%2Fexpo-squircle-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalaa-tech%2Fexpo-squircle-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalaa-tech%2Fexpo-squircle-view/lists"}