### Start Metro Server for Example App

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/CONTRIBUTING.md

Starts the Metro bundler to serve the example application. This is necessary for running the app on devices or simulators.

```bash
yarn example start
```

--------------------------------

### Install react-native-fast-squircle

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/README.md

Install the library using npm and run pod install for iOS. This is the initial setup step for using the component.

```bash
npm install react-native-fast-squircle
cd ios && pod install && cd ..  # iOS only
```

--------------------------------

### Basic FastSquircleView Usage

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/README.md

Demonstrates how to import and use the FastSquircleView component with basic styling and corner smoothing. This is a fundamental example for getting started.

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

<FastSquircleView
  style={{
    width: 200,
    height: 200,
    backgroundColor: 'blue',
    borderRadius: 30,
  }}
  cornerSmoothing={0.6}
/>
```

--------------------------------

### Run Example App on Android

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator.

```bash
yarn example android
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device.

```bash
yarn example ios
```

--------------------------------

### Install with bun

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/README.md

Install the react-native-fast-squircle package using bun.

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

--------------------------------

### Install react-native-fast-squircle

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Install the library using npm or yarn. For iOS, run `pod install`. For Expo, use `expo prebuild`.

```bash
npm install react-native-fast-squircle
# or
yarn add react-native-fast-squircle

# iOS setup
cd ios && pod install && cd ..

# Expo setup
expo prebuild
```

--------------------------------

### iOS Pod Install Command

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/README.md

After installing the library, navigate to the ios directory and run pod install to link native dependencies for iOS.

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

--------------------------------

### iOS Native Dependencies Setup

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/INTEGRATION-PATTERNS.md

Install native dependencies for iOS projects using CocoaPods.

```bash
cd ios && pod install && cd ..
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/CONTRIBUTING.md

Run this command in the root directory to install all project dependencies using Yarn workspaces.

```bash
yarn
```

--------------------------------

### Complete Example with Props and Styling

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

A comprehensive example showcasing the `FastSquircleView` with various props including `ref`, `style`, `cornerSmoothing`, `onPress`, and accessibility props. Includes custom styling and event handling.

```typescript
import React, { useRef } from 'react';
import { StyleSheet, Text, View, GestureResponderEvent } from 'react-native';
import FastSquircleView, { type FastSquircleViewProps } from 'react-native-fast-squircle';

export const CompleteExample: React.FC = () => {
  const viewRef = useRef<View>(null);

  const handlePress = (e: GestureResponderEvent) => {
    console.log('Pressed at:', e.nativeEvent.pageX, e.nativeEvent.pageY);
  };

  return (
    <View style={styles.container}>
      <FastSquircleView
        ref={viewRef}
        style={styles.button}
        cornerSmoothing={0.8}
        onPress={handlePress}
        testID="action-button"
        accessible={true}
        accessibilityRole="button"
        accessibilityLabel="Action Button"
      >
        <Text style={styles.buttonText}>Press Me</Text>
      </FastSquircleView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    paddingHorizontal: 24,
    paddingVertical: 12,
    backgroundColor: '#007AFF',
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
});
```

--------------------------------

### Install with npm

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/README.md

Install the react-native-fast-squircle package using npm.

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

--------------------------------

### Install and Launch React DevTools

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Install React DevTools globally and launch it to inspect your React Native component hierarchy and state. Ensure it's imported conditionally for development builds.

```bash
npm install -g react-devtools
react-devtools
```

```typescript
if (__DEV__) {
  import('react-devtools').catch(err => {
    console.log('DevTools error:', err);
  });
}
```

--------------------------------

### Install CocoaPods Dependencies

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/example/README.md

Before building the iOS app, install CocoaPods dependencies. Run 'bundle install' once to install the bundler, and 'bundle exec pod install' after updating native dependencies.

```sh
bundle install

bundle exec pod install
```

--------------------------------

### Install with yarn

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/README.md

Install the react-native-fast-squircle package using yarn.

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

--------------------------------

### Start Metro Bundler

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/example/README.md

Run this command from the root of your React Native project to start the Metro dev server. This is necessary for building and running your app.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

--------------------------------

### Responsive Squircle Sizing

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/API-OVERVIEW.md

An example of creating a responsive FastSquircleView whose size adjusts based on window dimensions.

```typescript
const { width } = useWindowDimensions();
const size = Math.min(width * 0.8, 300);

<FastSquircleView
  style={{
    width: size,
    height: size,
    backgroundColor: 'purple',
    borderRadius: size * 0.15,
  }}
  cornerSmoothing={0.75}
/>
```

--------------------------------

### Using useRef with FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Example of how to use the `useRef` hook to get a reference to the FastSquircleView component.

```typescript
const ref = useRef<View>(null);
<FastSquircleView ref={ref} ... />
```

--------------------------------

### Styled Squircle Container Example

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/API-OVERVIEW.md

Demonstrates using FastSquircleView as a styled container with borders, shadows, and padding.

```typescript
<FastSquircleView
  style={{
    width: 300,
    height: 400,
    backgroundColor: 'white',
    borderRadius: 30,
    borderWidth: 1,
    borderColor: '#ddd',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    padding: 20,
  }}
  cornerSmoothing={0.7}
>
  {/* Child content */}
</FastSquircleView>
```

--------------------------------

### Build and Run iOS App

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/example/README.md

Run this command to build and run your iOS application after Metro is running and CocoaPods dependencies are installed.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

--------------------------------

### Package.json Exports Configuration

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/EXPORTS.md

Configuration in package.json defining how the package's entry points are resolved. This setup ensures correct imports for development (source) and production (transpiled).

```json
{
  "main": "./lib/module/index.js",
  "types": "./lib/typescript/src/index.d.ts",
  "exports": {
    ".": {
      "source": "./src/index.tsx",
      "types": "./lib/typescript/src/index.d.ts",
      "default": "./lib/module/index.js"
    },
    "./package.json": "./package.json"
  }
}
```

--------------------------------

### FastSquircleView as a Button

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Example of using FastSquircleView to create a tappable button with custom styling and an onPress handler.

```typescript
<FastSquircleView
  style={{
    paddingHorizontal: 24,
    paddingVertical: 12,
    backgroundColor: '#007AFF',
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
  }}
  cornerSmoothing={0.8}
  onPress={() => console.log('Pressed')}
>
  <Text style={{ color: 'white' }}>Tap Me</Text>
</FastSquircleView>
```

--------------------------------

### Basic Squircle Button Example

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/API-OVERVIEW.md

A common pattern for creating a squircle-shaped button with an onPress handler.

```typescript
<FastSquircleView
  style={{
    width: 150,
    height: 60,
    backgroundColor: 'blue',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
  }}
  cornerSmoothing={0.8}
  onPress={() => console.log('Pressed')}
>
  <Text style={{ color: 'white', fontWeight: 'bold' }}>
    Press Me
  </Text>
</FastSquircleView>
```

--------------------------------

### Basic Usage of FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/EXPORTS.md

Demonstrates how to render a FastSquircleView component with basic styling and corner smoothing. Ensure 'react-native-fast-squircle' is installed.

```typescript
import FastSquircleView from 'react-native-fast-squircle';
import { StyleSheet } from 'react-native';

export default function App() {
  return (
    <FastSquircleView
      style={styles.box}
      cornerSmoothing={0.6}
    />
  );
}

const styles = StyleSheet.create({
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'blue',
    borderRadius: 30,
  },
});
```

--------------------------------

### Check Expo and React Native Versions

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Verify compatibility by checking the installed versions of Expo CLI and React Native.

```bash
expo --version
react-native --version
```

--------------------------------

### Using useState with FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Example of using the `useState` hook to manage dynamic styles, such as background color.

```typescript
const [color, setColor] = useState('blue');
<FastSquircleView style={{ backgroundColor: color }} ... />
```

--------------------------------

### Invalid cornerSmoothing Examples

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/API-OVERVIEW.md

Shows examples of invalid cornerSmoothing prop values that will cause errors.

```typescript
// These throw errors
<FastSquircleView cornerSmoothing={-0.1} />   // Error!
<FastSquircleView cornerSmoothing={1.5} />    // Error!
```

--------------------------------

### FastSquircleView as an Avatar

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Example of using FastSquircleView to display an avatar image with specific dimensions and background.

```typescript
<FastSquircleView
  style={{
    width: 60,
    height: 60,
    borderRadius: 20,
    backgroundColor: '#E5E5EA',
    justifyContent: 'center',
    alignItems: 'center',
  }}
  cornerSmoothing={0.9}
>
  <Image source={require('./avatar.png')} style={{ width: 60, height: 60 }} />
</FastSquircleView>
```

--------------------------------

### Valid cornerSmoothing Examples

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/API-OVERVIEW.md

Illustrates valid values for the cornerSmoothing prop, including defaults and custom numbers between 0 and 1.

```typescript
// These are valid
<FastSquircleView cornerSmoothing={0} />      // OK
<FastSquircleView cornerSmoothing={0.5} />    // OK
<FastSquircleView cornerSmoothing={1} />      // OK
<FastSquircleView />                           // OK (uses default 0.6)
```

--------------------------------

### Using useCallback for Handlers with FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Example of using `useCallback` to memoize event handlers, improving performance by preventing unnecessary re-renders.

```typescript
const handlePress = useCallback(() => {
  setCount(prev => prev + 1);
}, []);
<FastSquircleView onPress={handlePress} ... />
```

--------------------------------

### FastSquircleView with Ref Forwarding

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/api-reference/FastSquircleView.md

Demonstrates using `useRef` to get a reference to the underlying native view for imperative control. The `handlePress` function logs the ref's current value.

```typescript
import React, { useRef } from 'react';
import { View } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

export default function App() {
  const viewRef = useRef<View>(null);

  const handlePress = () => {
    // Ref can be used to access the underlying native view
    console.log('View ref:', viewRef.current);
  };

  return (
    <FastSquircleView
      ref={viewRef}
      style={{
        width: 200,
        height: 200,
        backgroundColor: 'purple',
        borderRadius: 30,
      }}
      cornerSmoothing={0.6}
      onPress={handlePress}
    />
  );
}
```

--------------------------------

### Dynamic Styling with State

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/STYLING-GUIDE.md

Apply dynamic styles by updating component state. This example toggles background color and opacity based on a pressed state.

```typescript
import { useState } from 'react';
import FastSquircleView from 'react-native-fast-squircle';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  squircle: {
    width: 200,
    height: 200,
    borderRadius: 30,
  },
});

export default function App() {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <FastSquircleView
      style={[ 
        styles.squircle,
        { 
          backgroundColor: isPressed ? 'darkblue' : 'lightblue',
          opacity: isPressed ? 0.8 : 1,
        },
      ]}
      cornerSmoothing={0.6}
      onPress={() => setIsPressed(!isPressed)}
    />
  );
}
```

--------------------------------

### Usage with Custom Props Extending FastSquircleViewProps

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/EXPORTS.md

Example of defining a component that extends FastSquircleViewProps to include additional custom props. Ensure the FastSquircleView component receives the necessary props.

```typescript
import { type FastSquircleViewProps } from 'react-native-fast-squircle';

interface MyComponentProps extends FastSquircleViewProps {
  label?: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ label, ...props }) => {
  return (
    <>
      {label && <Text>{label}</Text>}
      <FastSquircleView {...props} />
    </>
  );
};
```

--------------------------------

### Using useMemo for Performance with FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Demonstrates using `useMemo` to optimize style calculations, especially when dependent on other state or props.

```typescript
const style = useMemo(() => ({
  width: 200,
  height: 200,
  backgroundColor: color,
  borderRadius: 30,
}), [color]);
<FastSquircleView style={style} ... />
```

--------------------------------

### Prebuild for Specific Platform

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Execute the prebuild command for a specific platform (iOS or Android) with the --clean flag to resolve platform-specific build issues.

```bash
expo prebuild --platform ios --clean
expo prebuild --platform android --clean
```

--------------------------------

### Publish New Versions to npm

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/CONTRIBUTING.md

Uses release-it to automate the process of bumping versions, creating tags, and publishing new releases to npm.

```bash
yarn release
```

--------------------------------

### Animated Squircle with Reanimated

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/INTEGRATION-PATTERNS.md

Integrates FastSquircleView with react-native-reanimated for advanced animations. Ensure react-native-reanimated is installed.

```typescript
import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import Animated,
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  interpolate,
  Extrapolate,
} from 'react-native-reanimated';
import FastSquircleView from 'react-native-fast-squircle';

// Note: This example assumes react-native-reanimated is installed
// npm install react-native-reanimated

export const ReanimatedSquircle: React.FC = () => {
  const rotation = useSharedValue(0);

  useEffect(() => {
    rotation.value = withRepeat(
      withTiming(360, { duration: 3000 }),
      -1,
      true
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          rotate: `${rotation.value}deg`,
        },
      ],
    };
  });

  return (
    <Animated.View style={[styles.container, animatedStyle]}>
      <FastSquircleView
        style={styles.squircle}
        cornerSmoothing={0.7}
      />
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  squircle: {
    width: 200,
    height: 200,
    backgroundColor: 'blue',
    borderRadius: 30,
  },
});
```

--------------------------------

### Responsive Styling with useWindowDimensions

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/STYLING-GUIDE.md

Implement responsive styling by using the `useWindowDimensions` hook to dynamically adjust component properties based on screen size. This ensures the component adapts to different devices and orientations.

```typescript
import { useWindowDimensions, StyleSheet } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

export default function App() {
  const { width, height } = useWindowDimensions();

  const responsiveStyles = {
    size: Math.min(width * 0.8, 300),
    borderRadius: Math.min(width * 0.8, 300) * 0.15,
    padding: width > 400 ? 20 : 10,
  };

  return (
    <FastSquircleView
      style={{ 
        width: responsiveStyles.size,
        height: responsiveStyles.size,
        borderRadius: responsiveStyles.borderRadius,
        backgroundColor: 'blue',
        padding: responsiveStyles.padding,
      }}
      cornerSmoothing={0.7}
    />
  );
}
```

--------------------------------

### Expo Prebuild Command

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/README.md

Run this command to prepare your Expo project for native code integration when using packages like react-native-fast-squircle.

```sh
expo prebuild
```

--------------------------------

### Verifying Podfile Configuration for iOS

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Ensure the `react-native-fast-squircle` package is correctly referenced in the `ios/Podfile`. This is crucial for native linking.

```ruby
target 'YourApp' do
  # ... other pods
  pod 'react-native-fast-squircle', :path => '../node_modules/react-native-fast-squircle'
end
```

--------------------------------

### 2x2 Grid Layout with Fast Squircle Views

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/INTEGRATION-PATTERNS.md

Demonstrates creating a 2x2 grid layout using FastSquircleView components with different background colors and consistent corner smoothing. Requires React and React Native.

```typescript
import React from 'react';
import { StyleSheet, View } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

export const SquircleGrid2x2: React.FC = () => {
  return (
    <View style={styles.grid}>
      <View style={styles.row}>
        <FastSquircleView
          style={[styles.box, { backgroundColor: '#FF6B6B' }]}
          cornerSmoothing={0.7}
        />
        <FastSquircleView
          style={[styles.box, { backgroundColor: '#4ECDC4' }]}
          cornerSmoothing={0.7}
        />
      </View>
      <View style={styles.row}>
        <FastSquircleView
          style={[styles.box, { backgroundColor: '#FFE66D' }]}
          cornerSmoothing={0.7}
        />
        <FastSquircleView
          style={[styles.box, { backgroundColor: '#95E1D3' }]}
          cornerSmoothing={0.7}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  grid: {
    padding: 16,
    gap: 12,
  },
  row: {
    flexDirection: 'row',
    gap: 12,
  },
  box: {
    flex: 1,
    aspectRatio: 1,
    borderRadius: 20,
  },
});
```

--------------------------------

### Use useMemo for Dynamic Styles

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Optimize the creation of dynamic styles by using `useMemo`. This ensures styles are recomputed only when their dependencies change.

```typescript
const style = useMemo(() => ({ /* ... */ }), [deps]);
```

--------------------------------

### Styling Layout for FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Quick reference for common layout styles like flex, flexDirection, and alignment.

```typescript
flex: 1
flexDirection: 'row'
justifyContent: 'center'
alignItems: 'center'
gap: 12
```

--------------------------------

### Re-export Component and Type in Your Module

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/EXPORTS.md

Example of re-exporting the FastSquircleView component and its types from your own module. This allows for custom naming and encapsulation.

```typescript
// my-components.ts
export { default as SquircleBox } from 'react-native-fast-squircle';
export type { FastSquircleViewProps as SquircleBoxProps } from 'react-native-fast-squircle';
```

--------------------------------

### Checking Android SDK Compatibility

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Verify that your Android SDK versions are compatible with the library. Incompatible SDKs can lead to build errors.

```bash
android list targets
 sdkmanager --list
```

--------------------------------

### Usage of FastSquircleView with Default Corner Smoothing

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/types.md

Demonstrates how to use the FastSquircleView component with a default cornerSmoothing value. Ensure FastSquircleView and its types are imported.

```typescript
import React from 'react';
import FastSquircleView, { type FastSquircleViewProps } from 'react-native-fast-squircle';

const MyCustomSquircle: React.FC<FastSquircleViewProps> = (props) => {
  return (
    <FastSquircleView
      {...props}
      cornerSmoothing={props.cornerSmoothing ?? 0.7}
    />
  );
};
```

--------------------------------

### Minimal FastSquircleView Setup

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/INTEGRATION-PATTERNS.md

Basic integration of FastSquircleView in a React Native component. Sets a default blue background and border radius.

```typescript
import React from 'react';
import { StyleSheet, View } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

export default function App() {
  return (
    <View style={styles.container}>
      <FastSquircleView style={styles.squircle} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  squircle: {
    width: 200,
    height: 200,
    backgroundColor: 'blue',
    borderRadius: 30,
  },
});
```

--------------------------------

### Use StyleSheet for Static Styles

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/STYLING-GUIDE.md

For static styles, use `StyleSheet.create` to memoize styles, improving performance by avoiding unnecessary re-creations on each render.

```typescript
// Good: Styles are memoized
const styles = StyleSheet.create({
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'blue',
    borderRadius: 30,
  },
});

<FastSquircleView style={styles.box} cornerSmoothing={0.6} />
```

--------------------------------

### FastSquircleView as a Container

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Shows how to use FastSquircleView as a flexible container with padding and border radius.

```typescript
<FastSquircleView
  style={{
    flex: 1,
    backgroundColor: 'white',
    borderRadius: 24,
    padding: 20,
  }}
  cornerSmoothing={0.7}
>
  {/* Container content */}
</FastSquircleView>
```

--------------------------------

### Stacked Layout with Squircles

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/INTEGRATION-PATTERNS.md

Demonstrates a stacked layout using multiple FastSquircleView components. Each squircle has a different background color.

```typescript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

export const StackedSquircles: React.FC = () => {
  return (
    <View style={styles.container}>
      <FastSquircleView style={[styles.box, styles.first]} cornerSmoothing={0.6} />
      <FastSquircleView style={[styles.box, styles.second]} cornerSmoothing={0.6} />
      <FastSquircleView style={[styles.box, styles.third]} cornerSmoothing={0.6} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 16,
  },
  box: {
    width: 150,
    height: 150,
    borderRadius: 24,
  },
  first: { backgroundColor: 'red' },
  second: { backgroundColor: 'green' },
  third: { backgroundColor: 'blue' },
});
```

--------------------------------

### Accessing View Reference with useRef

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/INTEGRATION-PATTERNS.md

Utilize useRef to get a direct reference to the FastSquircleView component for imperative operations. This is necessary when you need to interact with the component's instance directly.

```typescript
import React, { useRef } from 'react';
import { StyleSheet, View, Button, View as RNView } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

export const RefExample: React.FC = () => {
  const viewRef = useRef<RNView>(null);

  const handleGetRef = () => {
    if (viewRef.current) {
      console.log('View reference:', viewRef.current);
      // Can use ref for platform-specific operations if needed
    }
  };

  return (
    <View style={styles.container}>
      <FastSquircleView
        ref={viewRef}
        style={styles.squircle}
        cornerSmoothing={0.6}
      />
      <Button title="Log Ref" onPress={handleGetRef} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  squircle: {
    width: 200,
    height: 200,
    backgroundColor: 'purple',
    borderRadius: 30,
    marginBottom: 20,
  },
});
```

--------------------------------

### Build and Run Android App

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/example/README.md

Execute this command in a new terminal window to build and run your Android application after Metro is running.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

--------------------------------

### Correcting cornerSmoothing Prop Value

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Ensure the `cornerSmoothing` prop is within the valid range of 0 to 1. Incorrect values can lead to errors. This example shows correct and incorrect usage.

```typescript
// Wrong: Value > 1
<FastSquircleView cornerSmoothing={1.5} />

// Correct: Value between 0 and 1
<FastSquircleView cornerSmoothing={0.6} />
<FastSquircleView cornerSmoothing={0.8} />
<FastSquircleView cornerSmoothing={0.2} />

// Correct: Use default (no prop)
<FastSquircleView />
```

--------------------------------

### Styling Spacing for FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Quick reference for common spacing styles like padding and margin.

```typescript
padding: 20
paddingHorizontal: 10
paddingVertical: 10
margin: 8
marginTop: 10
```

--------------------------------

### Styling Shadows for FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Quick reference for shadow styles for both iOS and Android platforms.

```typescript
// iOS
shadowColor: '#000'
shadowOffset: { width: 0, height: 2 }
shadowOpacity: 0.25
shadowRadius: 3.84

// Android
elevation: 5
```

--------------------------------

### Virtualize Lists

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Enhance performance for long lists by enabling virtualization. Use props like `numColumns` and `removeClippedSubviews` on `FlatList`.

```typescript
<FlatList numColumns={2} removeClippedSubviews={true} />
```

--------------------------------

### Run Unit Tests

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/CONTRIBUTING.md

Executes the unit test suite using Jest. All tests must pass to ensure the code functions correctly.

```bash
yarn test
```

--------------------------------

### FastSquircleView with Gradient Background (Children)

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/api-reference/FastSquircleView.md

Demonstrates using child Views to create a gradient effect within the squircle. The inner View should have its own borderRadius matching the parent.

```typescript
import React from 'react';
import { View, StyleSheet } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

export default function App() {
  return (
    <FastSquircleView
      style={styles.squircle}
      cornerSmoothing={0.8}
    >
      <View style={styles.content} />
    </FastSquircleView>
  );
}

const styles = StyleSheet.create({
  squircle: {
    width: 200,
    height: 200,
    backgroundColor: 'blue',
    borderRadius: 30,
  },
  content: {
    flex: 1,
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 30,
  },
});
```

--------------------------------

### Create Styles with StyleSheet for FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Use `StyleSheet.create` for defining styles to improve performance and organization. Import `StyleSheet` from 'react-native' and `FastSquircleView` from 'react-native-fast-squircle'.

```typescript
import { StyleSheet } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

const styles = StyleSheet.create({
  squircle: {
    width: 200,
    height: 200,
    backgroundColor: 'blue',
    borderRadius: 30,
  },
});

<FastSquircleView style={styles.squircle} />
```

--------------------------------

### Verifying Native Code Generation for Android

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Ensure native code generation is successful for Android builds. This step confirms that the build process can compile the necessary native components.

```bash
npm run build  # or your build command
cd android && ./gradlew clean build
```

--------------------------------

### Using StyleSheet for Performance

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/STYLING-GUIDE.md

Utilize StyleSheet.create for optimized styles, especially when dealing with complex or frequently rendered components. This approach leverages native optimizations.

```typescript
import { StyleSheet } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

const styles = StyleSheet.create({
  button: {
    width: 150,
    height: 60,
    backgroundColor: 'blue',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});

export default function App() {
  return (
    <FastSquircleView style={styles.button} cornerSmoothing={0.8} />
  );
}
```

--------------------------------

### FastSquircleView as a Card

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Demonstrates using FastSquircleView to create a card-like UI element with shadow effects.

```typescript
<FastSquircleView
  style={{
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  }}
  cornerSmoothing={0.7}
>
  {/* Card content */}
</FastSquircleView>
```

--------------------------------

### Use StyleSheet for Styles

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Optimize styling by using `StyleSheet.create` for better performance and organization. This is a standard React Native practice.

```typescript
const styles = StyleSheet.create({ /* ... */ });
```

--------------------------------

### Import Variations

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Demonstrates different ways to import the `FastSquircleView` component and its types. Includes default, type-only, and combined imports.

```typescript
// Default export
import FastSquircleView from 'react-native-fast-squircle';

// Type-only import
import type { FastSquircleViewProps } from 'react-native-fast-squircle';

// Combined
import FastSquircleView, { type FastSquircleViewProps } from 'react-native-fast-squircle';
```

--------------------------------

### Styling Borders for FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Quick reference for common border styles applicable to FastSquircleView.

```typescript
borderRadius: 30
borderWidth: 2
borderColor: 'black'
```

--------------------------------

### Using Refs with FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/API-OVERVIEW.md

Shows how to attach a ref to a FastSquircleView component for imperative access.

```typescript
const squircleRef = useRef<View>(null);

<FastSquircleView
  ref={squircleRef}
  style={{ width: 200, height: 200, backgroundColor: 'green', borderRadius: 30 }}
  cornerSmoothing={0.6}
/>
```

--------------------------------

### Styling Colors for FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Quick reference for common color styles applicable to FastSquircleView.

```typescript
backgroundColor: 'blue'
borderColor: '#3A86FF'
shadowColor: '#000'
```

--------------------------------

### Import Default FastSquircleView Component

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/EXPORTS.md

Import the primary React component for rendering a squircle view. This is the recommended way to use the library.

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

--------------------------------

### Rebuilding iOS Project After Cleaning

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

After cleaning dependencies and caches, rebuild the iOS project. This ensures that all native modules are correctly compiled and linked.

```bash
cd ios
xcodebuild clean -scheme YourApp
cd ..
npm run android  # or your build command
```

--------------------------------

### Virtualize Long Lists with FlatList

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

For lists with many FastSquircleView components, use `FlatList` with virtualization props like `removeClippedSubviews` and `maxToRenderPerBatch` to manage performance. Ensure `data`, `renderItem`, and `keyExtractor` are properly configured.

```typescript
import { FlatList } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

export function SquircleList({ data }) {
  const renderItem = ({ item }) => (
    <FastSquircleView
      style={{
        width: 100,
        height: 100,
        backgroundColor: item.color,
        borderRadius: 20,
        margin: 8,
      }}
      cornerSmoothing={0.6}
    />
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
    />
  );
}
```

--------------------------------

### Import Default Component and Type Together

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/EXPORTS.md

Import both the default FastSquircleView component and its associated type for use in TypeScript. This is a common pattern for convenience.

```typescript
import FastSquircleView, { type FastSquircleViewProps } from 'react-native-fast-squircle';

const App: React.FC<FastSquircleViewProps> = (props) => (
  <FastSquircleView {...props} />
);
```

--------------------------------

### React Native Builder Bob Configuration

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/ARCHITECTURE.md

This JSON object configures the react-native-builder-bob tool for managing the build process. It specifies source and output directories, and defines the build targets for module and TypeScript output.

```json
{
  "react-native-builder-bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      ["module", { "esm": true }],
      ["typescript", { "project": "tsconfig.build.json" }]
    ]
  }
}
```

--------------------------------

### Styling Dimensions for FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Quick reference for common dimension styles applicable to FastSquircleView.

```typescript
width: 200
height: 200
aspectRatio: 1
minWidth: 100
maxHeight: 300
```

--------------------------------

### iOS-Specific Styling with Platform.select

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/STYLING-GUIDE.md

Apply iOS-specific styles using `Platform.select` within `StyleSheet.create`. This ensures styles are applied only on iOS devices.

```typescript
import { Platform } from 'react-native';

const styles = StyleSheet.create({
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'blue',
    borderRadius: 30,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 8,
      },
      android: {
        elevation: 8,
      },
    }),
  },
});
```

--------------------------------

### Set Accessibility Properties

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Configure accessibility for screen readers and other assistive technologies. Ensure `accessible` is true to enable accessibility features.

```typescript
<FastSquircleView
  accessible={true}
  accessibilityRole="button"
  accessibilityLabel="My Button"
  accessibilityHint="Double tap to activate"
/>
```

--------------------------------

### Rebuilding Android Project

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

After cleaning the Gradle cache, rebuild the Android project to ensure native code is compiled correctly. This can resolve 'cannot find symbol' errors.

```bash
cd android
./gradlew assembleDebug
cd ..
```

--------------------------------

### Debug Component Layout with FastSquircleView

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Apply styles to FastSquircleView to visualize its layout and borders during debugging. This helps in identifying positioning or sizing issues.

```typescript
import { StyleSheet } from 'react-native';
import FastSquircleView from 'react-native-fast-squircle';

const styles = StyleSheet.create({
  debugSquircle: {
    width: 200,
    height: 200,
    borderRadius: 30,
    backgroundColor: 'blue',
    // Add debug border to see layout
    borderWidth: 2,
    borderColor: 'red',
  },
});

<FastSquircleView style={styles.debugSquircle} cornerSmoothing={0.6} />
```

--------------------------------

### Clean Expo Prebuild Cache

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Use this command to clear the Expo prebuild cache and resolve potential build issues.

```bash
expo prebuild --clean
```

--------------------------------

### Light Theme Styling

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/STYLING-GUIDE.md

Apply light theme colors to FastSquircleView by defining theme variables and using them for background, border, text, and shadow properties.

```typescript
const lightTheme = {
  background: '#FFFFFF',
  border: '#E0E0E0',
  text: '#212121',
  shadow: '#000000',
};

<FastSquircleView
  style={{
    width: 200,
    height: 200,
    backgroundColor: lightTheme.background,
    borderRadius: 30,
    borderWidth: 1,
    borderColor: lightTheme.border,
    shadowColor: lightTheme.shadow,
  }}
  cornerSmoothing={0.6}
/>
```

--------------------------------

### Defining Custom Props Extending FastSquircleViewProps

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/types.md

Shows how to create a custom component that extends FastSquircleViewProps with additional properties like 'variant' and 'size'. Imports are necessary for FastSquircleView and its types.

```typescript
import React from 'react';
import FastSquircleView, { type FastSquircleViewProps } from 'react-native-fast-squircle';

interface CustomSquircleProps extends FastSquircleViewProps {
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
}

const CustomSquircle: React.FC<CustomSquircleProps> = ({ 
  variant = 'primary', 
  size = 'medium', 
  ...props 
}) => {
  const sizeMap = {
    small: 100,
    medium: 150,
    large: 200,
  };

  const colorMap = {
    primary: 'blue',
    secondary: 'gray',
  };

  return (
    <FastSquircleView
      {...props}
      style={[ 
        {
          width: sizeMap[size],
          height: sizeMap[size],
          backgroundColor: colorMap[variant],
          borderRadius: 30,
        },
        props.style,
      ]}
    />
  );
};
```

--------------------------------

### Lint Code with ESLint

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/CONTRIBUTING.md

Runs ESLint to check for code style and potential errors. This helps maintain code quality and consistency.

```bash
yarn lint
```

--------------------------------

### Platform-Specific: Conditional Styling

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Apply different styles based on the platform using `Platform.select`.

```typescript
Platform.select({
  ios: { shadowOpacity: 0.25 },
  android: { elevation: 5 },
})
```

--------------------------------

### Cleaning and Reinstalling iOS Pods

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/TROUBLESHOOTING.md

Troubleshoot iOS native compilation errors by cleaning the Pods directory and reinstalling dependencies. This is a common fix for missing native modules.

```bash
cd ios
rm -rf Pods
rm Podfile.lock
pod install
cd ..
```

--------------------------------

### Simple Border Styling

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/STYLING-GUIDE.md

Apply a simple border to the FastSquircleView by setting `borderWidth` and `borderColor` properties within the style object. Ensure `borderRadius` is also set if a rounded border is desired.

```typescript
<FastSquircleView
  style={{
    width: 200,
    height: 200,
    backgroundColor: 'white',
    borderRadius: 30,
    borderWidth: 2,
    borderColor: '#3A86FF',
  }}
  cornerSmoothing={0.6}
/>
```

--------------------------------

### Log Layout Information

Source: https://github.com/fbeccaceci/react-native-fast-squircle/blob/main/_autodocs/QUICK-REFERENCE.md

Retrieve and log the layout dimensions (width and height) of the component. The `onLayout` prop provides access to this information.

```typescript
onLayout={(e) => {
  console.log('Width:', e.nativeEvent.layout.width);
  console.log('Height:', e.nativeEvent.layout.height);
}}
```