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