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

Fixes android issue with scaling on android #148

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+17 −1
Open

Fixes android issue with scaling on android #148

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
138dbc1
Fixes android issue with scaling on android
LimitedDani May 18, 2022
1acfc37
Removed unused parameter
LimitedDani May 30, 2022
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: 18 additions & 1 deletion src/hooks/usePanResponder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
getDistanceBetweenTouches,
getImageTranslate,
getImageDimensionsByTranslate,
getImageTransform,
Copy link
Collaborator

@antonKalinin antonKalinin May 30, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Hey @LimitedDani thanks for this PR, can I ask you what this import for as it's never used below?

Copy link
Author

Choose a reason for hiding this comment

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

Ummm, i dont know, i will remove it

Copy link
Author

Choose a reason for hiding this comment

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

@antonKalinin It is fixed

} from "../utils";

const SCREEN = Dimensions.get("window");
Expand Down Expand Up @@ -65,12 +66,28 @@ const usePanResponder = ({
const meaningfulShift = MIN_DIMENSION * 0.01;
const scaleValue = new Animated.Value(initialScale);
const translateValue = new Animated.ValueXY(initialTranslate);

const imageDimensions = getImageDimensionsByTranslate(
initialTranslate,
SCREEN
);

useEffect(() => {
Copy link
Collaborator

@antonKalinin antonKalinin Jun 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

@LimitedDani Sorry that it takes so long to merge this one, I am unfortunately pretty busy and have very limited time for OS. But I need to ask couple of questions here:

  1. Why do we need Animated.parallel having single animation in array?
  2. Can you shortly describe the idea, because the approach looks a bit hacky for me. From what I understand we run this effect on every render (no deps) and we say that zoom is over (onZoom(false)) and we animate zoom back to initial scale.
    What was initial problem we are solving? Was it that image stacked after pinch gesture and we were about to return it to initial scale?

onZoom(false);
Animated.parallel(
[
Animated.timing(scaleValue, {
toValue: initialScale,
duration: 300,
useNativeDriver: false,
}),
],
{ stopTogether: false }
).start(() => {
currentScale = initialScale;
currentTranslate = initialTranslate;
});
});

const getBounds = (scale: number) => {
const scaledImageDimensions = {
width: imageDimensions.width * scale,
Expand Down