React-native 0.78 cant render the pdf on iOS

[husnaintahir]

Tested on iOS 18.0, not sure if any other OS has the problem.

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  SafeAreaView,
  Dimensions,
} from 'react-native';
import Pdf from 'react-native-pdf';

function App(): React.JSX.Element {
  const source = {
    uri: 'https://file-examples.com/storage/feb7c2eda267d3071a102e4/2017/10/file-sample_150kB.pdf',
    cache: false,
  };
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: '#adf'}}>
      <View style={{flex: 1, backgroundColor: '#fda', padding: 22}}>
        <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}`);
          }}
          onLoadProgress={progress => {
            console.log(`Loading progress: ${progress}`);
          }}
          style={styles.pdf}
        />
      </View>
    </SafeAreaView>
  );
}

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

export default App;

The component tree

[vaivai130]

+1 Same Issue

[vaivai130]

I wasn't able to get this to work, so for anyone else in a hurry, I only needed to render the PDF and not manipulate it or anything so I personally migrated to https://github.com/douglasjunior/react-native-pdf-renderer, and implemented the following steps: douglasjunior/react-native-pdf-renderer#31.

[yfuks]

Was able to reproduce on iOS device & simulator with:

"react-native": "0.78.2",
"react-native-pdf": "^6.7.7",
"react-native-blob-util": "^0.21.2",

Found this fix (tell me if it work for you):
mesurons@bbb6c64

In react-native-pdf/package.json add the iOS part at the end:

        "jsSrcsDir": "./fabric",
        "android": {
          "javaPackageName": "org.wonday.pdf"
        },
        "ios": {
         "componentProvider": {
          "RNPDFPdfView": "RNPDFPdfView"
        }
      }

Just created a PR: #927

[gglooo]

Was able to reproduce on iOS device & simulator with:

"react-native": "0.78.2",
"react-native-pdf": "^6.7.7",
"react-native-blob-util": "^0.21.2",
Found this fix (tell me if it work for you): mesurons@bbb6c64

In react-native-pdf/package.json add the iOS part at the end:

    "jsSrcsDir": "./fabric",
    "android": {
      "javaPackageName": "org.wonday.pdf"
    },
    "ios": {
     "componentProvider": {
      "RNPDFPdfView": "RNPDFPdfView"
    }
  }

Just created a PR: #927

this seems to have fixed the issue for me too.

[TheHypnoo]

@wonday You could check this out