React Native Component For Squircle Shapes

Description:

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:

React Native Component For Squircle Shapes

Add Comment