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:

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