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

or

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.

Props

Prop	Type	Description	Required	Default
cornerRadius	number	Specifies the corner radius of the squircle shape.	Yes	0
cornerSmoothing	number	Adjusts the smoothness of the corners.	No	0.6
color	string	Sets the background color of the squircle shape.	No	transparent
width	number	Sets the width of the squircle shape.	No	undefined
height	number	Sets the height of the squircle shape.	No	undefined

Other View Props

All other View props from React Native are supported.

Example

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library