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)

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/