Having trouble finding the right way to animate this Ui with react native reanimated

[sidtechno-haris]

import React, { useEffect, useState } from "react";
import {
  ActivityIndicator,
  Image,
  StyleSheet,
  TouchableOpacity,
  View,
} from "react-native";
import { Background, Loading, ScreensHeader } from "../../components";
import { useTranslation } from "react-i18next";
import { wp } from "../../constants/Dimentions";
import { Colors } from "../../constants/Colors";
import Svg, { Circle } from "react-native-svg";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  cancelAnimation,
} from "react-native-reanimated";
import Text from "../../components/ScreenComponents/Text";
import { useToken } from "../../constants/Context";
import { useQuery } from "@tanstack/react-query";
import { fetchData } from "../../Api/ApiRoute";

const OrbitingImage = () => {
  const token = useToken();
  const url = "trackList";

  const [orbitingUsers, setOrbitUsers] = useState([
    {
      _id: "6720bf0a4aaad29c0e3275d2",
      image: require("../../../assets/user2.png"),
      title: "Makkah Madina",
      place: "Jeddah 123",
      radius: Math.floor(Math.random() * (250 - 80 + 1)) + 90,
      rotation: useSharedValue(0),
    },
    {
      _id: "6720bf624aaad29c0e3275db",
      image: require("../../../assets/user2.png"),
      title: "abc",
      place: "hello",
      radius: Math.floor(Math.random() * (250 - 80 + 1)) + 90,
      rotation: useSharedValue(0),
    },
    {
      _id: "66fd4395983ebe5fb8eb71a1",
      image: require("../../../assets/user2.png"),
      title: "Bus stop",
      place: "Makkah",
      radius: Math.floor(Math.random() * (250 - 80 + 1)) + 90,
      rotation: useSharedValue(0),
    },
  ]);

  const { data, error, isLoading } = useQuery({
    queryKey: [url],
    queryFn: () => fetchData(url, token),
    enabled: !!token,
  });

  const rotationValue = useSharedValue(0);

  useEffect(() => {
    if (data === undefined) return;
    const mergedArray = mergeData(data);
    setOrbitUsers(mergedArray);
  }, [data]);

  const mergeData = (data) => {
    const mergedArray = [];
    for (const key in data) {
      const value = data[key];
      if (value && typeof value === "object") {
        if (Array.isArray(value)) {
          value.forEach((item) => {
            mergedArray.push({
              type: key,
              radius: Math.floor(Math.random() * (250 - 80 + 1)) + 90,
              rotation: rotationValue.value,
              ...item,
            });
          });
        } else {
          mergedArray.push({
            type: key,
            ...value,
          });
        }
      }
    }
    return mergedArray;
  };

  useEffect(() => {
    if (orbitingUsers?.length === 0) {
      cancelAnimation(rotationValue);

      return;
    }
    orbitingUsers.forEach((user, index) => {
      const randomAngle = Math.random() * 360;
      user.rotation.value = randomAngle;
      const duration = 60000 + index * 10000;
      user.rotation.value = withRepeat(
        withTiming(randomAngle + 360, { duration }),
        -1
      );
    });
  }, [data]);

  const orbitingStyles = orbitingUsers.map((user) =>
    useAnimatedStyle(() => {
      const angle = (user?.rotation?.value * Math.PI) / 180;
      return {
        transform: [
          { translateX: Math.cos(angle) * user?.radius },
          { translateY: Math.sin(angle) * user?.radius },
        ],
      };
    }, [orbitingUsers])
  );

  const { t } = useTranslation();

  return (
    <>
      {isLoading && <Loading />}
      <Background
        backgroundColor={Colors.white + 99}
        source={require("../../../assets/image.png")}
      >
        <ScreensHeader Title={t("SOS")} />
        <View style={styles.textContainer}>
          <Text style={styles.containerTextHeading}>{t("calling")}</Text>
          <Text style={styles.containerTextContent}>{t("callingContext")}</Text>
        </View>

        <View style={styles.center}>
          <Svg height="400" width="400" style={styles.svg}>
            {[26, 34, 42].map((radius, index) => (
              <Circle
                key={index}
                cx="200"
                cy="200"
                r={wp(radius)}
                stroke="gold"
                strokeWidth="2"
                strokeDasharray="5, 5"
                fill="none"
              />
            ))}
          </Svg>
          <TouchableOpacity>
            <Image
              style={{ width: wp(40), height: wp(40) }}
              source={require("../../../assets/ellipse.png")}
            />
          </TouchableOpacity>
          <Text style={styles.text}>
            {orbitingUsers !== null && orbitingUsers?.length}
          </Text>
          {orbitingUsers.map((user, index) => (
            <Animated.View
              key={user._id}
              style={[styles.avatarContainer, orbitingStyles[index]]}
            >
              <Image
                source={require("../../../assets/user2.png")}
                style={styles.avatarImage}
              />
              {user.title && (
                <Text style={styles.avatarName}>{user.title}</Text>
              )}
            </Animated.View>
          ))}
        </View>
      </Background>
    </>
  );
};

export default OrbitingImage;

const styles = StyleSheet.create({
  textContainer: {
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: wp(5),
    paddingHorizontal: wp(15),
  },
  containerTextHeading: {
    fontSize: wp(6),
    color: Colors.dark,
    paddingBottom: 10,
  },
  containerTextContent: {
    textAlign: "center",
    fontSize: wp(3.8),
    lineHeight: wp(5),
    color: Colors.font,
  },
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  svg: {
    position: "absolute",
  },
  avatarContainer: {
    position: "absolute",
  },
  avatarImage: {
    width: 40,
    height: 40,
    borderRadius: 25,
  },
  avatarName: {
    color: "#000",
    fontSize: 10,
    textAlign: "center",
  },
  text: {
    alignSelf: "center",
    color: "#fff",
    fontSize: wp(10),
    position: "absolute",
  },
});

UI is like a near share location and users will orbit around the orange image but when the data from the API renders it shows the error or length and i am facing this from a while please help me as if i have to change the animation or something.

packages detail:
"dependencies": { "@fawazahmed/react-native-read-more": "^3.0.4", "@notifee/react-native": "^9.1.2", "@react-native-async-storage/async-storage": "^2.0.0", "@react-native-community/geolocation": "^3.4.0", "@react-native-firebase/app": "^21.2.0", "@react-native-firebase/messaging": "^21.2.0", "@react-navigation/bottom-tabs": "^6.6.1", "@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.11.0", "@tanstack/react-query": "^5.59.15", "i18next": "^23.15.1", "moment": "^2.30.1", "react": "18.3.1", "react-i18next": "^15.0.1", "react-native": "0.75.3", "react-native-android-location-enabler": "^2.0.1", "react-native-bouncy-checkbox": "^4.1.2", "react-native-calendars": "^1.1306.0", "react-native-gesture-handler": "^2.20.0", "react-native-heroicons": "^4.0.0", "react-native-image-picker": "^7.1.2", "react-native-keyboard-avoiding-scroll-view": "^1.0.1", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-maps": "^1.18.0", "react-native-permissions": "^4.1.5", "react-native-progress": "^5.0.1", "react-native-reanimated": "^3.15.3", "react-native-render-html": "^6.3.4", "react-native-safe-area-context": "^4.11.0", "react-native-screens": "^3.34.0", "react-native-svg": "^15.7.1", "socket.io-client": "^4.8.1" },

[MatiPl01]

Hey @sidtechno-haris!

I can see that you use the useAnimatedStyle hooks inside a map callback, which is incorrect. Judging from your trimmed stack trace, I think that the error is thrown somewhere here:

 const orbitingStyles = orbitingUsers.map((user) =>
    useAnimatedStyle(() => {
      const angle = (user?.rotation?.value * Math.PI) / 180;
      return {
        transform: [
          { translateX: Math.cos(angle) * user?.radius },
          { translateY: Math.sin(angle) * user?.radius },
        ],
      };
    }, [orbitingUsers])
  );

I have 2 concerns here:

1. You don't have to pass orbitingUsers in the dependency array
2. You should never use hooks in this way. Hooks should be used in the top-level of the component body, not in loops/maps/etc. Instead of creating an array of animated styles and rendering components based on this array, create a separate component to which you will pass the user data used inside the useAnimatedStyle hook and use this hook in there.

You will have to also change this loop where you render your users. Map over the orbitingUsers data array here and pass every single user entry to the component to which you move the animated style and the content:

{orbitingUsers.map((user, index) => (
  // --- Move code below to the separate component ---
  <Animated.View
    key={user._id}
    style={[styles.avatarContainer, orbitingStyles[index]]}>
    <Image
      source={require('../../../assets/user2.png')}
      style={styles.avatarImage}
    />
    {user.title && (
      <Text style={styles.avatarName}>{user.title}</Text>
    )}
  </Animated.View>
))}

[sidtechno-haris]

@MatiPl01 hello there!

Sorry for replying late; I was stuck with other projects.
I have tried your advice but it didn't let me fix the error as when the data is collected from the API the animation throws the error of reduce motion error with Invalid hook calls,