Instagram.js

import React from 'react';
import {ScrollView, View, Text, Dimensions} from 'react-native';
import Animated, {
  useAnimatedGestureHandler,
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';
import {PinchGestureHandler} from 'react-native-gesture-handler';

const SIZE = Dimensions.get('screen').width;

const Image = () => {
  const scale = useSharedValue(1);
  const origin = useSharedValue({x: 0, y: 0});
  const adjustedFocal = useSharedValue({x: 0, y: 0});
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const onGestureEvent = useAnimatedGestureHandler({
    onStart: (event, ctx) => {
      adjustedFocal.value = {
        x: event.focalX - SIZE / 2,
        y: event.focalY - SIZE / 2,
      };
      origin.value = adjustedFocal.value;
    },
    onActive: (event, ctx) => {
      scale.value = event.scale;

      adjustedFocal.value = {
        x: event.focalX - SIZE / 2,
        y: event.focalY - SIZE / 2,
      };

      translateX.value = -(-adjustedFocal.value.x + origin.value.x);
      translateY.value = -(-adjustedFocal.value.y + origin.value.y);
    },
    onFail: (event, ctx) => {
      scale.value = withTiming(1);
      translateX.value = withTiming(0);
      translateY.value = withTiming(0);
    },
    onFinish: (event, ctx) => {
      scale.value = withTiming(1);
      translateX.value = withTiming(0);
      translateY.value = withTiming(0);
    },
    onEnd: (event, ctx) => {
      scale.value = withTiming(1);
      translateX.value = withTiming(0);
      translateY.value = withTiming(0);
    },
  });

  const style = useAnimatedStyle(() => {
    const transform = [
      {translateX: translateX.value},
      {translateY: translateY.value},
      {translateX: origin.value.x},
      {translateY: origin.value.y},
      {scale: scale.value},
      {translateX: -origin.value.x},
      {translateY: -origin.value.y},
    ];

    return {transform, zIndex: scale.value !== 1 ? 100 : 1};
  });

  return (
    <PinchGestureHandler {...{onGestureEvent}}>
      <Animated.Image
        style={[
          {
            width: SIZE,
            height: SIZE,
          },
          style,
        ]}
        source={{uri: 'https://unsplash.com/photos/P4Kn-RpMLh4/download?w=640'}}
      />
    </PinchGestureHandler>
  );
};

const Post = () => {
  return (
    <>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: 16,
          paddingVertical: 8,
        }}>
        <View
          style={{
            width: 32,
            height: 32,
            backgroundColor: '#ccc',
            borderRadius: 20,
            marginRight: 8,
          }}></View>
        <Text style={{fontSize: 14}}>nickname</Text>
      </View>
      <Image />
    </>
  );
};

const Instagram = () => {
  return (
    <ScrollView style={{backgroundColor: '#fff'}}>
      <Post />
      <Post />
    </ScrollView>
  );
};

export default Instagram;