> ## Documentation Index
> Fetch the complete documentation index at: https://docs.markpdf.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Ejemplos

> Real cases with @markpdf/react-native: Expo picker, bare RN, page range and RAG.

# Ejemplos

## PDF selector with Expo + status screen

```tsx theme={null}
import * as DocumentPicker from "expo-document-picker";
import { MarkpdfClient, useConvertFile } from "@markpdf/react-native";
import { View, Button, Text, ScrollView } from "react-native";

const client = new MarkpdfClient({ apiKey: "YOUR_API_KEY" });

export function ConvertScreen() {
  const { convert, status, progress, markdown, error } = useConvertFile(client);

  const pick = async () => {
    const result = await DocumentPicker.getDocumentAsync({ type: "application/pdf" });
    if (result.canceled) return;
    const asset = result.assets[0];
    convert({ uri: asset.uri, name: asset.name, mimeType: asset.mimeType }, { mode: "fast" });
  };

  return (
    <View style={{ padding: 16 }}>
      <Button title="Elegir PDF" onPress={pick} />
      {status === "uploading" && <Text>Subiendo: {progress}%</Text>}
      {status === "converting" && <Text>Procesando…</Text>}
      {error && <Text style={{ color: "red" }}>{error.message}</Text>}
      {markdown && (
        <ScrollView style={{ marginTop: 16 }}>
          <Text>{markdown}</Text>
        </ScrollView>
      )}
    </View>
  );
}
```

## Bare RN with `react-native-document-picker`

```tsx theme={null}
import DocumentPicker from "react-native-document-picker";
import { MarkpdfClient } from "@markpdf/react-native";

const client = new MarkpdfClient({ apiKey: "YOUR_API_KEY" });

async function convertPickedPdf() {
  try {
    const [file] = await DocumentPicker.pick({ type: [DocumentPicker.types.pdf] });
    const markdown = await client.convertLocalFile({
      uri: file.uri,
      name: file.name ?? "document.pdf",
      mimeType: file.type ?? undefined,
    });
    return markdown;
  } catch (err) {
    if (DocumentPicker.isCancel(err)) return null;
    throw err;
  }
}
```

## Page range for a large manual

```ts theme={null}
const markdown = await client.convertFromUrl(
  "https://bucket.example.com/manual-800-papages.pdf?sig=...",
  "manual.pdf",
  { pages: "120-145", mode: "fast" }
);
```

## Pipeline RAG with `pdfIndex`

```ts theme={null}
const spine = await client.pdfIndex("https://bucket.example.com/report.pdf?sig=...", "report.pdf");

const target = spine.sections.find((s: { text: string }) => s.text.includes("Resultados"));
if (target) {
  const markdown = await client.convertFromUrl(
    "https://bucket.example.com/report.pdf?sig=...",
    "report.pdf",
    { pages: `${target.page}-${spine.pageCount}`, mode: "fast" }
  );
}
```

See [PDF Index for AI agents](/docs/concepts/pdf-index-for-ai-agents).

```tsx theme={null}
import * as ImagePicker from "expo-image-picker";
import { MarkpdfClient } from "@markpdf/react-native";

const client = new MarkpdfClient({ apiKey: "YOUR_API_KEY" });

async function convertScannedPhoto() {
  const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images });
  if (result.canceled) return;

  const asset = result.assets[0];
  const markdown = await client.convertLocalFile(
    { uri: asset.uri, name: "escaneo.jpg", mimeType: "image/jpeg" },
  );
  return markdown;
}
```

<Note />