Features

• Drop-in replacement for View — just add cornerSmoothing
• Figma-style continuous corners (true squircles, not plain rounded rects)
• Native path on iOS and Android (Fabric / New Architecture)
• Works with standard styles: borderRadius, borders, shadows, overflow, and more
• Performance close to a normal View — no SVG

Requirements

• React Native 0.80+ (New Architecture / Fabric)
• Not compatible with Expo Go (needs a native build / prebuild)

Installation

npm install react-native-squircle-shape
# or
yarn add react-native-squircle-shape

iOS:

cd ios && pod install

Usage

import { SquircleShapeView } from 'react-native-squircle-shape';

<SquircleShapeView
  cornerSmoothing={0.6}
  style={{
    width: 120,
    height: 120,
    borderRadius: 28,
    backgroundColor: '#32a852',
    borderWidth: 2,
    borderColor: '#111',
    overflow: 'hidden',
  }}
>
  {/* children */}
</SquircleShapeView>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | cornerSmoothing | number | 0.6 | 0 = rounded rect, 1 = max continuous corners. Must be in [0, 1]. | | ...View props | | | Standard styles: borderRadius, backgroundColor, borders, shadows, overflow, etc. |

How it works

Subclasses the native RN View on iOS (RCTViewComponentView) and Android (ReactViewGroup), then replaces corner geometry with a Figma squircle path.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Path math inspired by figma-squircle and the View-subclass approach from react-native-fast-squircle.

Made with create-react-native-library.