Why is the react native pdf module not working

Question

I am trying to build an app that renders a pdf and I am getting errors for every module I am trying. I am right now tring the react-native-pdf module.

As a template, I am using the template in the git hub post :

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

export default class PDFExample extends React.Component {
  render() {
      const source = { uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf', cache: true };
      //const source = require('./test.pdf');  // ios only
      //const source = {uri:'bundle-assets://test.pdf' };
      //const source = {uri:'file:///sdcard/test.pdf'};
      //const source = {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."};
      //const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"};
      //const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"};

      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);
                  }}
                  onPressLink={(uri) => {
                      console.log(`Link pressed: ${uri}`);
                  }}
                  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,
  }
});

The problem is whenever I try and use my phone, I get two different errors :

When I put App.js as a "main" in package.json, I get this error :

 ERROR  TypeError: null is not an object (evaluating '_NativeBlobUtils.default.getConstants')
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error 
when loading React Native.
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error 
when loading React Native.

Wen I put node_modules/expo/AppEntry.js as a "main" in package.json, I get this error :

 ERROR  TypeError: null is not an object (evaluating '_NativeBlobUtils.default.getConstants')
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error 
when loading React Native.
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error 
when loading React Native.

The only differences I see are the (n=10) and (n=11).

Those are my dependencies in the package.json file :

"dependencies": {
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "expo": "~47.0.12",
    "expo-av": "~13.0.2",
    "expo-constants": "^14.0.2",
    "expo-file-system": "~15.1.1",
    "expo-modules-core": "~1.0.4 || ~1.1.1",
    "expo-status-bar": "~1.4.2",
    "react": "^18.1.0",
    "react-native": "0.70.5",
    "react-native-blob-util": "^0.17.1",
    "react-native-pdf": "^6.6.2",
    "react-native-webview": "^11.23.1",
    "react-pdf": "^6.2.2"
  },

I tried a lot of render pdf modules but none of them seemed to work with my expo version I tried resetting the cache, deleting the node_modules and reinstalling them; I don't know what to do.

Why is the react native pdf module not working

0 Answers0