Error when zooming using ZoomPdfView

[ariq-d]

Hi, I'm trying to display a zoomable PDF file, I tried using <ZoomPdfView /> 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?

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",

Device used: Redmi Note 8 Pro, Android 11

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 would be much appreciated, thanks in advance.

[alpha0010]

Appears to have been a conflict with react-native-reanimated. Attempted to add compatibility in v2.4.1, let me know if you still have issues.