A performant React-Native component for Squircle shapes with configurable options
npm install react-native-squircle
or
yarn add react-native-squircleFor expo:
expo install react-native-squircle
import Squircle from 'react-native-squircle';
// ...
const MyComponent = () => {
return (
<View style={styles.container}>
<Squircle
borderRadius={20}
backgroundColor="#B70404"
/>
</View>
);
};The Squircle component take these following props:
| Name | Type | Explanation | Required | Default Value |
|---|---|---|---|---|
borderRadius |
number |
The radius of the squircle. | ✅ | undefined |
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 |
Skia node that will be masked by the squircle. |
Counter value should decrease or increase. | ❌ | undefined |
style |
StyleProp |
Style for the container component. | ❌ | undefined |
Feel free to contribute by creating a PR.
MIT
Based on react-native-figma-squircle
Made with create-react-native-library Made with Skia