Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phamfoo/react-native-figma-squircle
Figma-flavored squircles for React Native
https://github.com/phamfoo/react-native-figma-squircle
expo figma react react-native squircle
Last synced: about 1 month ago
JSON representation
Figma-flavored squircles for React Native
- Host: GitHub
- URL: https://github.com/phamfoo/react-native-figma-squircle
- Owner: phamfoo
- License: mit
- Created: 2021-06-11T13:31:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-05T14:20:32.000Z (about 1 year ago)
- Last Synced: 2024-10-06T17:09:32.747Z (about 1 month ago)
- Topics: expo, figma, react, react-native, squircle
- Language: TypeScript
- Homepage:
- Size: 650 KB
- Stars: 318
- Watchers: 3
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Figma Squircle
[](https://npm.im/react-native-figma-squircle) [](./LICENSE)
> Figma-flavored squircles for React Native
## Disclaimer
> 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.
## What is this?
Figma 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).
This library helps you bring those squircles to your React Native apps.
## Before you install
This 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:
- You can use [react-native-skia](https://shopify.github.io/react-native-skia/docs/shapes/path) instead of `react-native-svg`.
- 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).
## Installation
Install [react-native-svg](https://github.com/react-native-svg/react-native-svg)
Then install this library:
```sh
yarn add react-native-figma-squircle
```
or
```sh
npm install react-native-figma-squircle
```
## Usage
A `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.
```jsx
import { SquircleView } from 'react-native-figma-squircle'
function PinkSquircle() {
return (
)
}
```
## Props
Inherits [View Props](https://facebook.github.io/react-native/docs/view#props)
### squircleParams
#### cornerSmoothing
> `number` | **Required**
Goes from 0 to 1, controls how smooth the corners should be.
#### cornerRadius
> `number` | defaults to `0`
#### topLeftCornerRadius
> `number`
#### topRightCornerRadius
> `number`
#### bottomRightCornerRadius
> `number`
#### bottomLeftCornerRadius
> `number`
#### fillColor
> `Color` | defaults to `#000`
Similar to `backgroundColor` in the `style` prop.
#### strokeColor
> `Color` | defaults to `#000`
Similar to `borderColor` in the `style` prop.
#### strokeWidth
> `number` | defaults to `0`
Similar to `borderWidth` in the `style` prop.
## Thanks
- 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.
- [George Francis](https://github.com/georgedoescode) for creating [Squircley](https://squircley.app/), which was my introduction to squircles.