Exception in hostFunction : expected 0 args but got 1

[sudhansu-joshi]

Description

import { useNavigation } from "@react-navigation/native";
import React, { useLayoutEffect } from "react";
import {
  Animated,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  // View,
} from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";
const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    overflow: "hidden",
  },
  innerShadow: {
    position: "absolute",
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
  imageBackground: {
    flex: 1,
    resizeMode: "cover",
    width: "100%",
    alignItems: "center",
  },
  absolute: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  shadow: {
    shadowColor: "#fff",
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.27,
    shadowRadius: 4.65,

    elevation: 6,
  },
});

export default function HomeScreen() {
  const navigation = useNavigation<any>();
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  function onUserPress() {
    navigation.navigate("UserAccount");
  }
  const pan = Gesture.Pan()
    .onUpdate((event) => {
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    })
    .onEnd(() => {
      translateX.value = translateX.value;
      translateY.value = translateY.value;
    });
  const animationStyles = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: translateX.value },
        { translateY: translateY.value },
      ],
    };
  });

  return (
    <View className="h-full  px-3.5">
      <View className="justify-between flex-row h-20 items-end">
        <TouchableOpacity className="" onPress={onUserPress}>
          <View className="flex-row gap-2.5">
            <Image
              style={{ width: 40, height: 40 }}
              source={{
                uri: "https://wac-cdn.atlassian.com/dam/jcr:ba03a215-2f45-40f5-8540-b2015223c918/Max-R_Headshot%20(1).jpg?cdnVersion=1543",
              }}
              className="rounded-full"
            />
          </View>
        </TouchableOpacity>
      </View>
      <View className="bg-[#14333c] rounded-3xl my-6 py-4 px-4">
        <View className="justify-between flex-row items-center">
          <View className="flex-1">
            <Text className="text-xl antialiased font-semibold text-gray-700">
              Your Portfolio
            </Text>
            <Text className="my-1 color-white text-xl font-weight: 800;">
              $270005
            </Text>
          </View>

          <View
            className="flex-1 border-4 rounded-full border-up overflow-hidden"
            style={styles.shadow}
          >
            <Text className="px-3.5 py-2">sdfsdfsdfsd</Text>
          </View>
        </View>
      </View>
      {/* <ChartComponent /> */}
      <GestureDetector gesture={pan}>
        <Animated.View
          style={[animationStyles]}
          className="h-16 w-16 rounded-full bg-gray-500 inset-x-0 absolute"
        >
          <Image
            source={require("../assets/hot-pot_3183463.png")}
            className="h-16 w-16"
          />
        </Animated.View>
      </GestureDetector>
    </View>
  );
}

Steps to reproduce

paste the code and run expo start

Snack or a link to a repository

https://github.com/sudhansu-joshi/caloriesXchange

Reanimated version

3.8.1

React Native version

0.73.6

Platforms

Android

JavaScript runtime

None

Workflow

Expo Go

Architecture

None

Build type

Debug app & dev bundle

Device

Real device

Device model

samsung s21

Acknowledgements

Yes

[chakravarthi-bb]

It's happening on multiple devices

[tomekzaw]

@sudhansu-joshi That's because you're importing Animated from react-native instead of react-native-reanimated.

-import { Animated } from "react-native";
+import { Animated } from "react-native-reanimated";