How to adjust a view size with fingers in React Native?

27 views Asked by At

In React Native, when the user selects an image, I bring it to the center of the screen. The user should be able to increase or decrease the size of this image with his finger. My main wish is for him to be able to adjust it with his finger, but he might also have the ability to enlarge it by holding the edge. I tried a little with ChatGPT, but I couldn't get the result I wanted. Is there anyone who can write a simple code example for this?

Currently, I have set it up so that it can drag the selected image wherever it wants on the screen and it works correctly. I also need to add that it can be enlarged or reduced.

const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value,
        });
      },
      onPanResponderMove: (event, gestureState) => {
        Animated.event([null, {dx: pan.x, dy: pan.y}], {
          useNativeDriver: false,
        })(event, gestureState);
      },
      onPanResponderRelease: () => {
        pan.flattenOffset();
      },
    }),
  ).current;
{selectedImage && (
            <Animated.View
              style={[
                styles.imageOverlay,
                {
                  transform: [{translateX: pan.x}, {translateY: pan.y}],
                },
              ]}
              {...panResponder.panHandlers}>
              <Image
                source={{uri: selectedImage.imageUrl}}
                style={styles.selectedImage}
              />
            </Animated.View>
  )}

0

There are 0 answers