Web platform fails to bundle when react-native-pdf component exists

[Andy Barratt]

What react-native version are you using?
0.72.3

What react-native-pdf version are you using?
^6.7.4

What platform does your issue occur on? (android/ios/both)
web

Describe your issue as precisely as possible :

1. Steps to reproduce the issue or to explain in which case you get the issue
   I've successfully got this working on Android and iOS, I did suspect it would not work on web and had intended to use some other solution there (iframe or similar). The trouble is, just the presence of a tag in my tsx is causing the web version to not bundle correctly (I'm using expo with the config plugin for this package).

2. Interesting logs

The error I receive is

Web Bundling failed 8809ms
Unable to resolve "../Utilities/Platform" from "node_modules/react-native/Libraries/ReactNative/PaperUIManager.js"

Show us the code you are using?

My hope was to get around the issue with a platform check like so:

    {(Platform.OS === 'ios' || Platform.OS === 'android') && (
        <Pdf
          trustAllCerts={false}
          source={{
            uri: 'https://example.com/somePDF.pdf',
            cache: false,
          }}
          style={{ flex: 1, height: 450 }}
        />
      )}

but as this would only occur during render time, it doesn't prevent the issue during bundling.

Any help would be extremely appreciated :)

[Andy Barratt]

Found a solution:

I have created two components: src/components/Pdf/index.native.tsx and src/components/Pdf/index.tsx

src/components/Pdf/index.native.tsx

import ReactNativePdf, { PdfProps } from 'react-native-pdf';

export default function Pdf(props: PdfProps) {
  // eslint-disable-next-line react/jsx-props-no-spreading
  return <ReactNativePdf {...props} />;
}

src/components/Pdf/index.tsx

import { PdfProps } from 'react-native-pdf';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function Pdf(props: PdfProps) {
  return <Text>PDF not available on web.</Text>;
}

I'm then able to use components as normal, just importing them from components/Pdf. This thanks to discovering the wonder that is Platform Specific File Extensions, which bundlers like Metro know to exclude from web builds etc :)