### Setup Example App with Yarn

Source: https://github.com/jobtoday/react-native-image-viewing/blob/master/README.md

This command installs dependencies and starts the packager for the example application using Yarn. This allows for live changes to the component to be reflected in the example app.

```bash
yarn & yarn start
```

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

### Install Dependencies with Yarn

Source: https://github.com/jobtoday/react-native-image-viewing/blob/master/README.md

This command installs project dependencies using Yarn. It is typically run after cloning the repository.

```bash
yarn
```

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

### Install react-native-image-viewing using Yarn or npm

Source: https://github.com/jobtoday/react-native-image-viewing/blob/master/README.md

This snippet shows how to install the react-native-image-viewing library using either the Yarn or npm package managers. It's a prerequisite for using the component in your React Native project.

```bash
yarn add react-native-image-viewing
```

```bash
npm install --save react-native-image-viewing
```

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

### Basic Usage of ImageView Component in React Native

Source: https://github.com/jobtoday/react-native-image-viewing/blob/master/README.md

This example demonstrates the basic usage of the ImageView component in a React Native application. It shows how to import the component, define an array of image URIs, manage the visibility state, and render the ImageView with necessary props.

```jsx
import ImageView from "react-native-image-viewing";

const images = [
  {
    uri: "https://images.unsplash.com/photo-1571501679680-de32f1e7aad4",
  },
  {
    uri: "https://images.unsplash.com/photo-1573273787173-0eb81a833b34",
  },
  {
    uri: "https://images.unsplash.com/photo-1569569970363-df7b6160d111",
  },
];

const [visible, setIsVisible] = useState(false);

<ImageView
  images={images}
  imageIndex={0}
  visible={visible}
  onRequestClose={() => setIsVisible(false)}
/>
```

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

### ImageViewing Component Props

Source: https://github.com/jobtoday/react-native-image-viewing/blob/master/README.md

This section details the various props that can be passed to the ImageViewing component to customize its behavior and appearance.

```APIDOC
## Image Viewing Component Props

### Description
This component allows for displaying images in a modal with features like pinch-to-zoom, swipe gestures, and customizable headers/footers.

### Props

#### `images`
* **Type**: `ImageSource[]`
* **Required**: true
* **Description**: An array of image sources to be displayed in the viewer.

#### `keyExtractor`
* **Type**: `(imageSrc: ImageSource, index: number) => string`
* **Required**: false
* **Description**: A function that returns a unique key for each image, used for identification.

#### `imageIndex`
* **Type**: `number`
* **Required**: true
* **Description**: The current index of the image to be displayed when the modal opens.

#### `visible`
* **Type**: `boolean`
* **Required**: true
* **Description**: Controls the visibility of the image viewing modal.

#### `onRequestClose`
* **Type**: `function`
* **Required**: true
* **Description**: A callback function that is called when the user attempts to close the modal (e.g., by pressing the back button).

#### `onImageIndexChange`
* **Type**: `function`
* **Required**: false
* **Description**: A callback function that is called whenever the image index changes (e.g., by swiping to the next or previous image).

#### `onLongPress`
* **Type**: `function (event: GestureResponderEvent, image: ImageSource)`
* **Required**: false
* **Description**: A callback function that is invoked when an image is long-pressed. It receives the gesture event and the image source.

#### `delayLongPress`
* **Type**: `number`
* **Required**: false
* **Default**: `800`
* **Description**: The delay in milliseconds before `onLongPress` is triggered.

#### `animationType`
* **Type**: `'none' | 'fade' | 'slide'`
* **Required**: false
* **Default**: `'fade'`
* **Description**: Specifies the animation type for presenting the modal.

#### `presentationStyle`
* **Type**: `'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
* **Required**: false
* **Default**: `'fullScreen'`
* **Description**: The presentation style for the modal. On Android, use `'overFullScreen'` to hide the StatusBar.

#### `backgroundColor`
* **Type**: `string`
* **Required**: false
* **Default**: `HEX (#000000EE)`
* **Description**: The background color of the modal, specified in HEX format.

#### `swipeToCloseEnabled`
* **Type**: `boolean`
* **Required**: false
* **Default**: `true`
* **Description**: Enables or disables closing the modal by swiping up or down.

#### `doubleTapToZoomEnabled`
* **Type**: `boolean`
* **Required**: false
* **Default**: `true`
* **Description**: Enables or disables zooming the image by double-tapping on it.

#### `HeaderComponent`
* **Type**: `component | function`
* **Required**: false
* **Description**: A custom component or function to render as the header. It receives the current `imageIndex` as a prop.

#### `FooterComponent`
* **Type**: `component | function`
* **Required**: false
* **Description**: A custom component or function to render as the footer. It receives the current `imageIndex` as a prop.

### Types
* `ImageSource` can be either `ImageURISource` or `ImageRequireSource`.
```

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