Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons

[nitin1039]

const addImage = async() => {
    try {
      const selectedImages = await DocumentPicker.pick({
          type: [DocumentPicker.types.images],
          allowMultiSelection: true
      })
      const data=selectedImages.map((box) => ({
        ...box,
        angle: useSharedValue(0),
        startAngle: useSharedValue(0),
        scale: useSharedValue(1),
        translateX: useSharedValue(0),
        translateY: useSharedValue(0),
        startX: useSharedValue(0),
        startY: useSharedValue(0),
      }));
  } catch (error) {
      console.log("Error in image pikcing", error)
  }
  }; 

this is my code and when i pick any image with the help of import DocumentPicker from "react-native-document-picker"; library am getting this error

Error in image pikcing [Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.]

this si my whole code

import React from 'react';
import { Button, Image, StyleSheet } from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
import { dW } from '../../../../utils/DynamicHeightWidth';
import DocumentPicker from "react-native-document-picker";

export default function Background_Remover() {
  const boxData = [
    {
      id: 1,
      angle: useSharedValue(0),
      startAngle: useSharedValue(0),
      scale: useSharedValue(1),
      translateX: useSharedValue(0),
      translateY: useSharedValue(0),
      startX: useSharedValue(0),
      startY: useSharedValue(0),
    },
    {
      id: 2,
      angle: useSharedValue(0),
      startAngle: useSharedValue(0),
      scale: useSharedValue(1),
      translateX: useSharedValue(0),
      translateY: useSharedValue(0),
      startX: useSharedValue(0),
      startY: useSharedValue(0),
    },
    {
      id: 3,
      angle: useSharedValue(0),
      startAngle: useSharedValue(0),
      scale: useSharedValue(1),
      translateX: useSharedValue(0),
      translateY: useSharedValue(0),
      startX: useSharedValue(0),
      startY: useSharedValue(0),
    },
    {
      id: 4,
      angle: useSharedValue(0),
      startAngle: useSharedValue(0),
      scale: useSharedValue(1),
      translateX: useSharedValue(0),
      translateY: useSharedValue(0),
      startX: useSharedValue(0),
      startY: useSharedValue(0),
    },
  ];

  const renderBox = (box) => {
    // Pan gesture for moving
    const panGesture = Gesture.Pan()
      .onStart(() => {
        box.startX.value = box.translateX.value;
        box.startY.value = box.translateY.value;
      })
      .onUpdate((event) => {
        box.translateX.value = box.startX.value + event.translationX;
        box.translateY.value = box.startY.value + event.translationY;
      })
      .onEnd(() => {
        // Smooth transition when releasing the box
        box.translateX.value = withSpring(box.translateX.value);
        box.translateY.value = withSpring(box.translateY.value);
      });

    // Rotation gesture
    const rotationGesture = Gesture.Rotation()
      .onStart(() => {
        box.startAngle.value = box.angle.value;
      })
      .onUpdate((event) => {
        box.angle.value = box.startAngle.value + event.rotation;
      });

    // Pinch gesture for scaling
    const pinchGesture = Gesture.Pinch().onUpdate((event) => {
      box.scale.value = event.scale;
    });

    // Combine all gestures
    const combinedGesture = Gesture.Simultaneous(
      panGesture,
      rotationGesture,
      pinchGesture
    );

    // Animated style for translation, rotation, and scaling
    const animatedStyle = useAnimatedStyle(() => ({
      transform: [
        { translateX: box.translateX.value },
        { translateY: box.translateY.value },
        { rotate: `${box.angle.value}rad` },
        { scale: box.scale.value },
      ],
    }));

    return (
      <GestureDetector key={box.id} gesture={combinedGesture}>
        <Animated.View style={[styles.box, animatedStyle]} >
          <Image source={{ uri: "https://th.bing.com/th/id/OIG3.Z11n1VN6NRw.IXOddq9X" }} style={{width:dW(150),height:dW(150)}}/>
        </Animated.View>
      </GestureDetector>
    );
  };

  const addImage = async() => {
    try {
      const selectedImages = await DocumentPicker.pick({
          type: [DocumentPicker.types.images],
          allowMultiSelection: true
      })
      const data=selectedImages.map((box) => ({
        ...box,
        angle: useSharedValue(0),
        startAngle: useSharedValue(0),
        scale: useSharedValue(1),
        translateX: useSharedValue(0),
        translateY: useSharedValue(0),
        startX: useSharedValue(0),
        startY: useSharedValue(0),
      }));
  } catch (error) {
      console.log("Error in image pikcing", error)
  }
  };

  return (
    <GestureHandlerRootView style={styles.container}>
      <Button title="Pick Images" onPress={addImage} />
      {boxData.map((box) => renderBox(box))}
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    borderRadius: 20,
    backgroundColor: '#b58df1',
    margin: 10,
  },
});

basically i want to implement a feture like where user can select muiltple image from device and user can rotate, pinch to zoom, move individually each image according to need

please help me on this issue

[MatiPl01]

Hey @nitin1039!

Basically, you shouldn't call hooks in a loop as you do, inside the map function callback. You are getting this error because the number of selectedImages changes, thus, the number of hooks called within a single component changes. This is invalid and the number of hooks called in a component must never change.

Another problem is that you have the addImage function within which you call the useSharedValue hooks, so it is another invalid usage of React hooks.

I recommend reading React's rules of hooks to learn how to use hooks properly. You should be able to properly refactor your code then.