React-native-squircle-layout NPM

react-native-squircle-layout

A React Native component that renders a squircle shape. This component allows you to create a squircle shape with a color of your choice and use it as a background for other components.

Installation

npm install react-native-squircle-layout

yarn add react-native-squircle-layout

Usage

Import the SquircleView component and use it to wrap your components.

import { SquircleView } from 'react-native-squircle-layout';

function App() {
  return (
    <SquircleView
      cornerRadius={20}
      cornerSmoothing={1}
      color="#3498db"
      width={200}
      height={200}
      style={{ justifyContent: 'center', alignItems: 'center' }}
    >
      {/* Your content here */}
    </SquircleView>
  );
}

export default App;

Note: If width and height are not provided, the squircle will dynamically size itself based on its children.
Note: You can also set width and height as the color to have a solid squircle shape without children.