ReactVision / starter-kit

React Native project setup with Viro 🚀
MIT License
127 stars 90 forks source link

onClick prop does not work #72

Closed CacdiWilsonHsu closed 4 months ago

CacdiWilsonHsu commented 4 months ago

Description

Hi, 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.

Device

Code

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>
  );
};

const SecondScene = (props: any) => {
  return (
    <ViroARScene>
      <ViroText
        text="This is the second scene!"
        position={[0, 0, -2]}
        style={styles.helloWorldTextStyle}
      />
    </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',
  },
});
linear[bot] commented 4 months ago

XR-183 onClick prop does not work

robertjcolley commented 4 months ago

Hi! Can you make a new issue in https://github.com/NativeVision/viro/issues? The issues here are for the starter kit, and not issues with NativeVision.