onClick prop does not work
CacdiWilsonHsu opened this issue · comments
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
- Development OS: Mac
- Device OS & Version: iOS 17.2.1
- Version: "@viro-community/react-viro": "^2.41.0" & "react-native": "0.73.5"
- 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.
I have the same problem ..
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
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.
Hi @robertjcolley. This error occurs in ViroARPlaneSelector too. Download expo startkit and edit App.tsx to
return (
<ViroARScene>
<ViroARPlaneSelector />
</ViroARScene>
);
Error was VRTQuad setOnClick
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.
@LuisRodriguezLD, do you mind sharing your implementation, I get the same error for the ViroARPlaneSelector like @Deegiimurun.
@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"]}
/>
@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",
},
});@varun-raj Sorry for not being able to answer sooner. In the docs, the ViroARPlaneSelector gets the onClickState from ViroNode. I don't know if the onClickState from ViroImage has its own config for that method or is also from ViroNode. The AR Scene that I tested is similar to this:
<ViroARScene onTrackingUpdated={onTrackingUpdated}>
<ViroImage
source={require('./assets/poiDot.png')}
scale={[1,1,1]}
position={[-3, 0, -2]}
height={1}
width={1}
onClickState={({stateValue}) => { console.log("poi pressed: " + stateValue);}}
transformBehaviors={["billboard"]}
/>
</ViroARScene>
I have the same issue, still relying on onClickState