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

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
`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 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	`transperent`
`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	`transperent`
`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

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
        cornerSmoothing={100} // 0-100
        preserveSmoothing={true} // false matches figma, true has more rounding
        style={{
          width: 200,
          height: 100,
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "pink",
          borderRadius: 40,
          borderColor: "gray",
          borderWith: 4
        }}
      >
        <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

https://www.figma.com/blog/desperately-seeking-squircles/

edglz/expo-squircle-view