Skip to content

Instantly share code, notes, and snippets.

@tchayen
Created Aug 14, 2020
Embed
What would you like to do?
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment