### Start Example App Packager

Source: https://github.com/margelo/react-native-blur/blob/master/CONTRIBUTING.md

Starts the Metro server for the example application. Changes in JavaScript code will be reflected without a rebuild.

```sh
yarn example start
```

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

### Project Setup Script

Source: https://github.com/margelo/react-native-blur/blob/master/CONTRIBUTING.md

Installs all project dependencies and pods for a complete development environment setup.

```sh
yarn bootstrap
```

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

### Run Example App

Source: https://github.com/margelo/react-native-blur/blob/master/README.md

Run the example application on both Android and iOS platforms.

```bash
yarn example android/ios
```

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

### Install Project Dependencies

Source: https://github.com/margelo/react-native-blur/blob/master/CONTRIBUTING.md

Run this command in the root directory to install all necessary project dependencies.

```sh
yarn
```

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

### Run Example App on Android

Source: https://github.com/margelo/react-native-blur/blob/master/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator. Native code changes require a rebuild.

```sh
yarn example android
```

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

### Install Native Dependencies (iOS)

Source: https://github.com/margelo/react-native-blur/blob/master/README.md

After adding the package, run this command in the 'ios' directory to install native dependencies.

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

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

### Run Example App on iOS

Source: https://github.com/margelo/react-native-blur/blob/master/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device. Native code changes require a rebuild.

```sh
yarn example ios
```

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

### Install @react-native-community/blur

Source: https://github.com/margelo/react-native-blur/blob/master/README.md

Use this command to add the blur component to your project.

```bash
yarn add @react-native-community/blur
```

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

### VibrancyView Example for iOS

Source: https://github.com/margelo/react-native-blur/blob/master/README.md

This example shows how to use VibrancyView to make nested content appear more vibrant. VibrancyView is only supported on iOS and requires nested views. It shares the same properties as BlurView.

```javascript
import { VibrancyView } from "@react-native-community/blur";

export default function Menu() {
  return (
    <Image source={{ uri }} style={styles.absolute}>
      <VibrancyView blurType="light" style={styles.flex}>
      <Text>Hi, I am some vibrant text.</Text>
      </VibrancyView>
    </Image>
  )
}
```

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

### Complete BlurView Example for iOS and Android

Source: https://github.com/margelo/react-native-blur/blob/master/README.md

This example demonstrates how to use BlurView to blur an image and text while keeping other elements unblurred. It works on both iOS and Android. Ensure BlurView is positioned on top of the content to be blurred.

```javascript
import React, { Component } from "react";
import { View, Image, Text, StyleSheet } from "react-native";
import { BlurView } from "@react-native-community/blur";

export default function Menu() {
  return (
    <View style={styles.container}>
      <Image
        key={'blurryImage'}
        source={{ uri }}
        style={styles.absolute}
      />
      <Text style={styles.absolute}>Hi, I am some blurred text</Text>
      {/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}
      <BlurView
        style={styles.absolute}
        blurType="light"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
      />
      <Text>I'm the non blurred text because I got rendered on top of the BlurView</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center"
  },
  absolute: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  }
});
```

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

### Publish New Versions

Source: https://github.com/margelo/react-native-blur/blob/master/CONTRIBUTING.md

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

```sh
yarn release
```

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

### Clone Repository

Source: https://github.com/margelo/react-native-blur/blob/master/README.md

Clone the React Native Blur repository from GitHub.

```bash
git clone https://github.com/react-native-community/react-native-blur.git
```

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

### Run Unit Tests

Source: https://github.com/margelo/react-native-blur/blob/master/CONTRIBUTING.md

Executes the unit tests for the project using Jest.

```sh
yarn test
```

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

### Verify Code with TypeScript and ESLint

Source: https://github.com/margelo/react-native-blur/blob/master/CONTRIBUTING.md

Runs TypeScript for type checking and ESLint for code linting to ensure code quality and consistency.

```sh
yarn typescript
```

```sh
yarn lint
```

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

### Fix Formatting Errors

Source: https://github.com/margelo/react-native-blur/blob/master/CONTRIBUTING.md

Automatically fixes code formatting issues detected by ESLint and Prettier.

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

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

### BlurView Component

Source: https://github.com/margelo/react-native-blur/blob/master/README.md

The BlurView component allows you to apply blur effects to the content behind it. It supports various properties to customize the blur appearance and behavior across different platforms.

```APIDOC
## BlurView Component

### Description
Allows applying blur effects to the content behind the component. It supports various properties to customize the blur appearance and behavior across different platforms.

### Properties

#### blurType
- **Possible Values**: See `blurType` section below.
- **Default**: -
- **Platform**: All

#### blurAmount
- **Possible Values**: 0 - 100 (Note: Maximum on Android is 32, higher values will be clamped).
- **Default**: 10
- **Platform**: All

#### reducedTransparencyFallbackColor
- **Possible Values**: Any color.
- **Default**: -
- **Platform**: iOS only

#### blurRadius
- **Possible Values**: 0 - 25.
- **Default**: Matches iOS blurAmount
- **Platform**: Android only

#### downsampleFactor
- **Possible Values**: 0 - 25.
- **Default**: Matches iOS blurAmount
- **Platform**: Android only

#### overlayColor
- **Possible Values**: Any color.
- **Default**: Default color based on iOS blurType
- **Platform**: Android only

### blurType Options

#### Standard blurTypes
- **xlight**: extra light blur type
- **light**: light blur type
- **dark**: dark blur type
- **extraDark**: extra dark blur type (tvOS only)
- **regular**: regular blur type (iOS 10+ and tvOS only)
- **prominent**: prominent blur type (iOS 10+ and tvOS only)

#### iOS 13 specific blurTypes
- **chromeMaterial**: An adaptable blur effect that creates the appearance of the system chrome.
- **material**: An adaptable blur effect that creates the appearance of a material with normal thickness.
- **thickMaterial**: An adaptable blur effect that creates the appearance of a material that is thicker than normal.
- **thinMaterial**: An adaptable blur effect that creates the appearance of an ultra-thin material.
- **ultraThinMaterial**: An adaptable blur effect that creates the appearance of an ultra-thin material.
- **chromeMaterialDark**: A blur effect that creates the appearance of an ultra-thin material and is always dark.
- **materialDark**: A blur effect that creates the appearance of a thin material and is always dark.
- **thickMaterialDark**: A blur effect that creates the appearance of a material with normal thickness and is always dark.
- **thinMaterialDark**: A blur effect that creates the appearance of a material that is thicker than normal and is always dark.
- **ultraThinMaterialDark**: A blur effect that creates the appearance of the system chrome and is always dark.
- **chromeMaterialLight**: An adaptable blur effect that creates the appearance of the system chrome.
- **materialLight**: An adaptable blur effect that creates the appearance of a material with normal thickness.
- **thickMaterialLight**: An adaptable blur effect that creates the appearance of a material that is thicker than normal.
- **thinMaterialLight**: An adaptable blur effect that creates the appearance of a thin material.
- **ultraThinMaterialLight**: An adaptable blur effect that creates the appearance of an ultra-thin material.

### Usage Example
```javascript
import React from 'react';
import { View, Image, Text, StyleSheet } from 'react-native';
import { BlurView } from '@react-native-community/blur';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'your_image_uri' }}
        style={styles.absolute}
      />
      <Text style={styles.absolute}>Hi, I am some blurred text</Text>
      <BlurView
        style={styles.absolute}
        blurType="light"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
      />
      <Text>I'm the non blurred text because I got rendered on top of the BlurView</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center"
  },
  absolute: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  }
});

export default MyComponent;
```

### Fallback Behavior
If the accessibility setting 'Reduce Transparency' is enabled, `BlurView` will use `reducedTransparencyFallbackColor` as its background. If not provided, a default fallback color (white, black, or grey depending on `blurType`) will be used.
```

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

### VibrancyView Component

Source: https://github.com/margelo/react-native-blur/blob/master/README.md

The VibrancyView component enhances content by making it appear more vibrant. It shares properties with BlurView but is only supported on iOS and requires nested views.

```APIDOC
## VibrancyView Component

### Description
Enhances content by making it appear more vibrant. It shares properties with `BlurView` but is only supported on iOS and requires nested views.

### Properties

Uses the same properties as `BlurView`:
- `blurType`
- `blurAmount`
- `reducedTransparencyFallbackColor`

### Platform Support
- iOS only

### Usage Example
```javascript
import React from 'react';
import { View, Image, Text, StyleSheet } from 'react-native';
import { VibrancyView } from '@react-native-community/blur';

const MyComponent = () => {
  return (
    <Image source={{ uri: 'your_image_uri' }} style={styles.absolute}>
      <VibrancyView blurType="light" style={styles.flex}>
        <Text>Hi, I am some vibrant text.</Text>
      </VibrancyView>
    </Image>
  );
};

const styles = StyleSheet.create({
  absolute: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  },
  flex: {
    flex: 1
  }
});

export default MyComponent;
```
```

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