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

[RohindhR]

Same issue