From b0c6b90e7f7d979bd4a91365446f1e75db4c88bd Mon Sep 17 00:00:00 2001
From: Yevhenii Voloshchak <copyreading@gmail.com>
Date: Tue, 12 Oct 2021 11:56:24 +0300
Subject: [PATCH] Use pdf container width instead of windows width to calculate
 page width

---
 src/components/PDFView/index.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 6beb9c10c00b..fc0ed0bd5393 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native';
+import {View, Dimensions} from 'react-native';
 import {Document, Page} from 'react-pdf/dist/esm/entry.webpack';
 import styles from '../../styles/styles';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
@@ -28,6 +28,7 @@ class PDFView extends PureComponent {
         super(props);
         this.state = {
             numPages: null,
+            windowWidth: Dimensions.get('window').width,
         };
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
     }
@@ -43,15 +44,16 @@ class PDFView extends PureComponent {
     }
 
     render() {
-        const {isSmallScreenWidth, windowWidth} = this.props;
-        const pdfContainerWidth = windowWidth - 100;
+        const {isSmallScreenWidth} = this.props;
+        const pdfContainerWidth = this.state.windowWidth - 100;
         const pageWidthOnLargeScreen = (pdfContainerWidth <= variables.pdfPageMaxWidth)
             ? pdfContainerWidth : variables.pdfPageMaxWidth;
-        const pageWidth = isSmallScreenWidth ? windowWidth - 30 : pageWidthOnLargeScreen;
+        const pageWidth = isSmallScreenWidth ? this.state.windowWidth - 30 : pageWidthOnLargeScreen;
 
         return (
             <View
                 style={[styles.PDFView, this.props.style]}
+                onLayout={event => this.setState({windowWidth: event.nativeEvent.layout.width})}
             >
                 <Document
                     loading={<FullScreenLoadingIndicator />}