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

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