Simplify the PDF renderer for the Web

assets/css/pdf.css

@@ -0,0 +1,30 @@
+@import './AnnotationLayer.css';
+
+.react-pdf__Page {
+    direction: ltr;
+    margin: 1px auto -8px auto;
+    position: relative;
+    overflow: visible;
+    border: 9px solid transparent;
+    background-clip: content-box;
+    border-image: url(../images/shadow.png) 9 9 repeat;
+    background-color: rgba(255, 255, 255, 1);
+}
+.react-pdf__message {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+.react-pdf__Page__annotations {
+    height: 0;
+}
+.react-pdf__Page__textContent{
+    opacity: 0.2;
+}
+.react-pdf__Page__textContent ::selection{
+    background: rgba(0, 0, 255, 1);
+}
+.react-pdf__Page__textContent span{
+    color: transparent;
+}

config/webpack/webpack.common.js

@@ -33,11 +33,12 @@ module.exports = {
                 {from: 'web/favicon-unread.png'},
                 {from: 'web/og-preview-image.png'},
                 {from: 'assets/css', to: 'css'},
+                {from: 'node_modules/react-pdf/dist/esm/Page/AnnotationLayer.css', to: 'css/AnnotationLayer.css'},
+                {from: 'assets/images/shadow.png', to: 'images/shadow.png'},
 
                 // These files are copied over as per instructions here
-                // https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website#examples
-                {from: 'src/vendor/pdf-js/web', to: 'pdf/web'},
-                {from: 'src/vendor/pdf-js/js', to: 'pdf/build'},
+                // https://github.com/wojtekmaj/react-pdf#copying-cmaps
+                {from: 'node_modules/pdfjs-dist/cmaps/', to: 'cmaps/'},
             ],
         }),
         new IgnorePlugin(/^\.\/locale$/, /moment$/),
@@ -115,7 +116,6 @@ module.exports = {
         alias: {
             'react-native-config': 'react-web-config',
             'react-native$': 'react-native-web',
-            'react-native-webview': 'react-native-web-webview',
         },
 
         // React Native libraries may have web-specific module implementations that appear with the extension `.web.js`

package.json

@@ -69,8 +69,7 @@
     "react-native-safe-area-context": "^3.1.4",
     "react-native-svg": "^12.1.0",
     "react-native-web": "^0.14.1",
-    "react-native-web-webview": "^1.0.2",
-    "react-native-webview": "^11.0.2",
+    "react-pdf": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-router-native": "^5.2.0",
     "react-web-config": "^1.0.0",

src/components/PDFView/index.js

@@ -1,12 +1,17 @@
-import React, {memo} from 'react';
+import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {WebView} from 'react-native-webview';
-import CONST from '../../CONST';
+import {View} from 'react-native';
+import {Document, Page} from 'react-pdf/dist/esm/entry.webpack';
+import styles from '../../styles/styles';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import variables from '../../styles/variables';
 
 const propTypes = {
     // URL to full-sized image
     sourceURL: PropTypes.string,
 
+    ...windowDimensionsPropTypes,
+
     // Any additional styles to apply
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
@@ -17,22 +22,66 @@ const defaultProps = {
     style: {},
 };
 
-/**
- * On web, we use a WebView pointed to a pdf renderer
- *
- * @param props
- * @returns {JSX.Element}
- */
+class PDFView extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            numPages: null,
+        };
+        this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
+    }
+
+    /**
+     * Callback to be called to set the number of pages on PDF
+     *
+     * @param {*} {numPages} No of pages in the rendered PDF
+     * @memberof PDFView
+     */
+    onDocumentLoadSuccess({numPages}) {
+        this.setState({numPages});
+    }
+
+    render() {
+        const {isSmallScreenWidth, windowWidth} = this.props;
+        const pdfContainerWidth = windowWidth - 100;
+        const pageWidthOnLargeScreen = (pdfContainerWidth <= variables.pdfPageMaxWidth)
+            ? pdfContainerWidth : variables.pdfPageMaxWidth;
+        const pageWidth = isSmallScreenWidth ? windowWidth - 30 : pageWidthOnLargeScreen;
+
+        return (
+            <View
+                style={[styles.PDFView, this.props.style]}
+            >
+                <Document
+                    file={this.props.sourceURL}
+                    options={{
+                        cMapUrl: 'cmaps/',
+                        cMapPacked: true,
 
-const PDFView = props => (
-    <WebView
-        source={{uri: `${CONST.PDF_VIEWER_URL}?file=${encodeURIComponent(props.sourceURL)}`}}
-        style={props.style}
-    />
-);
+                    }}
+                    externalLinkTarget="_blank"
+                    onLoadSuccess={this.onDocumentLoadSuccess}
+                >
+                    {
+                        Array.from(
+                            new Array(this.state.numPages),
+                            (el, index) => (
+                                <Page
+                                    width={pageWidth}
+                                    key={`page_${index + 1}`}
+                                    pageNumber={index + 1}
+                                />
+                            ),
+                        )
+                    }
+                </Document>
+            </View>
+        );
+    }
+}
 
 PDFView.propTypes = propTypes;
 PDFView.defaultProps = defaultProps;
 PDFView.displayName = 'PDFView';
 
-export default memo(PDFView);
+export default withWindowDimensions(PDFView);

src/components/PDFView/index.native.js

@@ -36,7 +36,7 @@ const PDFView = props => (
                 styles.imageModalPDF,
                 {
                     width: props.windowWidth,
-                    height: props.windwoHeight,
+                    height: props.windowHeight,
                 },
             ]}
         />

src/styles/styles.js

@@ -799,7 +799,17 @@ const styles = {
 
     imageModalPDF: {
         flex: 1,
-        backgroundColor: themeColors.componentBG,
+        backgroundColor: themeColors.modalBackground,
+    },
+    PDFView: {
+        flex: 1,
+        backgroundColor: themeColors.modalBackground,
+        width: '100%',
+        height: '100%',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        overflowY: 'auto',
     },
 
     modalCenterContentContainer: {

src/styles/themes/default.js

@@ -27,6 +27,7 @@ export default {
     offline: colors.gray3,
     sidebarButtonBG: 'rgba(198, 201, 202, 0.25)',
     modalBackdrop: colors.gray3,
+    modalBackground: colors.gray2,
     pillBG: colors.gray2,
     buttonDisabledBG: colors.gray2,
     buttonHoveredBG: colors.gray1,

src/styles/variables.js

@@ -15,4 +15,5 @@ export default {
     mobileResponsiveWidthBreakpoint: 800,
     safeInsertPercentage: 0.7,
     sideBarWidth: 375,
+    pdfPageMaxWidth: 992,
 };