Dalam pengembangan aplikasi mobile, ada kalanya kita perlu menampilkan dokumen PDF kepada pengguna, baik itu file instruksi, laporan, atau dokumen lainnya. Untungnya, React Native menyediakan cara yang mudah untuk menampilkan file PDF, baik dengan menggunakan komponen bawaan maupun dengan bantuan library pihak ketiga.

Tutorial Membuka File PDF pada React Native
Tutorial Membuka File PDF pada React Native


Pada tutorial kali ini, kita akan membahas cara membuka file PDF di React Native menggunakan library populer react-native-pdf. Kita akan belajar bagaimana cara menginstal dan menggunakannya untuk membuka file PDF baik dari URL maupun dari file lokal.

Mengapa Menampilkan PDF di Aplikasi Penting?

  1. Aksesibilitas Dokumen: PDF adalah format standar untuk dokumen yang sering digunakan untuk menyajikan informasi yang harus dijaga formatnya, seperti laporan dan buku manual.
  2. Kenyamanan Pengguna: Dengan menampilkan PDF langsung di aplikasi, pengguna tidak perlu membuka aplikasi eksternal untuk melihat dokumen, memberikan pengalaman yang lebih mulus.
  3. Fitur Tambahan: Dengan menggunakan library PDF, kita bisa menambahkan fitur seperti zoom, scrolling, dan navigasi halaman yang memudahkan pengguna dalam membaca dokumen.

Memulai dengan React Native

Sebelum kita mulai membuka file PDF, pastikan Anda sudah menginstal React Native dan memiliki proyek yang sedang berjalan. Jika belum, Anda dapat membuat proyek baru dengan perintah berikut:

npx react-native init PDFViewerTutorial
cd PDFViewerTutorial

Setelah proyek React Native siap, pastikan untuk menjalankannya di emulator atau perangkat fisik dengan perintah berikut:

npx react-native run-android  # Untuk Android
npx react-native run-ios      # Untuk iOS

Menggunakan Library react-native-pdf

Untuk membuka file PDF di aplikasi React Native, kita akan menggunakan library react-native-pdf. Library ini memungkinkan kita menampilkan file PDF dari berbagai sumber, termasuk URL, file lokal, atau bahkan base64.

Langkah 1: Instalasi react-native-pdf

Langkah pertama adalah menginstal react-native-pdf ke dalam proyek Anda:

npm install react-native-pdf

Selain itu, kita juga perlu menambahkan library pendukung, yaitu react-native-blob-util yang memungkinkan pengelolaan file pada perangkat:

npm install react-native-blob-util

Jika Anda menggunakan React Native versi di bawah 0.60, pastikan untuk menautkan library secara manual:

npx react-native link react-native-pdf
npx react-native link react-native-blob-util

Untuk versi React Native yang lebih modern, proses linking dilakukan secara otomatis.

Langkah 2: Mengatur Permission (Khusus untuk Android)

Jika Anda menggunakan Android, Anda mungkin perlu menambahkan permission untuk mengakses file dalam aplikasi Anda. Buka file AndroidManifest.xml di proyek Android Anda dan tambahkan izin berikut:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Setelah izin ditambahkan, jangan lupa untuk menjalankan ulang aplikasi Anda dengan perintah:

npx react-native run-android

Langkah 3: Menggunakan react-native-pdf dalam Komponen

Sekarang, kita siap untuk menampilkan file PDF di aplikasi. Berikut adalah contoh sederhana cara menggunakan komponen react-native-pdf:


import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import Pdf from 'react-native-pdf';

const App = () => {
  const source = {
    uri: 'http://www.pdf995.com/samples/pdf.pdf',
    cache: true,
  };

  return (
    <View style={styles.container}>
      <Pdf
        source={source}
        onLoadComplete={(numberOfPages, filePath) => {
          console.log(`Number of pages: ${numberOfPages}`);
        }}
        onPageChanged={(page, numberOfPages) => {
          console.log(`Current page: ${page}`);
        }}
        onError={(error) => {
          console.log(error);
        }}
        style={styles.pdf}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 25,
  },
  pdf: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

export default App;

Penjelasan Kode

  • Pdf: Komponen utama yang digunakan untuk menampilkan file PDF.
  • source: Obyek yang digunakan untuk menentukan sumber file PDF. Dalam contoh ini, kita mengambil PDF dari URL.
    • Opsi cache: true memastikan PDF di-cache agar tidak perlu diunduh lagi setiap kali dibuka.
  • onLoadComplete: Callback yang dipanggil setelah PDF selesai dimuat, memberikan informasi jumlah halaman dalam file.
  • onPageChanged: Callback yang dipanggil setiap kali halaman diubah, memberikan nomor halaman saat ini.
  • onError: Callback yang dipanggil jika terjadi kesalahan saat memuat PDF.

Langkah 4: Membuka PDF dari File Lokal

Selain URL, kita juga bisa membuka file PDF yang berada di penyimpanan lokal perangkat. Sebagai contoh, jika Anda memiliki file PDF di dalam direktori proyek Anda (misalnya, di folder assets), Anda dapat menggunakannya seperti ini:


const source = require('./assets/sample.pdf');

Atau jika file ada di penyimpanan perangkat (misalnya, pada Android), Anda bisa menggunakan path absolut:

const source = { uri: 'file:///sdcard/Download/sample.pdf' };

Fitur Lanjutan

Library react-native-pdf juga menyediakan beberapa fitur lanjutan yang bisa Anda gunakan untuk meningkatkan pengalaman pengguna, seperti:

  • Zooming: Pengguna dapat memperbesar atau memperkecil tampilan PDF dengan pinch-to-zoom.
  • Navigasi Halaman: Pengguna dapat berpindah antar halaman dengan cepat menggunakan metode setPage().

Berikut adalah contoh menambahkan fungsi zoom pada file PDF:


<Pdf
  source={source}
  scale={1.5}  // Zoom 1.5x
  minScale={1.0}
  maxScale={3.0}
  style={styles.pdf}
/>

Kesimpulan

Dengan menggunakan library react-native-pdf, menampilkan file PDF dalam aplikasi React Native menjadi sangat mudah dan fleksibel. Anda bisa membuka file PDF dari URL, penyimpanan lokal, atau sumber lainnya dengan berbagai fitur tambahan seperti zoom dan navigasi halaman.

Menerapkan fitur pembaca PDF di aplikasi Anda akan memberikan nilai tambah yang besar, terutama jika aplikasi Anda memerlukan akses ke dokumen resmi, manual, atau laporan. Selamat mencoba!


Baca Tutorial React Native Lainnya :
#32 Tutorial Kalkulasi Latitude Longitude Dua Jarak React Native
#33 Tutorial React Native Handle OnSwipe Pada iOS
#34 Tutorial View Aspect Ratio Square React Native