onClick prop does not work

[CacdiWilsonHsu]

Requirements:

Please go through this checklist before opening a new issue

• Review the documentation
• Search for existing issues in: ViroCommunity/viro
• Use the latest ViroReact release

Environment

1. Development OS: Mac
2. Device OS & Version: iOS 17.2.1
3. Version: "@viro-community/react-viro": "^2.41.0" & "react-native": "0.73.5"
4. Device(s): iPhone 11

Description

I am learning to use Viro and I am trying to add a click event to a ViroText component. I have tried to add the onClick prop to the ViroText component but it does not seem to work.
Error is Exception thrown while executing UI block: -[VRTNodeContainer setOnClick:]: unrecognized selector sent to instance 0x12f310a50 after setting onClick prop to ViroText component.
I am curious to know if there is a way to add a click event to a ViroText component or any other Viro component. Prop onPinch is working fine but onClick is not working.

Reproducible Demo

Here is the codes that i would like to do onClick event.

import {
  ViroARScene,
  ViroARSceneNavigator,
  ViroCamera,
  ViroText,
  ViroTrackingReason,
  ViroTrackingStateConstants,
} from '@viro-community/react-viro';
import React, {useState} from 'react';
import {StyleSheet} from 'react-native';

const HelloWorldSceneAR = () => {
  const [text, setText] = useState('Initializing AR...');

  function onInitialized(state: any, reason: ViroTrackingReason) {
    console.log('onInitialized', state, reason);
    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
      setText('Hello World!');
    } else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      // Handle loss of tracking
    }
  }

  const handleClick = () => {
    console.log('clicked1');
  };
  return (
    <ViroARScene onTrackingUpdated={onInitialized}>
      <ViroCamera position={[0, 0, 0]} active={true} />
      <ViroText
        style={styles.helloWorldTextStyle}
        text={text}
        scale={[0.5, 0.5, 0.2]}
        position={[0, 0, -2]}
        onClick={handleClick}
      />
    </ViroARScene>
  );
};

export default () => {
  return (
    <ViroARSceneNavigator
      autofocus={true}
      initialScene={{
        scene: HelloWorldSceneAR,
      }}
      style={styles.f1}
    />
  );
};

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

Build the project by xcode and got this error on device.

[linear]

XR-184 onClick prop does not work

[lvothnrv]

I have the same problem ..

[robertjcolley]

This is fixed in 2.41.1! I'm doing a final test on android before I publish the release. Release will be done by the end of the day!

https://github.com/NativeVision/viro-test-bed/blob/main/src/screens/github_issues/Issue272.tsx

trim.3E03E1C5-0E5B-4CD0-BA9E-45416A2146FA.MOV

[psanchezUndanet]

Hi @robertjcolley, as I commented in the discord, this issue is not fully resolved.
I downloaded the expo-starter-kit, changed the viro version in the package.json to 2.41.1, removed the package-lock.json and execute yarn. Added a png file to the assets folder and a ViroButton to the scene (and a function to be called in the onClick). Executed eas build:configure, created a development build for Android and another for iOS.
For Android, there was no issues. It work.
For iOS, it shows the attached error (Exception thrown while executing UI block: - [VRTNodeContainer setOnClick:] unrecognized selector...
If I try to change the ViroButton to ViroImage, I get the same error (changing VRTNodeContainer to VRTImage). If in the ViroImage I remove the onclick, it works and shows the image.

The change I made to the example scene is:

    <ViroARScene onTrackingUpdated={onInitialized}>
      <ViroText
        text={text}
        scale={[0.5, 0.5, 0.5]}
        position={[0, 0, -1]}
        style={styles.helloWorldTextStyle}
      />
      <ViroButton
        source={require('./assets/poiDot.png')}
        scale={[1,1,1]}
        position={[-3, 0, -2]}
        height={1}
        width={1}
        onClick={(...args) => {poiFunction("poi pressed");}}
        transformBehaviors={["billboard"]}
      />
    </ViroARScene>

And added the function:

const HelloWorldSceneAR = () {
//...
};

const poiFunction=(message) => {
  console.log("PoiFunction", message);
}

export default () => {
...

If I change the ViroButton to ViroText, it works.

[Deegiimurun]

Hi @robertjcolley. This error occurs in ViroARPlaneSelector too. Download expo startkit and edit App.tsx to

  return (
    <ViroARScene>
      <ViroARPlaneSelector />
    </ViroARScene>
  );

Error was VRTQuad setOnClick

[LuisRodriguezLD]

I have the same issue as you @Deegiimurun however, I was able to use onClickState instead of onClick and it works. not a solution but a nice workaround if you are interested.

[varun-raj]

@LuisRodriguezLD, do you mind sharing your implementation, I get the same error for the ViroARPlaneSelector like @Deegiimurun.

[psanchezUndanet]

@varun-raj I think Luis is refering to change the onClick prop to onClickState:

<ViroImage
        source={require('./assets/poiDot.png')}
        scale={[1,1,1]}
        position={[-3, 0, -2]}
        height={1}
        width={1}
        //onClick={(...args) => {poiFunction("poi pressed");}}
        onClickState={() => {poiFunction("poi pressed");}}
        transformBehaviors={["billboard"]}
      />

[varun-raj]

@psanchezUndanet Unfortunetlt I still get that error, Im farily new to this, am I doing something wrong?

import React from "react";
import { StyleSheet } from "react-native";
import {
  ViroARScene,
  ViroTrackingStateConstants,
  ViroARSceneNavigator,
  ViroTrackingReason,
  ViroARPlaneSelector,
  ViroTrackingState,
  ViroARTrackingReasonConstants,
  ViroImage,
} from "@viro-community/react-viro";

const HelloWorldSceneAR = () => {

  function onTrackingUpdated(state: ViroTrackingState, reason: ViroTrackingReason) {
    console.log("====================================");
    // Print State Label
    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
      console.log("state:", "Tracking Normal");
    } else if (state === ViroTrackingStateConstants.TRACKING_LIMITED) {
      console.log("state:", "Tracking Limited");
    }  else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      console.log("state:", "Tracking Not Available");
    }

    // Print Reason Label
    if (reason === ViroARTrackingReasonConstants.TRACKING_REASON_NONE) {
      console.log("reason:", "None");
    } else if (reason === ViroARTrackingReasonConstants.TRACKING_REASON_EXCESSIVE_MOTION) {
      console.log("reason:", "EXCESSIVE_MOTION");
    } else if (reason === ViroARTrackingReasonConstants.TRACKING_REASON_INSUFFICIENT_FEATURES) {
      console.log("reason:", "INSUFFICIENT_FEATURES");
    } 

    console.log("====================================\n\n");

    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
      // Handle tracking normal
    } else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) {
      // Handle loss of tracking
    }
  }

  return (
    <ViroARScene 
      onTrackingUpdated={onTrackingUpdated} 
      anchorDetectionTypes="Horizontal"
      onAnchorFound={(foundAnchor) => {
        console.log('onAnchorFound')
      }}>
        <ViroARPlaneSelector 
          onClickState={() => {}} 
          minHeight={0.1} minWidth={0.1} alignment={'Horizontal'}>
          <ViroImage
            source={require('./assets/adaptive-icon.png')}
            scale={[1,1,1]}
            position={[-3, 0, -2]}
            height={1}
            width={1}
            //onClick={(...args) => {poiFunction("poi pressed");}}
            onClickState={() => {console.log("poi pressed");}}
            transformBehaviors={["billboard"]}
          />
      </ViroARPlaneSelector>
    </ViroARScene>
  );
};

export default () => {
  return (
    <ViroARSceneNavigator
      autofocus={true}
      initialScene={{
        scene: HelloWorldSceneAR,
      }}
      style={styles.f1}
    />
  );
};

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