expo-squircle-view

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
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/