### Start Example App Packager

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application. This allows for live reloading of changes made to the library's JavaScript code without requiring a full rebuild.

```sh
yarn example start
```

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

### Bootstrap Project Dependencies and Pods

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Sets up the project by installing all dependencies and initializing CocoaPods for iOS development. This is a comprehensive setup script.

```sh
yarn bootstrap
```

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

### Run Example App on Web

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Runs the example application in a web browser. This command is used to test changes on the web platform.

```sh
yarn example web
```

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

### Install React Native QRCode Styled and Dependencies

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Installs the react-native-qrcode-styled library, its peer dependency react-native-svg, and TypeScript types for the qrcode package. This is the initial setup step for using the library.

```bash
npm install react-native-svg react-native-qrcode-styled
# or with yarn
yarn add react-native-svg react-native-qrcode-styled

# For TypeScript support
yarn add -D @types/qrcode
```

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

### Install Project Dependencies with Yarn

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Installs all the necessary dependencies for the project. This command should be run in the root directory of the project.

```sh
yarn
```

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

### Run Example App on Android

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator. This command is used to test changes on the Android platform.

```sh
yarn example android
```

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

### Run Example App on iOS

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS device or simulator. This command is used to test changes on the iOS platform.

```sh
yarn example ios
```

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

### Install react-native-qrcode-styled and Dependencies

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/README.md

Installs the core library, react-native-svg for rendering, and optionally TypeScript types for QR code handling. Use npm or yarn for installation.

```sh
npm i react-native-svg react-native-qrcode-styled
yarn add -D @types/qrcode
```

```sh
yarn add react-native-svg react-native-qrcode-styled
yarn add -D @types/qrcode
```

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

### Download QR Code as PNG Image in React Native

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

This example shows how to export a QR code generated by react-native-qrcode-styled as a PNG image. It utilizes the `toDataURL` method from the QR code's ref and integrates with Expo's FileSystem and MediaLibrary to save the image to the device's gallery. Permissions for media library access are requested before saving.

```tsx
import { useRef } from 'react';
import { View, Pressable, Text, Alert, StyleSheet } from 'react-native';
import QRCodeStyled from 'react-native-qrcode-styled';
import * as FileSystem from 'expo-file-system';
import * as MediaLibrary from 'expo-media-library';

export function DownloadableQR() {
  const qrRef = useRef<any>(null);
  const [permission, requestPermission] = MediaLibrary.usePermissions();

  const handleDownload = async () => {
    try {
      let granted = permission?.granted;
      if (!granted) {
        granted = (await requestPermission()).granted;
      }

      if (!granted) {
        throw new Error('Storage permission denied');
      }

      qrRef.current?.toDataURL(async (base64: string) => {
        const filename = FileSystem.documentDirectory + 'qr_code.png';

        await FileSystem.writeAsStringAsync(filename, base64, {
          encoding: FileSystem.EncodingType.Base64,
        });

        await MediaLibrary.saveToLibraryAsync(filename);
        Alert.alert('Success', 'QR code saved to gallery!');
      });
    } catch (error) {
      console.error('Download failed:', error);
      Alert.alert('Error', 'Failed to save QR code');
    }
  };

  return (
    <View style={styles.container}>
      <QRCodeStyled
        ref={qrRef}
        data="Download this QR"
        padding={20}
        color="black"
        style={styles.qr}
      />
      <Pressable onPress={handleDownload} style={styles.button}>
        <Text style={styles.buttonText}>Download</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 16,
    overflow: 'hidden',
  },
  qr: {
    backgroundColor: 'white',
  },
  button: {
    backgroundColor: 'black',
    padding: 16,
    alignSelf: 'stretch',
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
    fontWeight: 'bold',
    textTransform: 'uppercase',
  },
});

```

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

### Access QR Code Bit Matrix with useQRCodeData Hook

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

This example demonstrates how to use the `useQRCodeData` hook from react-native-qrcode-styled to access the raw QR code data, including the bit matrix and size. This is useful for advanced customization scenarios where direct manipulation of the QR code's structure is needed. The hook takes the data string and optional configuration as arguments.

```tsx
import { useQRCodeData } from 'react-native-qrcode-styled';
import { View, Text } from 'react-native';

export function QRCodeAnalyzer() {
  const { bitMatrix, qrCodeSize } = useQRCodeData('Hello World', {
    errorCorrectionLevel: 'M',
    version: undefined,
    maskPattern: undefined,
  });

  // bitMatrix is a 2D array of 0s and 1s
  // qrCodeSize is the number of modules (pieces) per side

  const moduleCount = bitMatrix.flat().filter(bit => bit === 1).length;

  return (
    <View>
      <Text>QR Size: {qrCodeSize}x{qrCodeSize} modules</Text>
      <Text>Active modules: {moduleCount}</Text>
      <Text>Matrix preview:</Text>
      {bitMatrix.slice(0, 5).map((row, i) => (
        <Text key={i} style={{ fontFamily: 'monospace' }}>
          {row.slice(0, 10).join('')}...
        </Text>
      ))}
    </View>
  );
}

```

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

### Identify QR Code Eye Positions with Helper Functions

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

This example showcases utility functions provided by react-native-qrcode-styled for identifying specific parts of the QR code's eye patterns. Functions like `isCoordsOfOuterEyes`, `isCoordsOfInnerEyes`, and their specific positional variants help in custom rendering logic, allowing developers to style or treat eye elements differently from the rest of the QR code.

```tsx
import {
  isCoordsOfOuterEyes,
  isCoordsOfInnerEyes,
  isCoordsOfTopLeftOuterEye,
  isCoordsOfTopLeftInnerEye,
  isCoordsOfTopRightOuterEye,
  isCoordsOfTopRightInnerEye,
  isCoordsOfBottomLeftOuterEye,
  isCoordsOfBottomLeftInnerEye,
} from 'react-native-qrcode-styled';

// Example usage in custom piece renderer
const renderCustomPiece = ({ x, y, pieceSize, bitMatrix }) => {
  const qrSize = bitMatrix.length;

  // Check if this coordinate is part of any outer eye
  if (isCoordsOfOuterEyes(x, y, qrSize)) {
    return renderEyePiece(x, y, pieceSize, 'outer');
  }

  // Check if this coordinate is part of any inner eye
  if (isCoordsOfInnerEyes(x, y, qrSize)) {
    return renderEyePiece(x, y, pieceSize, 'inner');
  }

  // Check specific eye positions
  if (isCoordsOfTopLeftOuterEye(x, y)) {
    console.log('Top-left outer eye');
  }
  if (isCoordsOfTopRightInnerEye(x, y, qrSize)) {
    console.log('Top-right inner eye');
  }
  if (isCoordsOfBottomLeftOuterEye(x, y, qrSize)) {
    console.log('Bottom-left outer eye');
  }

  return renderRegularPiece(x, y, pieceSize);
};

```

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

### Run Unit Tests with Jest

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Executes the unit tests for the project using Jest. It is recommended to add tests for any new changes or bug fixes.

```sh
yarn test
```

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

### Publish New Versions with Release-it

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Initiates the process of publishing a new version of the package to npm. Release-it automates tasks like version bumping, tagging, and creating releases.

```sh
yarn release
```

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

### Lint Project Files with ESLint

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Applies linting rules to the project's files using ESLint to ensure code style consistency and identify potential code quality issues.

```sh
yarn lint
```

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

### Type Check Project Files with TypeScript

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Verifies the type correctness of the project's files using TypeScript. This helps catch potential type-related errors before committing.

```sh
yarn typecheck
```

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

### Linear Gradient Fill for QR Codes (React Native)

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Demonstrates how to apply a linear gradient fill to the QR code using the `gradient` prop. This allows for customizable start/end points, colors, and color stop locations.

```tsx
import QRCodeStyled from 'react-native-qrcode-styled';
import { StyleSheet } from 'react-native';

export function LinearGradientQR() {
  return (
    <QRCodeStyled
      data="Linear Gradient QR"
      style={styles.svg}
      padding={25}
      pieceBorderRadius={[0, '75%', 0, '75%']}
      isPiecesGlued
      gradient={{
        type: 'linear',
        options: {
          start: [0, 0],        // Top-left corner (0-1 range)
          end: [1, 1],          // Bottom-right corner (0-1 range)
          colors: ['#da0c8b', '#00bfff'],
          locations: [0, 1],    // Color stop positions (0-1 range)
        },
      }}
    />
  );
}

const styles = StyleSheet.create({
  svg: {
    backgroundColor: 'white',
    borderRadius: 16,
    overflow: 'hidden',
  },
});
```

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

### Fix Formatting Errors with ESLint

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/CONTRIBUTING.md

Automatically fixes code formatting errors identified by ESLint. This command helps maintain a consistent code style across the project.

```sh
yarn lint --fix
```

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

### Render Custom QR Code Pieces with react-native-qrcode-styled

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Demonstrates how to use the `renderCustomPieceItem` callback to create entirely custom designs for QR code pieces. It allows access to piece coordinates, size, and the bit matrix, enabling unique visual styles. Helper functions like `isCoordsOfOuterEyes` can be used to conditionally render or skip certain pieces, such as the QR code's eyes.

```tsx
import QRCodeStyled, {
  type RenderCustomPieceItem,
  isCoordsOfOuterEyes,
  isCoordsOfInnerEyes,
} from 'react-native-qrcode-styled';
import { Path } from 'react-native-svg';
import { StyleSheet } from 'react-native';

export function CustomPiecesQR() {
  const renderCustomPieceItem: RenderCustomPieceItem = ({
    x,
    y,
    pieceSize,
    qrSize,
    bitMatrix
  }) => {
    // Only render if this position should have a piece
    if (bitMatrix[y]?.[x] !== 1) {
      return null;
    }

    // Skip eyes for custom rendering (optional)
    // if (isCoordsOfOuterEyes(x, y, bitMatrix.length)) return null;
    // if (isCoordsOfInnerEyes(x, y, bitMatrix.length)) return null;

    const randomGray = Math.round(Math.random() * 120);
    const centerX = x * pieceSize + pieceSize / 2;
    const centerY = y * pieceSize + pieceSize / 2;

    return (
      <Path
        key={`piece_${x}_${y}`}
        origin={`${centerX}, ${centerY}`}
        scale={1.03}
        fill={`rgb(${randomGray}, ${randomGray}, ${randomGray})`}
        d={`
          M${pieceSize * x} ${pieceSize * y}
          L${pieceSize * (x + 1)} ${pieceSize * y}
          L${pieceSize * (x + 1)} ${pieceSize * (y + 1)}
          L${pieceSize * x} ${pieceSize * (y + 1)}
          z
        `}
      />
    );
  };

  return (
    <QRCodeStyled
      data="Custom QR Code"
      style={styles.svg}
      padding={25}
      renderCustomPieceItem={renderCustomPieceItem}
    />
  );
}

const styles = StyleSheet.create({
  svg: {
    backgroundColor: 'white',
    borderRadius: 16,
    overflow: 'hidden',
  },
});

```

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

### TypeScript Types Reference for react-native-qrcode-styled

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Provides a comprehensive reference for all TypeScript types used within the 'react-native-qrcode-styled' library. This includes types for main component props, gradient configurations, piece styling, eye options, logo options, custom rendering, and QR code options.

```typescript
import type {
  // Main component props
  SVGQRCodeStyledProps,

  // Gradient types
  GradientType,
  GradientProps,
  LinearGradientProps,
  RadialGradientProps,
  GradientOrigin,

  // Piece styling
  PieceOptions,
  CornerType,
  BorderRadius,
  MultiValue,

  // Eye options
  EyeOptions,
  EyePosition,
  AllEyesOptions,

  // Logo options
  LogoOptions,
  LogoArea,

  // Custom rendering
  RenderCustomPieceItem,
  BitMatrix,
  Bit,

  // QR code options (from qrcode package)
  QRCodeMessage,
  QRCodeOptions,
} from 'react-native-qrcode-styled';

// Example type usage
const eyeOptions: EyeOptions = {
  scale: 0.9,
  rotation: 45,
  borderRadius: ['30%', '30%', 0, '30%'],
  color: '#ff0000',
  gradient: {
    type: 'linear',
    options: {
      colors: ['#ff0000', '#0000ff'],
      start: [0, 0],
      end: [1, 1],
    },
  },
  stroke: '#000000',
  strokeWidth: 1,
};

const logoOptions: LogoOptions = {
  href: require('./logo.png'),
  hidePieces: true,
  padding: 5,
  scale: 1,
  onChange: (area: LogoArea | undefined) => {
    if (area) {
      console.log(`Logo at (${area.x}, ${area.y}) size ${area.width}x${area.height}`);
    }
  },
};

```

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

### Glued and Liquid Piece Effects for QR Codes (React Native)

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Illustrates creating connected QR code pieces with `isPiecesGlued` for a seamless look or applying liquid-style connections using `pieceLiquidRadius` for organic effects.

```tsx
import QRCodeStyled from 'react-native-qrcode-styled';
import { StyleSheet } from 'react-native';

// Glued rounded pieces
export function GluedRoundedPieces() {
  return (
    <QRCodeStyled
      data="Glued Rounded Pieces"
      style={styles.svg}
      padding={20}
      pieceBorderRadius="50%"
      isPiecesGlued
      color="#1d5480"
    />
  );
}

// Liquid effect pieces
export function LiquidPieces() {
  return (
    <QRCodeStyled
      data="Liquid Pieces"
      style={styles.svg}
      padding={25}
      pieceLiquidRadius="50%"
      color="#c9a73f"
    />
  );
}

const styles = StyleSheet.create({
  svg: {
    backgroundColor: 'white',
    borderRadius: 16,
    overflow: 'hidden',
  },
});
```

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

### Basic QR Code Generation with react-native-qrcode-styled

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/README.md

Demonstrates the basic usage of the QRCodeStyled component. It takes a 'data' prop for the QR code content and accepts style props for customization like background color, padding, and piece size.

```jsx
import QRCodeStyled from 'react-native-qrcode-styled';

<QRCodeStyled
  data={'Simple QR Code'}
  style={{backgroundColor: 'white'}}
  padding={20}
  pieceSize={8}
/>
```

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

### Add Custom Background and Children to QR Code with react-native-qrcode-styled

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Shows how to customize the background and foreground elements of a QR code using the `renderBackground` and `children` callbacks. These callbacks provide access to the piece size and the QR code's bit matrix, allowing for dynamic positioning and styling of SVG elements. This enables complex visual effects like gradients or overlaying custom shapes.

```tsx
import QRCodeStyled, {
  SVGGradient,
  type SVGQRCodeStyledProps
} from 'react-native-qrcode-styled';
import { Defs, Rect, Circle } from 'react-native-svg';
import { StyleSheet } from 'react-native';

export function QRWithCustomBackground() {
  const renderBackground: SVGQRCodeStyledProps['renderBackground'] = (
    pieceSize,
    bitMatrix
  ) => {
    const totalSize = bitMatrix.length * pieceSize + 50;

    return (
      <>
        <Defs>
          <SVGGradient
            id="bgGradient"
            origin={[0, 0]}
            size={totalSize}
            type="linear"
            options={{
              colors: ['#01fff2', '#b634e6'],
              start: [-0.3, -0.3],
              end: [0.7, 0.7],
            }}
          />
        </Defs>
        <Rect
          x={-25}
          y={-25}
          width={totalSize}
          height={totalSize}
          fill="url(#bgGradient)"
        />
      </>
    );
  };

  const renderChildren: SVGQRCodeStyledProps['children'] = (
    pieceSize,
    bitMatrix
  ) => {
    const size = bitMatrix.length * pieceSize;
    return (
      <Circle
        cx={size / 2}
        cy={size / 2}
        r={10}
        fill="white"
        opacity={0.5}
      />
    );
  };

  return (
    <QRCodeStyled
      data="Custom Background QR"
      padding={25}
      color="white"
      renderBackground={renderBackground}
      children={renderChildren}
    />
  );
}

```

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

### Apply Background Image to QR Code

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Uses an image as the fill pattern for QR code pieces, enabling photo-based or textured QR codes. The image is automatically clipped to the QR code's shape. This feature requires the 'react-native-qrcode-styled' library.

```tsx
import QRCodeStyled from 'react-native-qrcode-styled';
import { StyleSheet } from 'react-native';

export function QRWithBackgroundImage() {
  return (
    <QRCodeStyled
      data="QR with background"
      style={styles.svg}
      padding={24}
      pieceScale={1}
      backgroundImage={{
        href: require('./assets/texture.jpg'),
        // preserveAspectRatio: 'xMidYMid slice',
        // opacity: 0.8,
      }}
    />
  );
}

const styles = StyleSheet.create({
  svg: {
    backgroundColor: '#fff',
    borderRadius: 20,
    overflow: 'hidden',
  },
});
```

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

### Custom SVG Gradient Component Usage in React Native

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Demonstrates how to use the SVGGradient component from 'react-native-qrcode-styled' to create both linear and radial gradients for use in custom SVG elements. It requires 'react-native-svg' for SVG primitives and 'react-native-qrcode-styled' for the gradient component.

```tsx
import { SVGGradient } from 'react-native-qrcode-styled';
import { Defs, Rect, Circle } from 'react-native-svg';
import Svg from 'react-native-svg';

export function CustomGradientUsage() {
  return (
    <Svg width={200} height={200}>
      <Defs>
        {/* Linear gradient */}
        <SVGGradient
          id="linearGrad"
          size={200}
          type="linear"
          origin={[0, 0]}
          options={{
            start: [0, 0],
            end: [1, 1],
            colors: ['#ff0000', '#0000ff'],
            locations: [0, 1],
          }}
        />

        {/* Radial gradient */}
        <SVGGradient
          id="radialGrad"
          size={200}
          type="radial"
          origin={[0, 0]}
          options={{
            center: [0.5, 0.5],
            radius: [0.5, 0.5],
            colors: ['#ffff00', '#ff00ff'],
            locations: [0, 1],
          }}
        />
      </Defs>

      <Rect x={0} y={0} width={100} height={200} fill="url(#linearGrad)" />
      <Circle cx={150} cy={100} r={50} fill="url(#radialGrad)" />
    </Svg>
  );
}
```

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

### QR Code Piece Styling with Border Radius (React Native)

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Shows how to customize the shape of individual QR code pieces using the `pieceBorderRadius` prop. This allows for circular pieces or asymmetric rounded corners for unique designs.

```tsx
import QRCodeStyled from 'react-native-qrcode-styled';
import { StyleSheet } from 'react-native';

// Circular pieces
export function CirclePieces() {
  return (
    <QRCodeStyled
      data="Circular Pieces"
      style={styles.svg}
      padding={25}
      pieceBorderRadius="50%"
      color="#F57F17"
    />
  );
}

// Asymmetric rounded corners
export function AsymmetricPieces() {
  return (
    <QRCodeStyled
      data="Asymmetric Corners"
      style={styles.svg}
      padding={25}
      pieceBorderRadius={[0, '75%', 0, '75%']}
      isPiecesGlued
      color="#1d5480"
    />
  );
}

const styles = StyleSheet.create({
  svg: {
    backgroundColor: 'white',
    borderRadius: 16,
    overflow: 'hidden',
  },
});
```

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

### QR Code Component Props

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/README.md

This section details the available props for the QR code component, allowing for extensive customization of the QR code's appearance, including data encoding, size, styling, and advanced features like gradients, logos, and custom rendering.

```APIDOC
## Props

### `data`
- **Type**: `string` | `Array<string>`
- **Default**: `"I'm QR Code!"
- **Description**: Message for encoding. Can also be an array. More info [HERE](https://github.com/soldair/node-qrcode#manual-mode).

### `size`
- **Type**: `number`
- **Default**: `160`
- **Description**: Size of each piece of the QR code.

### `pieceScale`
- **Type**: `SvgProps['scale']`
- **Default**: `1.03` (to avoid gaps)
- **Description**: Scale of each piece of the QR code.

### `pieceRotation`
- **Type**: `SvgProps['rotation']`
- **Default**: `undefined`
- **Description**: Angle of rotation of each piece of the QR code (in degrees).

### `pieceCornerType`
- **Type**: `'rounded' | 'cut'`
- **Default**: `'rounded'`
- **Description**: Type of piece corner.

### `pieceBorderRadius`
- **Type**: `number | number[]`
- **Default**: `0`
- **Description**: Border radius of all corners of each piece. Can also be an array to define different border radius for each corner (start from top-left corner).

### `pieceStroke`
- **Type**: `ColorValue`
- **Default**: `undefined`
- **Description**: Border color of each piece. See [ColorValue](https://reactnative.dev/docs/colors).

### `pieceStrokeWidth`
- **Type**: `number`
- **Default**: `undefined`
- **Description**: Border width of each piece.

### `pieceLiquidRadius`
- **Type**: `number`
- **Default**: `undefined`
- **Description**: Level of liquid effect between pieces. If you have `pieceBorderRadius` set `isPiecesGlued` to *true*.

### `isPiecesGlued`
- **Type**: `boolean`
- **Default**: `false`
- **Description**: If *true* between pieces will be glue effect. You will see this if you have `pieceBorderRadius` > 0.

### `outerEyesOptions`
- **Type**: `EyeOptions | AllEyesOptions`
- **Default**: `undefined`
- **Description**: Configurations for outer eyes of QR code. If they defined, previous piece configurations won't be work. See [#EyeOptions](#EyeOptions) and [#AllEyesOptions](#AllEyesOptions).

### `innerEyesOptions`
- **Type**: `EyeOptions | AllEyesOptions`
- **Default**: `undefined`
- **Description**: The same as `outerEyesOptions` prop but for inner eyes.

### `color`
- **Type**: `ColorValue`
- **Default**: `'black'`
- **Description**: Color of QR code. See [ColorValue](https://reactnative.dev/docs/colors).

### `gradient`
- **Type**: `GradientProps`
- **Default**: `undefined`
- **Description**: Gradient of QR code. Can be two types: 'linear' | 'radial'. By default 'linear'. See [#GradientProps](#GradientProps).

### `padding`
- **Type**: `number`
- **Default**: `undefined`
- **Description**: Padding inside `<Svg/>` component from QR code.

### `logo`
- **Type**: `LogoOptions`
- **Default**: `undefined`
- **Description**: Configurations for logo. Support svg's `<Image/>` props. See [#LogoOptions](#LogoOptions).

### `backgroundImage`
- **Type**: `svg's <Image/> props type`
- **Default**: `undefined`
- **Description**: Background image for QR code.

### `version`
- **Type**: `number`
- **Default**: `undefined`
- **Description**: [Description](https://github.com/soldair/node-qrcode#version).

### `maskPattern`
- **Type**: `number`
- **Default**: `undefined`
- **Description**: [Description](https://github.com/soldair/node-qrcode#maskpattern).

### `toSJISFunc`
- **Type**: `function`
- **Default**: `undefined`
- **Description**: [Description](https://github.com/soldair/node-qrcode#tosjisfunc).

### `errorCorrectionLevel`
- **Type**: `'L' | 'M' | 'Q' | 'H'`
- **Default**: `'M'`
- **Description**: [Description](https://github.com/soldair/node-qrcode#errorCorrectionLevel).

### `renderCustomPieceItem`
- **Type**: `RenderCustomPieceItem`
- **Default**: `undefined`
- **Description**: Render custom piece of QR code. It must return svg component. If it defined, previous piece and eyes configurations won't be work. See [#RenderCustomPieceItem](#RenderCustomPieceItem).

### `renderBackground`
- **Type**: `(pieceSize: number, bitMatrix: number[][]) => SvgProps['children']`
- **Default**: `undefined`
- **Description**: Ability to add any additional svg components behind qr code.

### `children`
- **Type**: `(pieceSize: number, bitMatrix: number[][]) => SvgProps['children']`
- **Default**: `undefined`
- **Description**: Ability to add any additional svg components as children.

### `...rest <Svg/> props`
- **Description**: Any additional props accepted by the underlying `<Svg/>` component.

```

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

### Apply Radial Gradient Fill to QR Code

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Applies a radial gradient fill to the QR code pieces. This feature allows for circular gradient effects originating from a customizable center point with adjustable radius and color stops. It requires the 'react-native-qrcode-styled' library.

```tsx
import QRCodeStyled from 'react-native-qrcode-styled';
import { StyleSheet } from 'react-native';

export function RadialGradientQR() {
  return (
    <QRCodeStyled
      data="Radial Gradient"
      style={styles.svg}
      padding={20}
      pieceBorderRadius="50%"
      gradient={{
        type: 'radial',
        options: {
          center: [0.5, 0.5],   // Center point (0-1 range)
          radius: [1, 1],       // Radius X and Y (0-1 range)
          colors: ['#ff7bc6', '#0f0080'],
          locations: [0, 1],
        },
      }}
    />
  );
}

const styles = StyleSheet.create({
  svg: {
    backgroundColor: 'white',
    borderRadius: 36,
    overflow: 'hidden',
  },
});
```

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

### Type Definitions

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/README.md

This section provides detailed definitions for custom types used within the library, including GradientProps, EyeOptions, AllEyesOptions, and related types, which are crucial for understanding and utilizing the advanced customization options.

```APIDOC
### `GradientProps`
```typescript
type GradientType = 'linear' | 'radial';

type LinearGradientProps = {
  colors?: ColorValue[];
  start?: [number, number]; // start point [x, y] (0 -> 0%, 1 -> 100%)
  end?: [number, number]; // end point [x, y] (0 -> 0%, 1 -> 100%)
  locations?: number[]; // list of colors positions (0 -> 0%, 1 -> 100%)
};

type RadialGradientProps = {
  colors?: ColorValue[];
  center?: [number, number]; // center point [x, y] (0 -> 0%, 1 -> 100%)
  radius?: [number, number]; // radiusXY [x, y] (0 -> 0%, 1 -> 100%)
  locations?: number[]; // list of colors positions (0 -> 0%, 1 -> 100%)
};

type GradientProps = {
  type?: GradientType;
  options?: LinearGradientProps | RadialGradientProps;
};
```

### `EyeOptions`
```typescript
type EyeOptions = {
  scale?: PathProps['scale']; // scaleXY | [scaleX, scaleY]
  rotation?: string | number;
  borderRadius?: number | number[];
  color?: ColorValue;
  gradient?: GradientProps;
  stroke?: ColorValue;
  strokeWidth?: number;
}
```

### `AllEyesOptions`
```typescript
type EyePosition = 'topLeft' | 'topRight' | 'bottomLeft';

type AllEyesOptions = { [K in EyePosition]?: EyeOptions }
```
```

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

### All Eyes Options for QR Code Customization

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/README.md

Provides a way to configure the 'eyes' of the QR code across all positions (top-left, top-right, bottom-left). It uses the `EyeOptions` type for each specific eye position.

```typescript
type EyePosition = 'topLeft' | 'topRight' | 'bottomLeft';

type AllEyesOptions = { [K in EyePosition]?: EyeOptions }
```

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

### Embed Logo in QR Code

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Embeds a logo in the center of the QR code, automatically hiding QR pieces behind it for better visibility. The logo size is dynamically adjusted based on the error correction level to maintain scannability. Supports local images, remote URLs, and custom positioning. Requires 'react-native-qrcode-styled'.

```tsx
import QRCodeStyled from 'react-native-qrcode-styled';
import { StyleSheet, View } from 'react-native';

export function QRWithLogo() {
  return (
    <View style={styles.root}>
      <QRCodeStyled
        data="QR code with logo"
        style={styles.svg}
        padding={20}
        color="#000"
        errorCorrectionLevel="H"  // Higher error correction for logo
        innerEyesOptions={{
          borderRadius: '20%',
          color: '#000',
        }}
        outerEyesOptions={{
          borderRadius: '30%',
          color: '#ffa114',
        }}
        logo={{
          href: require('./assets/logo.png'),  // Local image
          // href: 'https://example.com/logo.png',  // Remote image
          // href: { uri: 'https://example.com/logo.png' },  // Object format
          padding: 4,
          scale: 1,                // Adjust logo size (default: 1)
          hidePieces: true,        // Hide QR pieces behind logo (default: true)
          // x: 50,                // Custom X position (optional)
          // y: 50,                // Custom Y position (optional)
          onChange: (logoArea) => console.log('Logo area:', logoArea),
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  svg: {
    backgroundColor: '#fff',
    borderRadius: 20,
    overflow: 'hidden',
  },
});
```

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

### Define Logo Options for QR Code Styling

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/README.md

Defines the types for logo area and logo options used in styling QR codes. Logo options include properties for hiding pieces, padding, scaling, and an optional change handler, along with SVG image props.

```typescript
export type LogoArea = {
  x: number;
  y: number;
  width: number;
  height: number;
};

export type LogoOptions = {
  hidePieces?: boolean;
  padding?: number;
  scale?: number;
  onChange?: (logoArea?: LogoArea) => void;
} & SVGImageProps;
```

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

### Gradient Types and Options for QR Code Styling

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/README.md

Defines the types for gradient configurations in QR codes, including linear and radial gradients. It specifies properties like colors, start/end points, center, radius, and locations for gradient effects.

```typescript
type GradientType = 'linear' | 'radial';

type LinearGradientProps = {
  colors?: ColorValue[];
  start?: [number, number]; // start point [x, y] (0 -> 0%, 1 -> 100%)
  end?: [number, number]; // end point [x, y] (0 -> 0%, 1 -> 100%)
  locations?: number[]; // list of colors positions (0 -> 0%, 1 -> 100%)
};

type RadialGradientProps = {
  colors?: ColorValue[];
  center?: [number, number]; // center point [x, y] (0 -> 0%, 1 -> 100%)
  radius?: [number, number]; // radiusXY [x, y] (0 -> 0%, 1 -> 100%)
  locations?: number[]; // list of colors positions (0 -> 0%, 1 -> 100%)
};

type GradientProps = {
  type?: GradientType;
  options?: LinearGradientProps | RadialGradientProps;
};
```

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

### Troubleshoot Gaps Between QR Code Pieces on Android

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/README.md

Provides a solution for gaps appearing between QR code pieces on Android devices. It suggests adjusting the `pieceScale` prop of the `QRCodeStyled` component to slightly larger values.

```jsx
<QRCodeStyled
  ...
  pieceScale={1.03} // or any between of 1.01 - 1.04
/>
```

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

### Eye Options for QR Code Customization

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/README.md

Defines the structure for customizing the appearance of the QR code's 'eyes' (the corner modules). It allows for individual control over scale, rotation, border radius, color, gradient, stroke, and stroke width.

```typescript
type EyeOptions = {
  scale?: PathProps['scale']; // scaleXY | [scaleX, scaleY]
  rotation?: string | number;
  borderRadius?: number | number[];
  color?: ColorValue;
  gradient?: GradientProps;
  stroke?: ColorValue;
  strokeWidth?: number;
}
```

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

### Customize QR Code Eye Shapes and Styles

Source: https://context7.com/tokkozhin/react-native-qrcode-styled/llms.txt

Allows independent customization of the three positioning eyes (corners) of the QR code. Both outer squares and inner dots can be styled with individual colors, gradients, border radius, scale, and rotation. This functionality relies on the 'react-native-qrcode-styled' library.

```tsx
import QRCodeStyled from 'react-native-qrcode-styled';
import { StyleSheet } from 'react-native';

export function CustomEyesQR() {
  return (
    <QRCodeStyled
      data="Custom Eyes"
      style={styles.svg}
      padding={20}
      pieceBorderRadius="50%"
      gradient={{
        type: 'radial',
        options: {
          center: [0.5, 0.5],
          radius: [1, 1],
          colors: ['#ff7bc6', '#0f0080'],
          locations: [0, 1],
        },
      }}
      outerEyesOptions={{
        topLeft: {
          borderRadius: ['40%', '40%', 0, '40%'],
        },
        topRight: {
          borderRadius: ['40%', '40%', '40%', 0],
        },
        bottomLeft: {
          borderRadius: ['40%', 0, '40%', '40%'],
        },
      }}
      innerEyesOptions={{
        borderRadius: '50%',
        scale: 0.85,
      }}
    />
  );
}

const styles = StyleSheet.create({
  svg: {
    backgroundColor: 'white',
    borderRadius: 36,
    overflow: 'hidden',
  },
});
```

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

### Define Custom Piece Rendering Function Type

Source: https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/README.md

Defines the TypeScript type for a function that renders a custom piece of the QR code. It accepts coordinates, piece size, QR code size, and the bit matrix as input, returning a React element.

```typescript
type RenderCustomPieceItem = ({x, y, pieceSize, qrSize, bitMatrix}: {
  x: number;
  y: number;
  pieceSize: number;
  qrSize: number;
  bitMatrix: number[][];
}) => React.ReactElement | null;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.