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

Jump to bottom

Fix: Blurred images in attachment view on mobile devices #6442

Merged
merged 10 commits into from
Nov 26, 2021
Merged

Fix: Blurred images in attachment view on mobile devices #6442

Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
da8b7ee
fix: aspect ratio calculation
aswin-s Nov 19, 2021
8543f59
Add react-native-fast-image & react-native-image-size library depende…
aswin-s Nov 23, 2021
7a72f8b
fix: Update component to use fast-image & react-native-fast-image
aswin-s Nov 23, 2021
a0e5b03
Merge branch 'main' into aswin-s/issue_5193
aswin-s Nov 23, 2021
45abbae
Merge branch 'main' into aswin-s/issue_5193
aswin-s Nov 23, 2021
733a114
Update lock file
aswin-s Nov 23, 2021
db9e2c7
Merge branch 'main' into aswin-s/issue_5193
aswin-s Nov 25, 2021
24a5536
Cancel promises on unmount
aswin-s Nov 25, 2021
cf3b7af
Merge branch 'main' into aswin-s/issue_5193
aswin-s Nov 26, 2021
d6b6055
Fix code style error
aswin-s Nov 26, 2021
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
19 changes: 16 additions & 3 deletions src/components/ImageView/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import Image from 'react-native-fast-image';
import ImageZoom from 'react-native-image-pan-zoom';
import ImageSize from 'react-native-image-size';
import _ from 'underscore';
import styles, {getWidthAndHeightStyle} from '../../styles/styles';
import styles from '../../styles/styles';
import * as StyleUtils from '../../styles/StyleUtils';
import variables from '../../styles/variables';
import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';

Expand All @@ -24,8 +25,11 @@ class ImageView extends PureComponent {
super(props);

this.state = {
thumbnailWidth: 100,
thumbnailHeight: 100,
imageWidth: undefined,
imageHeight: undefined,
interactionPromise: undefined,
};

// Use the default double click interval from the ImageZoom library
Expand All @@ -43,7 +47,12 @@ class ImageView extends PureComponent {

componentDidMount() {
// Wait till animations are over to prevent stutter in navigation animation
InteractionManager.runAfterInteractions(() => this.calculateImageSize());
this.state.interactionPromise = InteractionManager.runAfterInteractions(() => this.calculateImageSize());
}

componentWillUnmount() {
if (!this.state.interactionPromise) { return; }
Copy link
Contributor

Choose a reason for hiding this comment

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

I think our style guide says to not do this (ie: we should have return in a new line and the close bracket in another one.
Having said that, you can change this to: this.state.interactionPromise && this.state.interactionPromise.cancel()

Copy link
Contributor Author

@aswin-s aswin-s Nov 26, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Oh that actually throws Expected an assignment or function call and instead saw an expression.eslintno-unused-expressions lint error.

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 changed it to return in new line.

this.state.interactionPromise.cancel();
}

calculateImageSize() {
Expand Down Expand Up @@ -95,7 +104,11 @@ class ImageView extends PureComponent {
styles.errorOutline,
]}
>
<Image source={{uri: this.props.url}} style={getWidthAndHeightStyle(100, 100)} resizeMode={Image.resizeMode.contain} />
<Image
source={{uri: this.props.url}}
style={StyleUtils.getWidthAndHeightStyle(this.state.thumbnailWidth, this.state.thumbnailHeight)}
resizeMode={Image.resizeMode.contain}
/>
</View>
);
}
Expand Down