https://github.com/malaa-tech/expo-squircle-view
A native implementation for figma corner smoothing (Squircle Shape) for react native expo apps ⏹️
https://github.com/malaa-tech/expo-squircle-view
Last synced: about 2 months ago
JSON representation
A native implementation for figma corner smoothing (Squircle Shape) for react native expo apps ⏹️
- Host: GitHub
- URL: https://github.com/malaa-tech/expo-squircle-view
- Owner: Malaa-tech
- License: mit
- Created: 2024-01-17T22:24:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-23T12:30:54.000Z (over 1 year ago)
- Last Synced: 2024-05-10T10:31:01.631Z (about 1 year ago)
- Language: Kotlin
- Homepage:
- Size: 899 KB
- Stars: 17
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# expo-squircle-view
A native implementation for figma corner smoothing (Squircle Shape) for react native expo apps
# Installation in managed Expo projects
```
npm install expo-squircle-view
```
or
```
yarn add expo-squircle-view
```
Then prebuild your app
# Installation in bare React Native projects
For 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.
then do
```
npm install expo-squircle-view
```
then do `npx pod-install`
# Running Example
### Props (All props are optional)
Name
Type
Explanation
Default Value
cornerSmoothing
number
Controls the amount of smoothing for the radius, 0 means there is no smoothing (will render like any other View, 100 is maximum amount
100
preserveSmoothing
boolean
Setting this value to false the produced squircle will match the figma shape exactly, setting this to false will give you even more smoothing for higher borderRadius values
false
borderRadius or style.borderRadius
number
The component's border radius, you can either set it directly or set it from style.borderRadius like any other view
0
backgroundColor or style.backgroundColor
ColorValue
The background color of the component, you can either set it directly or set it from style.backgroundColor like any other view
transparent
borderColor or style.borderColor
ColorValue
Since borders has to match the squircle, you can either set it directly or set it from style.borderColor like any other view
transparent
borderWidth or style.borderWidth
number
Since borders has to match the squircle, you can either set it directly or set it from style.borderWith like any other view
0
ignoreBorderWidthFromPadding
boolean
We 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 false the style will match react-native View behavior, when true it will ignore border width from affecting the padding of the content
false
style
StyleProp
Default style prop for the component, like any other view
undefined
### Basic Example
```tsx | pure
import { Text, View } from "react-native";
import { SquircleView } from "expo-squircle-view";
export default function App() {
return (
Squircle
);
}
```
### Using as a Button
import SquircleButton instead of SquircleView, and use it the same way as a TouchableOpacity
```tsx | pure
import { SquircleButton } from "expo-squircle-view";
...
...
...
```
### Kudos
Libraries that made this possible
https://github.com/phamfoo/figma-squircle
https://github.com/phamfoo/react-native-figma-squircle
https://github.com/samuel-rl/react-native-squircle
Blog from figma team explaining squircle
https://www.figma.com/blog/desperately-seeking-squircles/