Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use pdf container width instead of windows width to calculate page width #5775

Merged
merged 1 commit into from
Oct 18, 2021
Merged

Use pdf container width instead of windows width to calculate page width #5775

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/components/PDFView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
}
Expand All @@ -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})}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. So you are replacing the windowWith with View's width but isn't it wrong? It should be the window's width.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. So you are replacing the windowWith with View's width but isn't it wrong? It should be the window's width.

It is PDF container's width.

Ultimately, to calculate the page width we need to know width of the container. In our case container - is this View.
But the problem is, we don't know the container's width until first render is occured. Since container takes up full width, we can use Dimensions.get('window').width as the initial number for container width. After component renders, View's onLayout fires, updating windowWidth value.

But I agree, calling in windowWidth is misleading.
Should we call it something like containerWidth or pdfContainerWidth?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I understand this point. Thanks for the explanation.

Since container takes up full width, we can use Dimensions.get('window').width as the initial number for container width.

But as you said, if we can use the windowWidth which is better as it prevents render. on each onLayout state will cause another render.

So, we can skip this logic and use the Dimensions.get('window').width always. I know this is wrong to do but it fits well in our cause.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But as you said, if we can use the windowWidth which is better as it prevents render. on each onLayout state will cause another render.

So, we can skip this logic and use the Dimensions.get('window').width always. I know this is wrong to do but it fits well in our cause.

This fix introduces only one additional render when component is first mounted.
If we use Dimensions.get('window').width always, pages won't resize when we resize the window.
onLayout, on the other hand, will fire when window is resized.

Copy link
Member

@parasharrajat parasharrajat Oct 13, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean we won't need that state then.

you can directly use the Dimensions.get('window').width in the render method and this will update every time page resizes.

Am I thinking wrong?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean we won't need that state then.

you can directly use the Dimensions.get('window').width in the render method and this will update every time page resizes.

That's the problem, when we zoom-in hard enough, Dimensions.get('window').width returns invalid screen size.
I've described this issue in my initial proposal. In the first video you can see alerts popping up when i zoom pdf, windowWidth parameter is the one withWindowDimensions is returning.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. Understood. Thanks

>
<Document
loading={<FullScreenLoadingIndicator />}
Expand Down