React Native Component For Squircle Shapes

A React Native component to generate configurable squircle shapes in your apps.

How to use it:

1. Install and import the Squircle component.

# Yarn
$ yarn add react-native-squircle

# NPM
$ npm i react-native-squircle

import Squircle from 'react-native-squircle';

2. Create a basic squircle.

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Squircle />
    </View>
  );
};

3. Available props to customize the squircle.

/**
 * The radius of the squircle.
 *
 */
borderRadius: number;

/**
 * The background color of the squircle.
 *
 * @default #FFFFFF
 */
backgroundColor?: Color;

/**
 * The higher the value, the smoother the border.
 *
 * @default 1
 */
borderSmoothing?: number;

/**
 * React children.
 *
 */
children?: React.ReactNode | React.ReactNode[];

/**
 * Skia node that will be masked by the squircle.
 *
 */
maskChildren?: React.ReactNode | React.ReactNode[];

/**
 * Style for the container component.
 *
 */
style?: StyleProp;

Preview:

Download Details:

Author: samuel-rl

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/samuel-rl/react-native-squircle

License: MIT