react-native-fast-squircle

Before running the application, you must start Metro, the JavaScript build tool for React Native. Run this command from the root of your project.

# Using npm
npm start

# OR using Yarn
yarn start

To run the application on iOS, you must first ensure CocoaPods dependencies are installed.

1. Install CocoaPods (if not already installed via Ruby bundler):

   bundle install

2. Install native dependencies (required after cloning or updating native deps):

   bundle exec pod install

3. Run the app:

   # Using npm
   npm run ios
   
   # OR using Yarn
   yarn ios

After installation, ensure your iOS dependencies are installed by running pod install in the ios directory.

cd ios && pod install

If you need to perform a full reload to reset the app state, use the following platform-specific methods:

• Android: Press the <kbd>R</kbd> key twice, or open the Dev Menu via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS) and select "Reload".
• iOS: Press <kbd>R</kbd> in the iOS Simulator.

With the Metro server running in a separate terminal, use the following command to build and launch the application on an Android emulator or connected device.

# Using npm
npm run android

# OR using Yarn
yarn android

Install the package using your preferred package manager:

npm install react-native-fast-squircle

yarn add react-native-fast-squircle

bun add react-native-fast-squircle

The SquircleView component is a drop-in replacement for the standard React Native <View />. It hooks into the native renderer to provide squircle shapes with performance close to a normal View. It supports all standard View props, including borders, outlines, shadows, and overflow: "hidden".

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 project uses react-native-monorepo-config to manage Metro configuration within a monorepo structure. The withMetroConfig wrapper is used to extend the default React Native Metro configuration by providing the correct root and dirname context, ensuring that dependencies and assets are resolved correctly relative to the monorepo root.

const path = require('path');
const { getDefaultConfig } = require('@react-native/metro-config');
const { withMetroConfig } = require('react-native-monorepo-config');

const root = path.resolve(__dirname, '..');

module.exports = withMetroConfig(getDefaultConfig(__dirname), {
  root,
  dirname: __dirname,
});

The FastSquircleView component is a high-performance squircle shape renderer for React Native. It renders a view with smoothed corners based on a cornerSmoothing value. It accepts all standard ViewProps and can be used with a ref to access the underlying native view.

import FastSquircleView from 'react-native-fast-squircle';

// Basic usage
<FastSquircleView 
  style={{ width: 100, height: 100, backgroundColor: 'red' }} 
  cornerSmoothing={0.6} 
/>

The cornerSmoothing prop controls the curvature of the corners. It accepts a value between 0 and 1:

• 0: A normal rounded rectangle (standard borderRadius behavior).
• 1: Maximum corner smoothness.
• Default value: 0.6.

<SquircleView
  style={{ width: 200, height: 200 }}
  cornerSmoothing={0.6}
/>

The cornerSmoothing prop controls the intensity of the squircle smoothing effect.

• Type: number (optional)
• Default: 0.6
• Constraints: Must be a value between 0 and 1, inclusive.
• Error Behavior: Throws an error if the value is outside the [0, 1] range.

Values closer to 0 result in standard rounded corners, while values closer to 1 provide maximum squircle smoothing.

interface FastSquircleViewProps extends ViewProps {
  cornerSmoothing?: number;
}