react-native-fast-squircle draws squircles without an SVG tree

SquircleView is a View with reshaped corners

Teams that follow a design system often want the continuous corner curve that iOS system surfaces use, but React Native only exposes rounded corners through borderRadius. The obvious workaround is to draw the shape as vector artwork, which adds a dependency, a tree of nodes and a rendering path that is heavier than the rectangle it replaces. react-native-fast-squircle takes the opposite route. It hooks into the react-native <View /> component native renderer for iOS and Android and changes the shape that gets drawn, so the component you use is a normal View carrying a different geometry. The README makes a headline claim of 10x faster than SVG based alternatives and says you can expect close performance to a normal View. The audience is narrow and clear: app developers who already have native build pipelines and want the shape without a second rendering system.

What lives in the repository beside the component

The layout explains the approach. At the top level there is FastSquircle.podspec alongside android/ and ios/ directories, and package.json points the compiled entry at ./lib/module/index.js with type declarations under ./lib/typescript/src/index.d.ts. The published file list includes src, lib, android, ios, cpp, scripts and the podspec, while excluding build artefacts such as ios/build, android/build and android/gradle. The project was made with create-react-native-library, and package.json sets prepare to bob build, so the JavaScript you install is generated from src. Two example workspaces are present, example/ and example-expo58/, alongside scripts/ for release automation and a release script that uses release-it. Nothing here describes a JavaScript shape algorithm, so the geometry is delivered through native code, which is the reason installation has more steps than a plain JavaScript package.

Installing the package with npm, yarn or bun

The package is published to npm under the name react-native-fast-squircle, and the README gives three equivalent install commands. Pick the one that matches the package manager your project already uses:

npm install react-native-fast-squircle

The same dependency can be added with yarn or with bun, and the package name is identical in both cases:

yarn add react-native-fast-squircle
bun add react-native-fast-squircle

After the dependency lands, the remaining work is native rather than JavaScript.

Expo prebuild and the iOS pod install step

This is the step most likely to surprise you. The package includes native code, so it will not work with Expo Go, where the JavaScript bundle runs against Expo's own native runtime. The README points Expo users at a prebuild, which generates the ios and android projects in the working tree so the native module can be compiled into the binary:

expo prebuild

For iOS the README then says you may need to run pod install so the CocoaPods dependency graph picks up the podspec and the compiled native sources:

cd ios && pod install

The wording on the pod step is deliberately loose, while the note that follows it is unambiguous: no additional setup is required for Android. The asymmetry is easy to miss if you develop on Android first, and it shows up later as a build failure on the iOS side rather than as a runtime error.

Your first SquircleView and the cornerSmoothing range

The component drops into an existing screen with the usual props plus one new one. The import path is the package root, and the styling props are plain React Native style objects:

import React from 'react';
import SquircleView from 'react-native-fast-squircle';

export default function App() {
  return (
    <SquircleView
      style={{
        width: 200,
        height: 200,
        backgroundColor: 'tomato',
        borderRadius: 30,
      }}
      cornerSmoothing={0.6}
    />
  );
}

The cornerSmoothing prop ranges between 0 and 1. At 0 the shape matches a normal rounded rectangle, at 1 the corners reach maximum smoothness, and the default value is 0.6. Border radius and smoothing are separate controls, so a design can specify a 30 pixel radius and choose how continuous that radius is.

Borders, shadows and clipping keep working because it is still a View

Because the native renderer only changes the shape, the standard styling surface is untouched: borders, outlines, shadows and overflow: "hidden" are all listed as supported, and the component is described as a drop-in replacement compatible with all standard React Native View props. That last point is the practical advantage over a vector based approach, where a squircle drawn as artwork sits inside a container and the container's own border and shadow behaviour is not the shape's behaviour. Overflow hidden matters most for media: an image inside a squircle needs the corner curve applied to the image itself, not to a rectangular wrapper with rounded corners painted over it. With the native shape, clipping follows the outline.

How this differs from drawing the shape as an SVG path

The usual alternative is a component that renders the squircle as an SVG path, either with a dedicated library or with a hand written path string. The difference is where the curve is computed. A vector approach describes the outline as data and asks a drawing layer to paint it, so each shape carries geometry that travels through the tree and a second rendering system sits between you and the pixels. This package keeps the outline inside the native view layer, which is why the README can claim no SVGs are involved and close performance to a normal View. The trade-off runs the other way: a vector path can express shapes a rounded rectangle cannot, while this component can only change how a rectangle's corners curve. If a design calls for an actual squircle, that difference is decisive; if it calls for a blob, a chevron or a custom badge outline, this package cannot help.

Limits, release history and the MIT licence

Three constraints are worth checking before you adopt it. Native code means Expo Go is out and a prebuild plus a native rebuild is mandatory, so the library does not fit a workflow where the app is distributed only through managed Expo channels. The documentation also does not state a minimum iOS or Android version, and no fallback path is described for devices where the native shape cannot be produced. The README does not document rollback either, so treat any version bump as a change to the visual output of your app and check the rendered result on both platforms. On maintenance, the repository is not archived and the last push was on 2026-10-16, the same day as release v1.1.6, with earlier listed releases v1.1.5 on 2026-06-11 and v1.1.2 on 2026-03-28. The licence is MIT, held by fbeccaceci, and it requires the copyright notice and permission notice to travel with copies of the software, which in practice means keeping the LICENSE file in anything that redistributes this code.

Editorial conclusion

Adopt react-native-fast-squircle when a design calls for continuous corners in an app that already builds native iOS and Android binaries, and you want the squircle to behave like any other View under borders, shadows and clipping. Skip it if the project depends on Expo Go, if you need arbitrary vector artwork rather than a rounded rectangle, or if you cannot absorb a native dependency that requires a pod install and a rebuild. Before committing, render your real corner radii, check the shape on both platforms at the sizes you ship, and read the current cornerSmoothing prop in the installed version rather than trusting a description from an older article.

Frequently asked questions

Official sources

1. fbeccaceci/react-native-fast-squircle on GitHub
2. Issues
3. License: MIT
4. README
5. Releases