CODEWITHSUNDEEP
androidreact-nativereact-native-fetch-blobreact-native-pdf
sandeepKumar
sandeepKumar

Reputation: 811

React-Native, Pdf showing on android simulator but getting error on actual android device

I have installed react-native-pdf and rn-fetch-blob packages to show pdf file.It work's fine on simulator but for some reason i am getting "Error: open failed: ENOENT (No such file or directory)".

Here is my code below:

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

import Pdf from 'react-native-pdf';


// Screen that shows the contents of a PDF
export default class OpenPdf extends Component {

  static navigationOptions = {
    title: 'Product Variants'
  };

  render() {
    const source = require('../assets/Product_Variants_Electric_Connections.pdf');

    return (
        <View style={{width: '100%', height: '100%'}}>
          <Pdf style={styles.pdf}
          source={source}

          onLoadComplete={(numberOfPages, filePath) => {
              alert(`number of pages: ${numberOfPages}`);
          }}
          onPageChanged={(page, numberOfPages) => {
              alert(`current page: ${page}`);
          }}
          onError={(error) => {
              alert(`error`+error);
          }}
      />
      </View>
  );
  }
}

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

I have already went through many links, none of the issue is similar to mine. Kindly please suggest what am I missing.

Upvotes: 3

Views: 4856

Answers (3)

Justine
Justine

Reputation: 1

I looked for the issue and tried everything... In my case I had to restart the simulator. Hope it can help someone else saving time!

Upvotes: 0

muratoner
muratoner

Reputation: 2682

This method might solve the problems for other users as it solved mine.

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android: name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

other recommendation you can use trustAllCerts attribute

<Pdf style={styles.pdf}
     source={source}
     trustAllCerts={false} />

Upvotes: 0

sandeepKumar
sandeepKumar

Reputation: 811

As suggested by @Hardik Virani above in comment, I have removed local url and did like below:

render() {
    const source = {uri:'bundle-assets://Product_Variants_Electric_Connections.pdf', cache: true};

    return (
        <View style={{width: '100%', height: '100%'}}>
          <Pdf style={styles.pdf}
          source={source}

      />
      </View>
  );

And Remember Just put your actual pdf in the android/app/src/main/assets/pdf folder of your project.

Upvotes: 0

Related Questions