Cara Menampilkan PDF Pada React Native CLI

Pada kesempatan kali saya akan membagikan tutorial tentang cara menampilkan PDF project React Native CLI. Berikut adalah langkah-langkahnya :

Tutorial Teks

• Silakan buat dulu project react-native cli nya, dengan mengetikan perintah berikut.

  react-native init RNPDF

  Lalu tunggu sampai pembuatan project selesai.

• Selanjutnya silakan masuk ke folder project tersebut, dengan mengetikan perintah berikut.

  cd RNPDF

• Kemudian install package berikut.

  Jika menggunakan npm :

  npm install react-native-pdf react-native-blob-util fbjs --save

  Jika menggunakan yarn :

  yarn add react-native-pdf react-native-blob-util fbjs

• Lalu tambahkan kode berikut di android/app/build.gradle, pada bagian android { ___ }

  packagingOptions {
      pickFirst 'lib/x86/libc++_shared.so'
      pickFirst 'lib/x86_64/libjsc.so'
      pickFirst 'lib/arm64-v8a/libjsc.so'
      pickFirst 'lib/arm64-v8a/libc++_shared.so'
      pickFirst 'lib/x86_64/libc++_shared.so'
      pickFirst 'lib/armeabi-v7a/libc++_shared.so'
  }

• Kemudian ubah isi file App.js dengan kode berikut.

  import React from 'react'
  import { StyleSheet, View } from 'react-native'
  import Pdf from 'react-native-pdf'
  
  const App = () => {
    const source = {
      uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf',
      cache: true,
    }
  
    return (
      <View style={styles.container}>
        <Pdf source={source} style={styles.container} />
      </View>
    )
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
  })
  
  export default App

• Setelah itu, silakan jalankan project react-native tersebut.

Tutorial Video