Exception thrown while executing UI block: -[VRT3DObject setOnClick:]

[utiq]

Environment

Please provide the following information about your environment:

1. Development OS: Mac
2. Device OS & Version: Sonoma 14.4.1
3. Version: ViroReact 2.41.1 - React Native version 0.73.2
4. Device(s): iPhone 12 Pro Max 17.4.1

Description

I created a simple scene to share the error I'm having. I cannot set an onClick event in a Viro3DObject
I can see these couple of errors in the XCode's console

Error setting property 'onClick' of VRT3DObject with tag #305: Exception thrown while executing UI block: -[VRT3DObject setOnClick:]: unrecognized selector sent to instance 0x11d0c9ca0

Error setting property 'onClick' of VRT3DObject with tag #305: Exception thrown while executing UI block: 'parentNode' is a required parameter

There is also this, I'm not sure if is related:

*** Assertion failure in -[RCTNativeAnimatedNodesManager connectAnimatedNodes:childTag:](), /Users/cesar/Dropbox/DropShipping/Quibblix/code/quibblix/apps/mobile/node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.mm:128

Reproducible Demo

import React, {useState, useEffect} from 'react';
import {StyleSheet, PermissionsAndroid, Platform} from 'react-native';
import {
  ViroARScene,
  ViroARSceneNavigator,
  Viro3DObject,
  ViroNode,
} from '@viro-community/react-viro';

// TODO: Add the loading and back button
const PuzzleScene = ({puzzle}: {puzzle: any}) => {
  const handleObjectClick = (position, source) => {
    console.log(
      `Object clicked at position: ${position.x}, ${position.y}, ${position.z}`,
    );
    console.log(`Clicked object source:`, source);
  };

  return (
    <ViroARScene>
      <ViroNode>
        <Viro3DObject
          source={require('../../res/sphere.vrx')}
          position={[0, 0, -1]}
          scale={[0.1, 0.1, 0.1]}
          type="VRX"
          onClick={() => console.log('Clicked')}
        />
      </ViroNode>
    </ViroARScene>
  );
};

export default ({route}: {route: any}) => {
  const {puzzle} = route.params;
  async function requestCameraPermission() {
    try {
      // console.log('resultSource', resultSource);
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'Camera Permission',
          message:
            'This app needs access to your camera ' +
            'so you can visualize the 3D scene.',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('You can use the camera');
      } else {
        console.log('Camera permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  }
  useEffect(() => {
    if (Platform.OS === 'android') {
      requestCameraPermission();
    }
  }, []);
  return (
    <ViroARSceneNavigator
      autofocus={true}
      initialScene={{
        scene: () => <PuzzleScene puzzle={puzzle} />,
      }}
      style={styles.f1}
    />
  );
};

var styles = StyleSheet.create({
  f1: {flex: 1},
  helloWorldTextStyle: {
    fontFamily: 'Arial',
    fontSize: 30,
    color: '#ffffff',
    textAlignVertical: 'center',
    textAlign: 'center',
  },
});

[utiq]

@achuvm @radvani @manbod @dthian any help? I can confirm onClick works fine in Android but not in iOS

[Rohindh-R]

Same issue

[mzupek]

Same Issue

[ardboer]

Same issue

[ricardo-alves-loka]

After searching through the issues and not finding a solution I was able to go around and use the prop onClickState from the clickable components to trigger the action that I've wanted.
This prop is properly activated when the component is triggered so while a reason why the onClick prop does not work properly I'll be using that.