React Native PinchZoomView

PinchZoomView.tsx

import {
  PanGestureHandler,
  PanGestureHandlerGestureEvent,
  PinchGestureHandler,
  PinchGestureHandlerStateChangeEvent,
  State,
} from 'react-native-gesture-handler';
import React, { ReactChildren, ReactElement } from 'react';

import { Animated } from 'react-native';
import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  background-color: transparent;
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;

interface Props {
  children?: ReactChildren;
}

function PinchZoomVIew(): ReactElement {
  const scale = new Animated.Value(1);
  const translateX = new Animated.Value(0);
  const translateY = new Animated.Value(0);

  const onZoomEvent = Animated.event(
    [
      {
        nativeEvent: { scale },
      },
    ],
    {
      useNativeDriver: true,
    },
  );

  const onZoomStateChange = (event: PinchGestureHandlerStateChangeEvent): void => {
    const eventScale = event.nativeEvent.scale;
    if (event.nativeEvent.oldState === State.ACTIVE) {
      scale.setValue(eventScale);

      Animated.event([{
        nativeEvent: {
          scale,
        },
      }], { useNativeDriver: true });
    }
  };

  const onPanGestureEvent = (event: PanGestureHandlerGestureEvent): void => {
    if (event.nativeEvent.numberOfPointers > 1) return;

    translateX.setValue(event.nativeEvent.translationX);
    translateY.setValue(event.nativeEvent.translationY);

    Animated.event([{
      nativeEvent: {
        translationX: translateX,
        translationY: translateY,
      },
    }], { useNativeDriver: true });
  };

  return <Container>
    <PanGestureHandler onGestureEvent={onPanGestureEvent}>
      <Animated.View>
        <PinchGestureHandler
          onGestureEvent={onZoomEvent}
          onHandlerStateChange={onZoomStateChange}>
          <Animated.View style={{
            height: '80%',
            width: '100%',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
            <Animated.Image
              source={{
                uri: 'https://dooboolab.com/d7cdbf0713cfdb63d51d9d9a686c6d35.png',
              }}
              style={{
                minWidth: 300,
                minHeight: 300,
                transform: [
                  { translateX },
                  { translateY },
                  { scale },
                  { perspective: 200 },
                ],
              }}
              resizeMode="contain"
            />
          </Animated.View>
        </PinchGestureHandler>
      </Animated.View>
    </PanGestureHandler>
  </Container>;
}

export default PinchZoomVIew;

Note that this isn't working well in android.