### Start Example App Packager

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application. This is necessary to run the example app on a device or simulator.

```sh
yarn example start
```

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

### Install @danielsaraldi/react-native-blur-view

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

Use npm, yarn, or pnpm to install the library. For iOS, run `pod install` after installation.

```sh
npm install @danielsaraldi/react-native-blur-view
# or
yarn add @danielsaraldi/react-native-blur-view
# or
pnpm add @danielsaraldi/react-native-blur-view
```

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

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

### Run Example App on iOS

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/CONTRIBUTING.md

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

```sh
yarn example ios
```

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

### Run Example App on Android

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/CONTRIBUTING.md

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

```sh
yarn example android
```

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

### Install Project Dependencies

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/CONTRIBUTING.md

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

```sh
yarn
```

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

### Install @danielsaraldi/react-native-blur-view

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/README.md

Install the package using npm, yarn, pnpm, or bun. For iOS, additional native dependencies need to be installed via CocoaPods.

```sh
npm install @danielsaraldi/react-native-blur-view
# or
yarn add @danielsaraldi/react-native-blur-view
# or
pnpm add @danielsaraldi/react-native-blur-view
# or
bun add @danielsaraldi/react-native-blur-view

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

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

### Start Metro Bundler

Source: https://github.com/danielaraldi/react-native-blur-view/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 before building or running the app.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

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

### Build and Run iOS App

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/example/README.md

After installing CocoaPods dependencies, use this command to build and run the iOS application. Ensure Metro is already running.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

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

### Install CocoaPods Dependencies for iOS

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/example/README.md

Before running the iOS app, install CocoaPods dependencies. Run 'bundle install' once to install CocoaPods itself, then 'bundle exec pod install' every time native dependencies are updated.

```sh
bundle install
```

```sh
bundle exec pod install
```

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

### Using BlurView with Modal

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

This example shows how to use BlurView with a Modal component. BlurTarget wraps the main screen content, and BlurView is placed inside the Modal overlay to apply blur across the transparent modal boundary.

```tsx
import { useRef, useState } from 'react';
import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
import { BlurTarget, BlurView } from '@danielsaraldi/react-native-blur-view';

export function ModalBlurExample() {
  const [visible, setVisible] = useState(false);
  const targetRef = useRef<View | null>(null);

  return (
    <>
      <Modal
        transparent
        statusBarTranslucent
        navigationBarTranslucent
        hardwareAccelerated
        visible={visible}
        onRequestClose={() => setVisible(false)}
      >
        {/* Full-screen blur behind the modal content */}
        <BlurView
          blurTarget={targetRef}
          type="dark"
          radius={25}
          style={StyleSheet.absoluteFillObject}
        />
        <View style={styles.modalBox}>
          <Text style={styles.modalTitle}>Confirm Action</Text>
          <Pressable onPress={() => setVisible(false)} style={styles.btn}>
            <Text style={styles.btnText}>Close</Text>
          </Pressable>
        </View>
      </Modal>

      {/* Screen content — the blur target */}
      <BlurTarget ref={targetRef} style={styles.screen}>
        <Text style={styles.screenText}>Main Screen Content</Text>
        <Pressable onPress={() => setVisible(true)} style={styles.btn}>
          <Text style={styles.btnText}>Open Modal</Text>
        </Pressable>
      </BlurTarget>
    </>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#dfe6e9' },
  screenText: { fontSize: 22, marginBottom: 24 },
  modalBox: {
    position: 'absolute',
    bottom: 40,
    left: 20,
    right: 20,
    backgroundColor: 'rgba(255,255,255,0.9)',
    borderRadius: 20,
    padding: 24,
    alignItems: 'center',
  },
  modalTitle: { fontSize: 18, fontWeight: '700', marginBottom: 16 },
  btn: { backgroundColor: '#0984e3', paddingHorizontal: 24, paddingVertical: 10, borderRadius: 10 },
  btnText: { color: 'white', fontWeight: '600' },
});
```

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

### Implement BlurView with BlurTarget

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

This example demonstrates how to use BlurView and BlurTarget components to create a blurred card effect. BlurTarget captures the background content, and BlurView renders the blur effect, referencing the BlurTarget via a ref. Ensure BlurTarget is used on Android.

```tsx
import { useRef } from 'react';
import { ImageBackground, StyleSheet, Text, View } from 'react-native';
import { BlurTarget, BlurView } from '@danielsaraldi/react-native-blur-view';

const BACKGROUND = { uri: 'https://picsum.photos/seed/blur/600/900' };

export function HeroCard() {
  const targetRef = useRef<View | null>(null);

  return (
    <View style={styles.container}>
      {/* BlurTarget wraps what the blur samples — required on Android */}
      <BlurTarget ref={targetRef} style={StyleSheet.absoluteFillObject}>
        <ImageBackground
          style={StyleSheet.absoluteFillObject}
          source={BACKGROUND}
          resizeMode="cover"
        />
      </BlurTarget>

      {/* BlurView renders the blur, pointing at the target */}
      <BlurView
        blurTarget={targetRef}   // Android: ref to BlurTarget
        type="light"             // blur colour style (default: 'light')
        radius={20}              // blur intensity 0–100 (default: 10)
        downscaleFactor={4}      // Android-only quality trade-off (default: 6)
        overlayColor="rgba(255,255,255,0.15)" // optional tint on top of blur
        reducedTransparencyFallbackColor="#f5f5f5" // iOS accessibility fallback
        style={styles.blurCard}
      >
        <Text style={styles.label}>Native Blur</Text>
      </BlurView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  blurCard: {
    position: 'absolute',
    bottom: 40,
    left: 20,
    right: 20,
    height: 100,
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
  },
  label: { fontSize: 18, fontWeight: '600', color: '#111' },
});

```

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

### Animated BlurView with react-native-reanimated

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

This example demonstrates how to animate BlurView using react-native-reanimated. BlurView is wrapped with forwardRef to enable Animated.createAnimatedComponent for smooth animated blur transitions.

```tsx
import { useRef } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';
import { BlurView, BlurTarget } from '@danielsaraldi/react-native-blur-view';

const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);

export function AnimatedBlur() {
  const targetRef = useRef<View | null>(null);
  const opacity = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));

  return (
    <View style={styles.container}>
      <BlurTarget ref={targetRef} style={StyleSheet.absoluteFillObject}>
        <View style={[StyleSheet.absoluteFillObject, { backgroundColor: '#74b9ff' }]} />
      </BlurTarget>

      <AnimatedBlurView
        blurTarget={targetRef}
        type="light"
        radius={20}
        style={[StyleSheet.absoluteFillObject, animatedStyle]}
      />

      <Text
        style={styles.btn}
        onPress={() => {
          opacity.value = withTiming(opacity.value > 0 ? 0 : 1, { duration: 500 });
        }}
      >
        Toggle Blur
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  btn: { fontSize: 18, color: 'white', fontWeight: '700', padding: 16 },
});
```

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

### BlurViewProps Interface for BlurView Component

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

Extends React Native's ViewProps with blur-specific props. Useful for creating typed wrapper components or extending the API. Example shows extending for custom corner radius.

```typescript
import type { BlurViewProps, BlurType } from '@danielsaraldi/react-native-blur-view';
import { BlurView } from '@danielsaraldi/react-native-blur-view';
import { useRef } from 'react';
import { View, StyleSheet } from 'react-native';

// Extending the interface for a custom component
interface FrostedPanelProps extends BlurViewProps {
  cornerRadius?: number;
}

export function FrostedPanel({
  cornerRadius = 12,
  style,
  children,
  ...blurProps
}: FrostedPanelProps) {
  return (
    <BlurView
      type="thin-material"
      radius={10}
      style={[{ borderRadius: cornerRadius, overflow: 'hidden' }, style] כמו
      {children}
    </BlurView>
  );
}

// Using typed constants
export const DEFAULT_BLUR: BlurType = 'material';
```

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

### Publish New Versions

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/CONTRIBUTING.md

Initiates the release process, which automatically handles version bumping, tagging, and publishing to npm using semantic-release.

```sh
yarn release
```

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

### Build and Run Android App

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/example/README.md

Execute this command in a new terminal window from your project root to build and run the Android application. Ensure Metro is already running.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

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

### Verify New Architecture Configuration

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/CONTRIBUTING.md

Check Metro logs for this message to confirm the app is running with the new architecture, indicated by 'fabric':true and 'concurrentRoot':true.

```sh
Running "BlurViewExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```

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

### Run Unit Tests

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/CONTRIBUTING.md

Executes the unit test suite using Jest.

```sh
yarn test
```

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

### Lint Project Files

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/CONTRIBUTING.md

Runs ESLint to check for code style and potential errors.

```sh
yarn lint
```

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

### Type Check Project Files

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/CONTRIBUTING.md

Runs TypeScript to verify the type safety of the project's code.

```sh
yarn typecheck
```

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

### Basic Usage of BlurView and VibrancyView

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/README.md

Demonstrates how to import and use BlurView and VibrancyView components in a React Native application. It shows how to apply blur effects to content and use BlurTarget to define the area to be blurred.

```tsx
import { useRef } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import {
  BlurView,
  BlurTarget,
  VibrancyView,
} from '@danielsaraldi/react-native-blur-view';
// ...

export default function App() {
  const targetRef = useRef<View | null>(null);
  // ...

  return (
    <>
      <BlurView blurTarget={targetRef} style={styles.blurView}>
        <Text style={styles.text}>BlurView</Text>
      </BlurView>

      <VibrancyView style={styles.vibrancyView}>
        <Text style={styles.text}>VibrancyView</Text>
      </VibrancyView>

      <BlurTarget ref={targetRef} style={styles.blurTarget}>
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={styles.contentContainer}
          showsVerticalScrollIndicator={false}
        >
          {/* ... */}
        </ScrollView>
      </BlurTarget>
    </>
  );
}

export const styles = StyleSheet.create({
  blurView: {
    position: 'absolute',
    top: 0,

    width: '100%',
    height: 256,

    justifyContent: 'center',
    alignItems: 'center',
  },

  vibrancyView: {
    position: 'absolute',
    top: 256,

    width: '100%',
    height: 256,

    justifyContent: 'center',
    alignItems: 'center',
  },

  title: {
    fontSize: 24,
    fontWeight: 'bold',

    color: 'white',
  },

  main: {
    flex: 1,
  },

  content: {
    padding: 20,

    gap: 8,
  },
});

```

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

### Migrate BlurView and BlurTarget to v2.0.0 API

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/README.md

Illustrates the old v1.x API for BlurView and BlurTarget, and the new v2.0.0 API using refs. Use the new API for version 2.0.0 and above.

```tsx
// ❌ Old API (v1.x) - Deprecated
<BlurView targetId="target" style={styles.blurView}>
  {/** ... ** /}
</BlurView>

<BlurTarget id="target" style={styles.blurTarget}>
  {/** ... ** /}
</BlurTarget>
```

```tsx
// ✅ New API (v2.0.0) - Current
import { View } from 'react-native';
// ...
const targetRef = useRef<View | null>(null);
```

```tsx
// ✅ New API (v2.0.0) - Current
<BlurView blurTarget={targetRef} style={styles.blurView}>
  {/** ... ** /}
</BlurView>

<BlurTarget ref={targetRef} style={styles.blurTarget}>
  {/** ... ** /}
</BlurTarget>
```

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

### VibrancyViewProps / BlurTargetProps

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

Interfaces for VibrancyView and BlurTarget components. VibrancyViewProps extends ViewProps with iOS-specific vibrancy props. BlurTargetProps extends ViewProps with no additional members.

```APIDOC
## VibrancyViewProps / BlurTargetProps

### Description
Interfaces for the `VibrancyView` and `BlurTarget` components. `VibrancyViewProps` extends `ViewProps` with iOS-specific vibrancy props. `BlurTargetProps` extends `ViewProps` with no additional members (the ref is handled via `forwardRef`).

### Props
- `VibrancyViewProps`: Extends `ViewProps` with properties for vibrancy effects.
- `BlurTargetProps`: Extends `ViewProps`.
```

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

### VibrancyViewProps and BlurTargetProps Interfaces

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

Interfaces for VibrancyView and BlurTarget components. VibrancyViewProps extends ViewProps with iOS-specific vibrancy props. BlurTargetProps extends ViewProps, with ref handled via forwardRef.

```typescript
import type {
  VibrancyViewProps,
  BlurTargetProps,
  EffectStyle,
  BlurType,
} from '@danielsaraldi/react-native-blur-view';
import { VibrancyView, BlurTarget } from '@danielsaraldi/react-native-blur-view';
import { useRef } from 'react';
import { View, StyleSheet } from 'react-native';

interface LabelBadgeProps extends VibrancyViewProps {
  prominent?: boolean;
}

export function LabelBadge({ prominent = false, ...props }: LabelBadgeProps) {
  const effectStyle: EffectStyle = prominent ? 'fill' : 'label';
  const blurType: BlurType = prominent ? 'thick-material' : 'thin-material';
  return (
    <VibrancyView
      effectStyle={effectStyle}
      type={blurType}
      radius={12}
      {...props}
    />
  );
}

// BlurTargetProps — used when building a custom BlurTarget wrapper
interface SnapContainerProps extends BlurTargetProps {
  onLayout?: () => void;
}

export function SnapContainer(props: SnapContainerProps) {
  const ref = useRef<View | null>(null);
  return <BlurTarget ref={ref} {...props} />;
}
```

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

### Fix Linting Errors

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/CONTRIBUTING.md

Automatically fixes formatting and style issues detected by ESLint.

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

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

### TypeScript Type Definitions for Blur View

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/README.md

Imports and defines types for BlurType, EffectStyle, BlurViewProps, BlurTargetProps, and VibrancyProps. Useful for integrating with TypeScript projects.

```ts
import {
  BlurType,
  EffectStyle,
  BlurViewProps,
  BlurTargetProps,
  VibrancyProps,
} from '@danielsaraldi/react-native-blur-view';

export const INITIAL_BLUR_TYPE: BlurType = 'light';
export const INITIAL_EFFECT_STYLE: EffectStyle = 'label';

export interface CustomBlurViewProps extends BlurViewProps {
  // ...
}

export interface CustomBlurTargetProps extends BlurTargetProps {
  // ...
}

export interface CustomVibrancyViewProps extends VibrancyProps {
  // ...
}
```

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

### BlurTarget Component

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/README.md

Information about the BlurTarget component, used for identifying blur targets on Android.

```APIDOC
## BlurTarget Component

### Description
The `BlurTarget` component extends `View` and is available for Android only. It's used in conjunction with `BlurView` to apply blur effects.

### Properties
- **ref** (Ref) - Required/Optional - Ref of the `BlurTarget` component to be identified by the `BlurView` component in the tree. (Android only)

**Note**: A `BlurTarget` may not contain a `BlurView` that targets the same `BlurTarget`. It can contain other `BlurTargets` and `BlurViews`.
```

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

### EffectStyle

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

Union type for VibrancyView content adaptation (iOS only). Controls how child content inside a VibrancyView adapts to background luminosity. Requires iOS 13+.

```APIDOC
## EffectStyle

### Description
Union type for `VibrancyView` content adaptation (iOS only). `EffectStyle` controls how child content rendered inside a `VibrancyView` adapts to the background luminosity. Label variants progressively reduce opacity; fill variants render translucent rectangles; separator is designed for thin divider lines. All values require iOS 13+.

### Available Values
- `label`
- `secondary-label`
- `tertiary-label`
- `quaternary-label`
- `fill`
- `secondary-fill`
- `tertiary-fill`
- `separator`
```

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

### VibrancyView Properties

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/README.md

Properties for the VibrancyView component to apply vibrancy effects on iOS.

```APIDOC
## VibrancyView Properties

### Description
Properties for the `VibrancyView` component, which applies a vibrancy effect to children content on iOS.

### Properties
- **type** (string) - Required/Optional - Blur type of the overlay. (iOS only)
- **effectStyle** (string) - Required/Optional - Effect style to vibrancy content. (iOS only)
- **radius** (number) - Required/Optional - Blur radius `0` - `100`. (iOS only)
- **overlayColor** (string) - Required/Optional - Add the overlay color about component. (iOS only)
- **reducedTransparencyFallbackColor** (string) - Required/Optional - Background color about vibrancy effect when reduced transparency is enabled. (iOS only)

**Note**: Values for `radius` outside the `0`-`100` range will be clipped.
```

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

### Using BlurView with ImageBackground

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/README.md

When using ImageBackground, BlurTarget should be its parent, and BlurView should be a sibling to achieve the blur effect. The blurTarget prop on BlurView is required for Android.

```tsx
import { useRef } from 'react';
import { ImageBackground, View } from 'react-native';
import { BlurTarget, BlurView } from '@danielsaraldi/react-native-blur-view';
// ...

export function MyScreen() {
  const targetRef = useRef<View | null>(null);
  // ...

  return (
    <>
      <View style={styles.blurViewWrapper}>
        <BlurView
          blurTarget={targetRef}
          style={styles.blurView}
          downscaleFactor={4}
        >
          {/** ... ** /}
        </BlurView>
      </View>

      <BlurTarget ref={targetRef} style={styles.blurTarget}>
        <ImageBackground
          style={styles.background}
          source={{ uri: 'https://picsum.photos/seed/picsum/600/900' }}
          resizeMode="cover"
        />
      </BlurTarget>
    </>
  );
}
```

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

### BlurView Properties

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/README.md

Properties available for the BlurView component to customize blur effects.

```APIDOC
## BlurView Properties

### Description
Properties to configure the blur effect.

### Properties
- **blurTarget** (Ref) - Required/Optional - Ref of the `BlurTarget` component to be identified by the `BlurView` component in the tree. (Android only)
- **type** (string) - Required/Optional - Blur type of the overlay. (All platforms)
- **radius** (number) - Required/Optional - Blur radius `0` - `100`. (All platforms)
- **downscaleFactor** (number) - Required/Optional - Downscale factor `0` - `100`. (Android only)
- **overlayColor** (string) - Required/Optional - Add the overlay color about component. (All platforms)
- **androidColor** (string) - Required/Optional - Overrides the `type` property color. (Android only)
- **reducedTransparencyFallbackColor** (string) - Required/Optional - Background color about blur effect when reduced transparency is enabled. (iOS only)

**Note**: Values for `radius` or `downscaleFactor` outside the `0`-`100` range will be clipped.
```

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

### BlurViewProps

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

Full TypeScript interface for BlurView. Extends React Native's ViewProps and adds blur-specific props.

```APIDOC
## BlurViewProps

### Description
Full TypeScript interface for `BlurView`. Extends React Native's `ViewProps` and adds all blur-specific props. Importing it directly allows creating typed wrapper components or extending the API.

### Props
Extends `ViewProps` and includes properties for blur effects.
```

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

### EffectStyle Union Type for VibrancyView Content Adaptation

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

Controls how child content inside VibrancyView adapts to background luminosity on iOS. Requires iOS 13+. Variants include label, fill, and separator styles.

```typescript
import type { EffectStyle } from '@danielsaraldi/react-native-blur-view';

// All available values:
const ALL_EFFECT_STYLES: EffectStyle[] = [
  'label',
  'secondary-label',
  'tertiary-label',
  'quaternary-label',
  'fill',
  'secondary-fill',
  'tertiary-fill',
  'separator',
];

const INITIAL_EFFECT_STYLE: EffectStyle = 'label';
```

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

### Using BlurView with Modal

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/README.md

For Modals, BlurTarget should be a parent of the content screen, and BlurView should be inside the Modal. The blurTarget prop on BlurView is required for Android.

```tsx
import { useRef, useState } from 'react';
import { Modal, View } from 'react-native';
import { BlurTarget, BlurView } from '@danielsaraldi/react-native-blur-view';
// ...

export function MyScreen() {
  const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
  const targetRef = useRef<View | null>(null);
  // ...

  return (
    <>
      <Modal
        transparent
        statusBarTranslucent
        navigationBarTranslucent
        hardwareAccelerated
        visible={isOpenModal}
        onRequestClose={() => setIsOpenModal(false)}
        style={styles.modal}
      >
        <BlurView blurTarget={targetRef} style={styles.blurView} />

        <View style={styles.modalContent}>{/* ... */}</View>
      </Modal>

      <BlurTarget ref={targetRef} style={styles.blurTarget}>
        {/* ... */}
      </BlurTarget>
    </>
  );
}
```

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

### Using BlurView with ScrollView

Source: https://github.com/danielaraldi/react-native-blur-view/blob/main/README.md

Place BlurView elements inside a ScrollView and ensure the content to be blurred is a child of BlurTarget. The blurTarget prop on BlurView is required for Android.

```tsx
import { useRef } from 'react';
import { ImageBackground, ScrollView, Text, View } from 'react-native';
import { BlurView, BlurTarget } from '@danielsaraldi/react-native-blur-view';
// ...

export function MyScreen() {
  const targetRef = useRef<View | null>(null);
  // ...

  return (
    <View style={styles.container}>
      <BlurTarget ref={targetRef} style={styles.blurTarget}>
        <ImageBackground
          style={styles.background}
          source={BACKGROUND}
          resizeMode="cover"
        />
      </BlurTarget>

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.contentContainer}
        showsVerticalScrollIndicator={false}
      >
        <BlurView blurTarget={targetRef} style={styles.blurView}>
          <Text style={styles.text}>BlurView 1</Text>
        </BlurView>

        <BlurView blurTarget={targetRef} style={styles.blurView}>
          <Text style={styles.text}>BlurView 2</Text>
        </BlurView>

        <BlurView blurTarget={targetRef} style={styles.blurView}>
          <Text style={styles.text}>BlurView 3</Text>
        </BlurView>

        {/* ... */}
      </ScrollView>
    </View>
  );
}
```

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

### Using BlurTarget to Define Blur Area

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

Use BlurTarget to mark the content area to be blurred on Android. On iOS, it acts as a plain View. Ensure the ref is correctly forwarded to BlurView instances.

```tsx
import { useRef } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { BlurTarget, BlurView } from '@danielsaraldi/react-native-blur-view';

const ITEMS = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);

export function BlurredList() {
  const targetRef = useRef<View | null>(null);

  return (
    <View style={styles.root}>
      {/* Full-screen background that acts as the blur source */}
      <BlurTarget ref={targetRef} style={StyleSheet.absoluteFillObject}>
        <View style={[StyleSheet.absoluteFillObject, styles.gradientBg]} />
      </BlurTarget>

      {/* Sticky header rendered OUTSIDE the target, blurs the target behind it */}
      <BlurView
        blurTarget={targetRef}
        type="thin-material"
        style={styles.header}
      >
        <Text style={styles.headerText}>My List</Text>
      </BlurView>

      <ScrollView contentContainerStyle={styles.list}>
        {ITEMS.map((item) => (
          <Text key={item} style={styles.item}>
            {item}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1 },
  gradientBg: { backgroundColor: '#a8edea' },
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 60,
    zIndex: 10,
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  headerText: { fontSize: 20, fontWeight: 'bold' },
  list: { paddingTop: 70, paddingHorizontal: 16, gap: 12 },
  item: { fontSize: 16 },
});
```

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

### BlurType Union Type for Blur Styles

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

Defines all supported blur styles for BlurView and VibrancyView. On iOS, it maps to UIBlurEffect.Style. On Android, primary values use fixed RGBA colors with a radius of 35.

```typescript
import type { BlurType } from '@danielsaraldi/react-native-blur-view';

// All available values:
const ALL_BLUR_TYPES: BlurType[] = [
  // Cross-platform primary (radius applies)
  'x-light', 'light', 'dark',
  // Adaptive, iOS >= 10 (radius ignored)
  'regular', 'prominent',
  // iOS 13 material variants — auto (radius ignored)
  'chrome-material', 'material', 'thick-material', 'thin-material', 'ultra-thin-material',
  // iOS 13 material variants — always light (radius ignored)
  'chrome-material-light', 'material-light', 'thick-material-light',
  'thin-material-light', 'ultra-thin-material-light',
  // iOS 13 material variants — always dark (radius ignored)
  'chrome-material-dark', 'material-dark', 'thick-material-dark',
  'thin-material-dark', 'ultra-thin-material-dark',
];

// Usage in a typed component
interface ThemedBlurProps {
  style?: BlurType;
}

const INITIAL_BLUR_TYPE: BlurType = 'light';
```

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

### Using VibrancyView for iOS Vibrancy Effect

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

VibrancyView enhances content integration with the background on iOS by wrapping UIKit's UIVibrancyEffect. On Android, it functions as a regular View. Supports various BlurType and EffectStyle options.

```tsx
import { ImageBackground, ScrollView, StyleSheet, Text, View } from 'react-native';
import { VibrancyView } from '@danielsaraldi/react-native-blur-view';
import type { EffectStyle, BlurType } from '@danielsaraldi/react-native-blur-view';

const BG = { uri: 'https://picsum.photos/seed/vibrancy/600/900' };

const BADGES: { label: string; effectStyle: EffectStyle; blurType: BlurType }[] = [
  { label: 'Primary Label',    effectStyle: 'label',            blurType: 'material' },
  { label: 'Secondary Label',  effectStyle: 'secondary-label',  blurType: 'material' },
  { label: 'Fill',             effectStyle: 'fill',             blurType: 'thin-material' },
  { label: 'Secondary Fill',   effectStyle: 'secondary-fill',   blurType: 'thin-material' },
  { label: 'Separator',        effectStyle: 'separator',        blurType: 'ultra-thin-material' },
];

export function VibrancyShowcase() {
  return (
    <ImageBackground source={BG} style={styles.bg} resizeMode="cover">
      <ScrollView contentContainerStyle={styles.list}>
        {BADGES.map(({ label, effectStyle, blurType }) => (
          <VibrancyView
            key={label}
            type={blurType}           // underlying blur style
            effectStyle={effectStyle} // content adaptation (iOS 13+, default: 'label')
            radius={15}               // blur radius, ignored for material types
            reducedTransparencyFallbackColor="#eeeeee"
            style={styles.badge}
          >
            <Text style={styles.badgeText}>{label}</Text>
          </VibrancyView>
        ))}
      </ScrollView>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  bg: { flex: 1 },
  list: { padding: 24, gap: 16, alignItems: 'center' },
  badge: {
    width: 260,
    height: 56,
    borderRadius: 14,
    justifyContent: 'center',
    alignItems: 'center',
  },
  badgeText: { fontSize: 16, fontWeight: '500' },
});
```

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

### BlurType

Source: https://context7.com/danielaraldi/react-native-blur-view/llms.txt

Union type for all supported blur styles. Controls the color tint and visual style of a BlurView or VibrancyView. On iOS it maps directly to UIBlurEffect.Style. On Android, primary values use fixed RGBA colors with a radius pinned to 35; other values simulate iOS appearance.

```APIDOC
## BlurType

### Description
Union type for all supported blur styles. Controls the color tint and visual style of a `BlurView` or `VibrancyView`. On iOS it maps directly to `UIBlurEffect.Style`. On Android the three primary values (`x-light`, `light`, `dark`) use fixed RGBA colours with a radius pinned to 35; the remaining values simulate the equivalent iOS appearance.

### Available Values
- `x-light`
- `light`
- `dark`
- `regular`
- `prominent`
- `chrome-material`
- `material`
- `thick-material`
- `thin-material`
- `ultra-thin-material`
- `chrome-material-light`
- `material-light`
- `thick-material-light`
- `thin-material-light`
- `ultra-thin-material-light`
- `chrome-material-dark`
- `material-dark`
- `thick-material-dark`
- `thin-material-dark`
- `ultra-thin-material-dark`
```

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