PDF en React Native con Expo y react-native-pdf

Vamos a integrar un fichero PDF en una aplicación de React Native usando el framework Expo y la librería react-native-pdf. Ya verás que el código es sencillo, pero hay cosas a tener en cuenta.

Preparación del entorno

Creación proyecto

Si ya sabes como crear una aplicación con Expo, pasa al siguiente punto. Para crear el proyecto ejecutamos:

$ npx create-expo-app@latest

Una vez creado el proyecto, es necesario que instales la App Expo Go, que encontrarás en la app store de tu dispositivo.

Instalación librería

Para este cometido, la única librería que vas a necesitar es react-native-pdf. Esta librería ofrece varias opciones:

Leer PDF desde URL, Blob, Base64 y Fichero Local, con la posibilidad de guardarlo en la cache, entre otras posibilidades. Se puede mostrar en vertical y horizontal, drag, zoom, proteger con password y navegar a páginas especificas.

Para instalar, ejecuta:

$ npm i react-native-pdf

Crear el componente

Una vez instalada la librería puedes importar el componente y pasarle las opciones que necesites:

import Pdf from 'react-native-pdf';

Lo primero será especificar un objeto con la url del fichero, dependiendo del formato en el que quieras importarlo y pasarle la una de las opciones, cache como booleano, en el caso de que quieras guardarlo en caché.

const pdfSource = { uri: "<URI_FICHERO>", cache: true };

Este objeto se lo pasaremos al componente Pdf importado desde la librería:

<Pdf 
   trustAllCerts={false}
   source={pdfSource}
   style={styles.pdf}
   onLoadProgress = {(percent) => { 
     console.log(`Cargando: ${percent}`);
   }}
   onLoadComplete={(numberOfPages, filePath) => {
      console.log(`Número de páginas: ${numberOfPages}`);
   }}
  onPageChanged={(page, numberOfPages) => {
      console.log(`Página actual: ${page}`);
  }}
  onPressLink={(uri) => {
      console.log(`Se pulsado un link: ${uri}`);
  }}
  onError={(error) => {
      console.log(error);
  }}
/>

Este es todo el componente para poder visualizar el fichero PDF en React Native, tiene muchas otras propiedades, pero para mantenerlo simple, vamos a analizar las mostradas:

• trustAllCerts => Especifica los certificados en los que se confía.
• source => La fuente de donde se lee el fichero PDF.
• style => Los estilos aplicados al componente que muestra el fichero.

Funciones:

Cada una de estas funciones opcionales, se ejecutan asociadas a un evento especifico: cuando se está cargando o se ha cargado el fichero, al cambiar de página, al presionar un link o cuando ocurre un error, entre otras.

Aquí puedes ejecutar el código que requieras en cada uno de los eventos. Para el ejemplo, simplemente imprimo en consola la información recibida como parámetros de cada una de ellas.

Fuentes de importación de ficheros

Como he comentado antes, se pueden mostrar ficheros desde diferentes fuentes y formatos, asignándolo a la propiedad uri, te muestro algunas posibilidades:

const pdfSource = { uri: 'https://www.tudominio.com/fichero.pdf' } // URL
const pdfSource = { uri: 'data:application/pdf;base64,JVBERi...' } // Base64
const pdfSource = { uri: 'file:///sdcard/fichero.pdf' }; // Local

Estas son las tres fuentes compatibles con los dispositivos Android e iOS, existen otros métodos específicos a cada uno de los tipos.

Ya está! Ese es todo el código que hay que implementar para poder ver el fichero PDF en React Native. Ahora al ejecutar la aplicación con npx expo start y usar Expo Go, veras que no funciona!!

Solución

Lo que pasa en este caso, es que react-native-pdf, es un plugin que uso código nativo, por lo que al combinarlo con Expo, no se ejecuta. No te preocupes que la solución es fácil! Vamos a verla.

Para que se ejecute el código tenemos dos opciones, usar el compilado de desarrollo, o el precompilado.

Compilado de desarrollo (development build)

Para poder usar esta forma, necesitas, tener una cuenta en Expo (https://expo.dev), instalar dos paquetes, y luego instalar el código compilado en tu dispositivo móvil.

Instalación de paquetes:

npm install -g eas-cli
npx expo install expo-dev-client

Lo siguiente es logarte con tu usuario de Expo usando la herramienta de consola:

$ eas login

Te solicitará el usuario y la contraseña para continuar.

Por último, tienes que crear el código compilado para instalarlo en tu dispositivo:

eas build --profile development --platform android

Al usar Expo Go, tienes dos posibilidades de trabajo, con Expo Go o con Development Build, esta última es la que deberás usar.

Para cambiar entre modos se usa la tecla 's'.

Conclusiones

Expo es un framework que facilita mucho el trabajo con React Native, y también puede crear alguna complicación a la hora de usar librerías externas, así que al igual que hemos tenido que realizar una compilación (build) para el uso de react-native-pdf, te tocará en otros casos hacer lo mismo, cuando sean librerías de código nativo.

¡Enhorabuena, ya sabes como crear un PDF Viewer en React Native con Expo!