-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathZoomView.tsx
40 lines (39 loc) · 1003 Bytes
/
ZoomView.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { ReactNativeZoomableView } from "@openspacelabs/react-native-zoomable-view"
import { createRef } from "react"
import { Image } from "react-native"
type Props = {
imageUrl: string
imageWidth: number
onZoom: (zoom: number) => void
}
export default function ZoomView(props: Props) {
const { imageUrl, imageWidth } = props
const zoomableViewRef = createRef<ReactNativeZoomableView>()
return (
<ReactNativeZoomableView
maxZoom={5}
minZoom={1}
zoomStep={0.5}
initialZoom={1}
bindToBorders={true}
ref={zoomableViewRef}
onTransform={(ev) => {
props.onZoom(ev.zoomLevel)
}}
onZoomEnd={(_, _a, event) => {
if (event.zoomLevel < 1.2) {
zoomableViewRef.current?.zoomTo(1)
props.onZoom(1)
}
}}
>
<Image
source={{ uri: imageUrl }}
style={{
width: imageWidth,
height: imageWidth / 1.3,
}}
/>
</ReactNativeZoomableView>
)
}