react-native-fast-squircle - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #llm #rust #nodejs #windows #awesome #cli #kubernetes #vue #pytorch #mcp #open-source

react-native-fast-squircle

(★ 519)

A performant component that renders Squircles in React Native

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.yml
  - config.yml
- - ci.yml
- FUNDING.yml
- - yarn-3.6.1.cjs
- build.gradle
- consumer-rules.pro
- gradle.properties
- readme-hero-image.png
- squircle-example.png
- - config
- - build.gradle
  - gradle.properties
  - gradlew
  - gradlew.bat
  - settings.gradle
- - .xcode.env
  - Podfile
  - Podfile.lock
- .watchmanconfig
- app.json
- App.tsx
- babel.config.js
- Gemfile
- Gemfile.lock
- index.js
- jest.config.js
- metro.config.js
- package-lock.json
- package.json
- react-native.config.js
- README.md
- FastSquircle-Bridging-Header.h
- FastSquircleBorderDrawing.h
- FastSquircleBorderDrawing.m
- FastSquircleBoxShadow_79orMore.h
- FastSquircleBoxShadow_79orMore.mm
- FastSquircleBoxShadow_81orMore.h
- FastSquircleBoxShadow_81orMore.mm
- FastSquircleView.h
- FastSquircleView.mm
- SquirclePathGenerator.swift
- SwiftImport.h
- cocoapods_utils.rb
- - index.test.tsx
- FastSquircleViewNativeComponent.ts
- index.tsx
.editorconfig
.gitattributes
.gitignore
.nvmrc
.watchmanconfig
.yarnrc.yml
babel.config.js
CODE_OF_CONDUCT.md
CONTRIBUTING.md
eslint.config.mjs
FastSquircle.podspec
LICENSE
package.json
README.md
tsconfig.build.json
tsconfig.json
turbo.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/fbeccaceci/react-native-fast-squircle

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-native-fast-squircle

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Gradle (Java/Kotlin)

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
JDK (Java) Java/Kotlin 프로젝트를 빌드/실행하려면 필요합니다.
Gradle 레포에 포함된 gradlew(Gradle Wrapper)를 쓰면 Gradle을 따로 설치할 필요가 없습니다.

cd android

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

./gradlew build

Gradle로 빌드를 진행합니다.

✅ BUILD SUCCESSFUL 메시지가 뜨면 성공입니다. build/ 폴더에 결과물이 생성됩니다.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install react-native-fast-squircle

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn add react-native-fast-squircle

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Alt text](https://raw.githubusercontent.com/fbeccaceci/react-native-fast-squircle/main/assets/readme-hero-image.png)

# Squircle shape renderer for React Native 10x faster than SVG based alternatives

This library hooks into the react-native `<View />` component native renderer for iOS and Android to change it's shape, so in the end a `FastSquircleView` is just a normal `View` with a different shape and you can expect close performance to a normal `View`

![Alt text](https://raw.githubusercontent.com/fbeccaceci/react-native-fast-squircle/main/assets/squircle-example.png)

## ✨ Features

- 🚀 **Native Performance**: No SVGs involved, it's just a normal `<View />` just with a different shape
- 🎨 **Easily styleable**: Supports borders, outlines, shadows and `overflow: "hidden"` out of the box
- 📱 **Cross Platform**: Works on iOS and Android
- 🎛️ **Customizable**: Adjustable corner smoothing from sharp to very smooth
- 🧩 **Drop-in Replacement**: Compatible with all standard React Native View props

## 📦 Installation

```sh
npm install react-native-fast-squircle
```

```sh
yarn add react-native-fast-squircle
```

```sh
bun add react-native-fast-squircle
```

### Expo Setup

The package includes some native code so you won't be able to use it with Expo GO.

To use the package with expo run

```sh
expo prebuild
```

### iOS Setup

For iOS, you may need to run pod install:

```sh
cd ios && pod install
```

### Android Setup

No additional setup required for Android.

## 🚀 Usage

### Basic Example

```tsx
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 `SquircleView` can be used exactly as a normale react-native `View` it just adds a new cornerSmoothing prop ranging between 0 and 1 where 0 is a normal rounded rect view and 1 is max corners smoothness (default value is 0.6)

## 🤝 Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## 📄 License

MIT © [fbeccaceci](https://github.com/fbeccaceci)

---

Made with ❤️ using [create-react-native-library](https://github.com/callstack/react-native-builder-bob)