Skip to content

Commit

Permalink
feat: #18 add maxScale & doubleTapScale props for ImageViewer
Browse files Browse the repository at this point in the history
  • Loading branch information
@llr101
llr101 committed Jun 17, 2023
1 parent b23dc3b commit 3b1ea53
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 15 deletions.
18 changes: 10 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,16 @@ You need to wrap your image components used by ImageWrapper in this package.

## Props
### ImageViewer
| name | required | type | default | description | Example |
|------------------------|----------|------------------------------------------------------------------------------------------|------------|-------------------------------------------------------------------------|-------------------------------------------------------------------------|
| data | true | ```{key: string; source: ImageURISource}[]``` | undefined | The original source & key of image | ```[{key: 'image-1', source: {uri:'http://***.***/***.png'}}]``` |
| renderCustomComponent | false | ```(_: {item: {key: string; source: ImageURISource}; index: number;}) => ReactElement``` | undefined | The custom Element in ImageViewer | ```({index}) => <Text>current index is {index}</Text>``` |
| onLongPress | false | ```(_: {item: {key: string; source: ImageURISource}; index: number;}) => void``` | undefined | Once you pressed image viewer for a long time, the function will active | ```({index}) => console.log(`${index} pressed long`)``` |
| imageResizeMode | false | ```ImageResizeMode``` | undefined | The resizeMode props of image in viewer | ```"contain"``` |
| onChange | false | ```(currentIndex: number) => void``` | undefined | When the viewer finished swiping, the function will be called | ```(currentIndex) => console.log(`current index is ${currentIndex}`)``` |
| dragUpToCloseEnabled | false | ```boolean``` | undefined | Enable dragging up to close the viewer | ```true``` |
| name | required | type | default | description | Example |
|-----------------------|----------|------------------------------------------------------------------------------------------|-----------|-------------------------------------------------------------------------|-------------------------------------------------------------------------|
| data | true | ```{key: string; source: ImageURISource}[]``` | undefined | The original source & key of image | ```[{key: 'image-1', source: {uri:'http://***.***/***.png'}}]``` |
| renderCustomComponent | false | ```(_: {item: {key: string; source: ImageURISource}; index: number;}) => ReactElement``` | undefined | The custom Element in ImageViewer | ```({index}) => <Text>current index is {index}</Text>``` |
| onLongPress | false | ```(_: {item: {key: string; source: ImageURISource}; index: number;}) => void``` | undefined | Once you pressed image viewer for a long time, the function will active | ```({index}) => console.log(`${index} pressed long`)``` |
| imageResizeMode | false | ```ImageResizeMode``` | undefined | The resizeMode props of image in viewer | ```"contain"``` |
| onChange | false | ```(currentIndex: number) => void``` | undefined | When the viewer finished swiping, the function will be called | ```(currentIndex) => console.log(`current index is ${currentIndex}`)``` |
| dragUpToCloseEnabled | false | ```boolean``` | undefined | Enable dragging up to close the viewer | ```true``` |
| maxScale | false | ```number``` | 3 | Image maximum magnification | ```3``` |
| doubleTapScale | false | ```number``` | 2 | The magnification when double-clicking the image | ```2``` |
### ImageWrapper
| name | required | type | default | description | Example |
|-----------|----------|----------------------------------------|-----------|---------------------------------------------------------------------------------------------------|----------------------------------------------------------|
Expand Down
18 changes: 11 additions & 7 deletions src/components/imageViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ export type ImageViewerProps = {
imageResizeMode?: ImageResizeMode;
onChange?: (currentIndex: number) => void;
dragUpToCloseEnabled?: boolean;
maxScale?: number;
doubleTapScale?: number;
};
type LayoutData = { width: number; height: number; pageX: number; pageY: number };
export type ImageViewerRef = {
Expand Down Expand Up @@ -87,6 +89,8 @@ const ImageViewer = forwardRef<ImageViewerRef, ImageViewerProps>((props, ref) =>
imageResizeMode,
onChange,
dragUpToCloseEnabled,
maxScale = 3,
doubleTapScale = 2,
} = props;
const imageItemRef = useRef<RefObject<TouchableOpacity>[]>([]);
const imageMemoSizeRef = useRef<Record<string, { width: number; height: number }>>({});
Expand Down Expand Up @@ -564,17 +568,17 @@ const ImageViewer = forwardRef<ImageViewerRef, ImageViewerProps>((props, ref) =>
if (imageScale.value !== 1) {
resetScale();
} else {
imageScale.value = withTiming(3);
savedImageScale.value = 3;
const currentX = (screenDimensions.width / 2 - event.x) * 3;
imageScale.value = withTiming(doubleTapScale);
savedImageScale.value = doubleTapScale;
const currentX = (screenDimensions.width / 2 - event.x) * doubleTapScale;
imageX.value = withTiming(currentX);
savedImageX.value = currentX;
const currentY = (screenDimensions.height / 2 - event.y) * 3;
const currentY = (screenDimensions.height / 2 - event.y) * doubleTapScale;
imageY.value = withTiming(currentY);
savedImageY.value = currentY;
}
}),
[resetScale, imageScale],
[resetScale, imageScale, doubleTapScale],
);
const imageTapGesture = useMemo(
() => Gesture.Exclusive(imageDoubleTapGesture, imageSingleTapGesture),
Expand All @@ -599,7 +603,7 @@ const ImageViewer = forwardRef<ImageViewerRef, ImageViewerProps>((props, ref) =>
savedImageY.value * event.scale;
})
.onEnd(() => {
const currentScale = Math.max(1, imageScale.value);
const currentScale = Math.min(Math.max(1, imageScale.value), maxScale);
if (currentScale === 1) {
resetScale();
} else {
Expand All @@ -609,7 +613,7 @@ const ImageViewer = forwardRef<ImageViewerRef, ImageViewerProps>((props, ref) =>
savedImageX.value = imageX.value;
}
}),
[imageScale, savedImageScale, imageX, imageY, savedImageY, savedImageX, resetScale],
[imageScale, savedImageScale, imageX, imageY, savedImageY, savedImageX, resetScale, maxScale],
);
const imageLongPressGesture = useMemo(
() =>
Expand Down

0 comments on commit 3b1ea53

Please sign in to comment.