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 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 |
|---|---|---|---|
borderRadius |
number |
The component's border radius | 0 |
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 |
0 |
backgroundColor |
ColorValue |
The background color of the component | transperent |
borderColor |
ColorValue |
Since borders has to match the squircle, you won't be able to set it using the style prop, so use this prop instead |
transperent |
borderWidth |
number |
Since borders has to match the squircle, you won't be able to set it using the style prop, so use this prop instead |
0 |
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 |
style |
StyleProp |
Default style prop for the component, like any other view | undefined |
Basic Example
import { Text, View } from "react-native";
import { SquircleView } from "expo-squircle-view";
export default function App() {
return (
<View
style={{
alignItems: "center",
justifyContent: "center",
flex: 1,
}}
>
<SquircleView
backgroundColor={"pink"}
borderWidth={4}
borderColor={"gray"}
borderRadius={40}
cornerSmoothing={100} // 0-100
preserveSmoothing={true} // false matches figma, true has more rounding
style={{
width: 200,
height: 100,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Squircle</Text>
</SquircleView>
</View>
);
}Using as a Button
import SquircleButton instead of SquircleView, and use it the same way as a TouchableOpacity
import { SquircleButton } from "expo-squircle-view";
...
<SquircleButton>
...
</SquircleButton>
...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