react-native-squircle

react-native-squircle

A performant React-Native component for Squircle shapes with configurable options

Installation

npm install react-native-squircle

or 

yarn add react-native-squircle

For expo:

npx expo install react-native-squircle

Example

Usage

import Squircle from 'react-native-squircle';

// ...

const MyComponent = () => {
  return (
    <View style={styles.container}>
        <Squircle 
            borderRadius={20} 
            backgroundColor="#B70404"
        />
    </View>
  );
};

Draw a Squircle inside a Squircle

import Squircle, { drawSquirclePath } from 'react-native-squircle';

const WIDTH = 200;
const HEIGHT = 180;
const BORDER = 6;
const BORDER_RADIUS = 30;
const SMOOTHING = 1;

// ...

const MyComponent = () => {

  // Compute your inside Squircle path
  const insidePath = useMemo(() => {
    return drawSquirclePath({
      borderSmoothing: SMOOTHING,
      borderRadius: BORDER_RADIUS - BORDER,
      width: WIDTH - BORDER * 2,
      height: HEIGHT - BORDER * 2,
    });
  }, []);

  return (
    <View style={styles.container}>
      <Squircle
        style={styleSheetSize(WIDTH, HEIGHT)}
        borderRadius={BORDER_RADIUS}
        maskChildren={<Fill color="#B70404" />}
        skiaChildren={
          <Group>
            <Offset x={BORDER} y={BORDER} />
            <Path path={insidePath} color={'#AFD3E2'} />
          </Group>
        }
      />
    </View>
  );
};

The Squircle component take these following props:

Name	Type	Explanation	Required	Default Value
borderRadius	number	The radius of the squircle.	❌	16
backgroundColor	string | Float32Array | number	The background color of the squircle.	❌	#FFFFFF
borderSmoothing	number	The higher the value, the smoother the border (between 0 and 1).	❌	1
children	React.ReactNode | React.ReactNode[]	React children.	❌	undefined
maskChildren	React.ReactNode | React.ReactNode[]	Skia node that will be masked by the squircle.	❌	undefined
skiaChildren	React.ReactNode | React.ReactNode[]	Skia node that will be draw inside the Skia Canvas.	❌	undefined
style	StyleProp	Style for the container component.	❌	undefined

Contributing

Feel free to contribute by creating a PR.

License

MIT

Based on react-native-figma-squircle

Made with create-react-native-library Made with Skia