ZoomableImage

ZoomableImage.tsx

import React from 'react'
import { Animated, Image, StyleSheet, ImageSourcePropType } from 'react-native'
import {
  PinchGestureHandler,
  PinchGestureHandlerStateChangeEvent,
  State,
} from 'react-native-gesture-handler'
import { Container } from '../ui'

import Colors from '../../constants/Colors'

export default ({
  maxScale = 2,
  minScale = 1,
  height = 200,
  width = 200,
  source,
}: {
  maxScale?: number
  minScale?: number
  height?: number
  width?: number
  source: ImageSourcePropType
}) => {
  const pinchScale = new Animated.Value(1)

  const onGestureEvent = Animated.event([{ nativeEvent: {} }], {
    listener: (event: PinchGestureHandlerStateChangeEvent) => {
      if (event.nativeEvent.state === State.ACTIVE) {
        const eventScale = event.nativeEvent.scale
        let sanitazedScale = eventScale
        if (eventScale > maxScale) {
          sanitazedScale = maxScale
        } else if (eventScale < minScale) {
          sanitazedScale = minScale
        }
        pinchScale.setValue(sanitazedScale)
      }
    },
    useNativeDriver: true,
  })
  const onHandlerStateChange = (event: PinchGestureHandlerStateChangeEvent) => {
    if (event.nativeEvent.state === State.END) {
      pinchScale.setValue(1)
    }
  }

  return (
    <Container height={height} width={width}>
      <PinchGestureHandler
        onGestureEvent={onGestureEvent}
        onHandlerStateChange={onHandlerStateChange}
      >
        <Animated.View
          style={{
            ...StyleSheet.absoluteFillObject,
            // backgroundColor: Colors.Gray(3),
            overflow: 'hidden',
            alignItems: 'center',
            flex: 1,
            justifyContent: 'center',
            transform: [{ perspective: 200 }, { scale: pinchScale }],
          }}
          collapsable={false}
        >
          <Image style={{ width, height }} source={source} />
        </Animated.View>
      </PinchGestureHandler>
    </Container>
  )
}