### Install Example App Dependencies

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Install dependencies specifically for the example application. This can be done from the root or by navigating into the example directory.

```bash
npm --prefix example install
```

```bash
cd example
npm install
```

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

### Run Example App on Android

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Install and run the example application on an Android emulator or device.

```bash
cd example
npm run android
```

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

### Start Metro Bundler for Example App

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Start the Metro bundler from the example app directory to prepare for running the app.

```bash
cd example
npm start
```

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

### Run Example App on iOS

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Install and run the example application on an iOS simulator or device.

```bash
cd example
npm run ios
```

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

### Use Locally Bundled PDF

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

This example shows how to load and display a PDF file that is bundled with your application's assets. It uses `useAssets` to load the asset and `downloadAsync` to get its local URI before rendering it with `PdfView`.

```jsx
import { PdfView } from '@kishannareshpal/expo-pdf';
import { useAssets } from 'expo-asset';
import { useState, useEffect } from 'react';

export const App = () => {
  const [assets] = useAssets([require('./assets/sample.pdf')]);
  const [uri, setUri] = useState < string > null;

  useEffect(() => {
    if (!assets?.length) {
      return;
    }

    assets[0]
      .downloadAsync()
      .then((asset) => setUri(asset.localUri))
      .catch(console.error);
  }, [assets]);

  if (!uri) {
    return null;
  }

  return <PdfView style={{ flex: 1 }} uri={uri} />;
};
```

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

### Install Node.js LTS

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Install the Node.js LTS version specified by the project. Recommended to use nvm or mise.

```bash
cat .node-version
```

```bash
# Suggested with nvm
nvm install --lts
nvm use --lts
```

```bash
# Suggested with mise
mise install node@lts
mise use -g node@lts
```

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

### Install Dependencies

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Install project dependencies using npm. This command should be run after cloning the repository.

```bash
npm install
```

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

### Install Expo PDF Viewer

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

Use this command to install the library for Expo projects.

```bash
npx expo install @kishannareshpal/expo-pdf
```

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

### Load File Picked Using System Picker

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

This example demonstrates how to allow users to pick a PDF file using the system's file picker and then display it. It uses `expo-document-picker` to select the file and `File.localUri` to get the path for `PdfView`.

```jsx
import { File } from 'expo-file-system';
import * as DocumentPicker from 'expo-document-picker';
import { PdfView } from '@kishannareshpal/expo-pdf';
import { useState } from 'react';
import { View, Button, Text } from 'react-native';

export const App = () => {
  const [uri, setUri] = useState < string | null > (null);

  const pickFile = async () => {
    try {
      const result = await DocumentPicker.getDocumentAsync({ copyToCacheDirectory: true });
      const file = new File(result.assets[0]);
      setUri(file.localUri);
    } catch (error) {
      console.error(error);
    }
  };

  if (!uri) {
    return (
      <View>
        <Button onPress={pickFile}>Pick a file</Button>
        <Text>Please pick a file</Text>
      </View>
    );
  }

  return (
    <View>
      <Button onPress={pickFile}>Pick a file</Button>

      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {uri ? (
          <PdfView
            style={{ flex: 1 }}
            uri={uri}
          />
        ) : (
          <Text>Please pick a file</Text>
        )}
      </View>
    </View>
  );
};
```

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

### Clone and Setup Repository

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Clone the repository and set up the upstream remote for tracking changes.

```bash
git clone https://github.com/your-username/expo-pdf.git
cd expo-pdf
```

```bash
git remote add upstream https://github.com/kishannareshpal/expo-pdf.git
```

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

### Install CocoaPods Dependencies

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

After installing the package in a bare React Native project, run this command to install native dependencies.

```bash
npx pod-install
```

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

### Install Bare React Native PDF Viewer

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

Install the library for bare React Native projects using npm, bun, pnpm, or yarn.

```bash
npm add @kishannareshpal/expo-pdf

# bun add @kishannareshpal/expo-pdf
# pnpm add @kishannareshpal/expo-pdf
# yarn add @kishannareshpal/expo-pdf
```

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

### Load PDF from Remote URL

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

This example shows how to download a PDF from a remote URL and display it. It uses `File.downloadFileAsync` to save the file to the cache directory and then renders it using `PdfView`.

```jsx
import { File, Directory, Paths } from 'expo-file-system';
import { PdfView } from '@kishannareshpal/expo-pdf';
import { useState } from 'react';
import { View, Button, Text } from 'react-native';

export const App = () => {
  const [uri, setUri] = useState < string | null > (null);

  const loadFromUrl = async (url: string) => {
    const destination = new Directory(Paths.cache, 'pdfs');

    try {
      await destination.create();
      const output = await File.downloadFileAsync(url, destination.uri);
      setUri(output.uri);
    } catch (error) {
      console.error(error);
    }
  };

  if (!uri) {
    return (
      <View>
        <Button onPress={() => loadFromUrl('https://pdfobject.com/pdf/sample.pdf')}>Download and load from URL</Button>
        <Text>Please download the file to preview</Text>
      </View>
    );
  }

  return (
    <View>
      <Button onPress={() => loadFromUrl('https://pdfobject.com/pdf/sample.pdf')}>
        Download and load from URL
      </Button>

      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {uri ? (
          <PdfView
            style={{ flex: 1 }}
            uri={uri}
          />
        ) : (
          <Text>Please download the file to preview</Text>
        )}
      </View>
    </View>
  );
};
```

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

### StyledPdfView HOC Setup

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

Wraps the PdfView component with uniwind to enable className support.

```tsx
// src/lib/styled.tsx
import { PdfView as PdfViewPrimitive } from '@kishannareshpal/expo-pdf';
import { ComponentProps } from 'react';
import { withUniwind } from 'uniwind';

export const StyledPdfViewPrimitive = withUniwind(PdfViewPrimitive);
export type StyledPdfViewPrimitiveProps = ComponentProps<
  typeof StyledPdfViewPrimitive
>;
```

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

### Commit changes with conventional commits

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Use conventional commit messages for clarity and automation. Examples include `feat:`, `fix:`, `docs:`, `style:`, `refactor:`, `test:`, and `chore:`.

```bash
git add .
git commit -m "feat: add support for password-protected PDFs"
```

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

### StyledPdfView Usage

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

Example of using the styled component with TailwindCSS classes.

```tsx
// src/app.tsx
import { StyledPdfView } from '@/lib/styled';

const App = () => {
  return (
    <StyledPdfView
      className="flex-1 rounded-4xl bg-red-500"
      uri="..."
      ...
    />
  )
}
```

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

### Open Android Project in Android Studio

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Command to open the Android native module project in Android Studio for editing.

```bash
npm run open:android
```

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

### Open iOS Project in Xcode

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Command to open the iOS native module project in Xcode for editing.

```bash
npm run open:ios
```

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

### Create a new branch

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Branching strategy for new features or bug fixes. Always branch from `main`.

```bash
git checkout -b feature/your-feature-name
# or
git checkout -b username/your-bug-fix
```

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

### Push changes to your fork

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/CONTRIBUTING.md

Push your local branch to your remote fork on GitHub. Ensure the branch name matches the one created earlier.

```bash
git push origin feature/your-feature-name
```

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

### ContentPadding Interface

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

Defines the padding structure for the PDF viewer container.

```ts
{ top?: number, left?: number, right?: number, bottom?: number }
```

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

### Styling with uniwind (TailwindCSS)

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

This section explains how to use uniwind and TailwindCSS for styling the Expo PDF Viewer component by wrapping it with the `withUniwind` Higher-Order Component (HOC).

```APIDOC
## Support for CSS using `uniwind` (TailwindCSS)

To use `uniwind` class names, you must wrap the component with the [`withUniwind`](https://docs.uniwind.dev/api/with-uniwind#withuniwind) Higher-Order Component (HOC). This allows the component to process the `className` prop and convert it into native styles.

### Example Usage

```tsx
// src/lib/styled.tsx
import { PdfView as PdfViewPrimitive } from '@kishannareshpal/expo-pdf';
import { ComponentProps } from 'react';
import { withUniwind } from 'uniwind';

export const StyledPdfViewPrimitive = withUniwind(PdfViewPrimitive);
export type StyledPdfViewPrimitiveProps = ComponentProps<
  typeof StyledPdfViewPrimitive
>;
```

```tsx
// src/app.tsx
import { StyledPdfView } from '@/lib/styled';

const App = () => {
  return (
    <StyledPdfView
      className="flex-1 rounded-4xl bg-red-500"
      uri="..."
      ...
    />
  )
}
```
```

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

### Expo PDF Viewer Component Props

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

This section details the available props for the Expo PDF Viewer component, including their types, whether they are required, and their default values.

```APIDOC
## Expo PDF Viewer Component Props

This section details the available props for the Expo PDF Viewer component, including their types, whether they are required, and their default values.

### Props

| Props | Required | Type | Description | Default |
|---|---|---|---|---|
| `uri` | Required | `string` | PDF document local file URI. | - |
| `password` | No | `string` | Password to apply for password-protected PDFs by on load. | `undefined` |
| `pagingEnabled` | No | `boolean` | Enables page-by-page snapping instead of free scrolling in vertical direction by default, unless the `horizontal` prop is provided to page horizontally instead. | `false` |
| `doubleTapToZoom` | No | `boolean` | Allows the user to zoom in/out by double-tapping the document. | `true` |
| `horizontal` | No | `boolean` | Renders and scrolls pages horizontally instead of vertically. If paging is enabled, then it changes horizontally. | `false` |
| `pageGap` | No | `number` | Space between adjacent pages. | `0` |
| `contentPadding` | No | `<a href="#contentpadding"><code>ContentPadding</code></a>` | Padding applied around the document inside the viewer container. | `{ top: 0, left: 0, right: 0, bottom: 0 }` |
| `fitMode` | No | `<a href="#fitmode"><code>FitMode</code></a>` | How the document is scaled to fit within the viewer. | `"width"` |
| `pageColorInverted` | No | `boolean` | Whether the rendered page should have its color inverted (useful to simulate dark mode) | `false` |
| `autoScale` | No | `boolean` | Automatically rescales the document when its or its parent’s layout changes after initial render. | `true` |
| `onLoadComplete` | No | `<a href="#onloadcompleteeventpayload"><code>(OnLoadCompleteEventPayload) =&gt; void</code></a>` | Triggered once the document and its metadata have finished loading. | - |
| `onPageChanged` | No | `<a href="#onpagechangedeventpayload"><code>(OnPageChangedEventPayload) =&gt; void</code></a>` | Triggered when the currently visible page index changes. | - |
| `onError` | No | `<a href="#onerroreventpayload"><code>(OnErrorEventPayload) =&gt; void</code></a>` | Triggered when the PDF fails to load, decrypt, or render. | - |

### API Reference

#### `ContentPadding`

```ts
{
  top?: number,
  left?: number,
  right?: number,
  bottom?: number
}
```

#### `FitMode`

```ts
'width' | 'height' | 'both';
```

#### `OnLoadCompleteEventPayload`

```ts
{
  pageCount: number;
}
```

#### `OnPageChangedEventPayload`

```ts
{
  pageIndex: number,
  pageCount: number
}
```

#### `OnErrorEventPayload`

```ts
{
    code: 'invalid_url' | 'invalid_document' | 'password_required' | 'password_incorrect',
    message: string
}
```
```

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

### FitMode Type

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

Defines the available scaling modes for the document.

```ts
'width' | 'height' | 'both';
```

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

### OnLoadCompleteEventPayload Interface

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

Payload structure for the onLoadComplete event.

```ts
{
  pageCount: number;
}
```

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

### OnPageChangedEventPayload Interface

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

Payload structure for the onPageChanged event.

```ts
{ pageIndex: number, pageCount: number }
```

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

### OnErrorEventPayload Interface

Source: https://github.com/kishannareshpal/expo-pdf/blob/main/README.md

Payload structure for the onError event.

```ts
{
    code: 'invalid_url' | 'invalid_document' | 'password_required' | 'password_incorrect',
    message: string
}
```

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