I’m in a React Native project, currently trying to display a zoomable single page PDF file, I tried using <ZoomPdfView /> from the library react-native-pdf-light and the page is displayed, but this error shows up when trying pinch to zoom in. Any idea why this can happen and how to solve?

Attached in the link below is the screenshot to the error

https://github.com/user-attachments/assets/b81e8663-70cd-42eb-963a-971dfa2d5786

In the future I want to display all pages in ScrollView, so that the user can scroll through the entire PDF and zoom each page.

Any help or alternative to the outcome I was hoping for would be much appreciated,
thanks in advance.

Here is the code snippet:

const PdfViewer = ({ navigation }) => {

  const pdfRef = useRef();

  const uri = navigation.state.params.uri;
  const pageTitle = navigation.state.params.title;
  const initialPage = navigation?.state?.params?.initialPage;

  const sourceFile = useMemo(() => `${RNFS.DocumentDirectoryPath}/PDF-FILE.pdf`, []);

  const [isLoading, setIsLoading] = useState(true);
  const [localFilePath, setLocalFilePath] = useState(null);

  const onBackPressed = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  const renderLoadingIndicator = useMemo(() => (
    <View style={styles.loadingContainer}>
      <ActivityIndicator size='small' style={styles.activityIndicator} />
    </View>
  ), []);

  const onPdfLoadComplete = useCallback(() => {
    setIsLoading(false);
  }, [initialPage]);

  const downloadPdf = useCallback(async () => {
    try {
      const downloadResult = await RNFS.downloadFile({
        fromUrl: uri,
        toFile: sourceFile,
      }).promise;
      if (downloadResult.statusCode === 200) {
        setLocalFilePath(sourceFile);
      }
    } catch (error) {
      return Promise.resolve();
    }
  }, [uri, sourceFile]);

  useEffect(() => {
    downloadPdf();
  }, []);

  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <Navbar
        title={pageTitle}
        titleAlign='left'
        tintColor='black'
        backgroundColor='transparent'
        onPressBack={onBackPressed}
        compact
      />
      <View style={styles.container}>
        <ZoomPdfView
          ref={pdfRef}
          page={initialPage - 1}
          source={`file://${localFilePath}`}
          onLoadComplete={onPdfLoadComplete}
          trustAllCerts={Platform.OS === 'ios'}
          style={styles.pdfContainer}
        />
        {isLoading && renderLoadingIndicator}
      </View>
    </SafeAreaView>
  );
};

export default React.memo(PdfViewer);

Here are (some of) the libraries installed:

"react-native": "0.72.6",
"react-native-pdf-light": "^2.4.0",
"react-native-reanimated": "3.6.2",
"react-native-gesture-handler": "^2.13.4",