search

ReactVision / viro

ViroReact: The AR and VR library for React Native 📳💙💛🤍💚
MIT License
1.31k stars 149 forks source link

Calling ARSceneNavigator.project() or ARSceneNavigator.unproject() function produce an error #137

Open jeremiehelme opened 2 years ago

jeremiehelme commented 2 years ago

Requirements:

Please go through this checklist before opening a new issue

Environment

Please provide the following information about your environment:

  1. Development OS: Mac
  2. Device OS & Version: Android OS version 9 iOS version 15.4.1
  3. Version: ViroReact version 2.22.0 React Native version 0.65.1
  4. Device(s): Samsung galaxy S8 and iPhone 8

Description

I'm trying to detect when a marker is in a corner of the device screen. So I tried to track the marker position and convert it to device screen coordinates. Using the ARSceneNavigator project or unproject function produce an error : this.props.arSceneNavigator.project

The error given is : [Error: Argument appears to not be a ReactComponent. Keys: push,pop,popN,jump,replace,startVideoRecording,stopVideoRecording,takeScreenshot,resetARSession,setWorldOrigin,project,unproject,viroAppProps]

It's easy to reproduce, just calling the function on an onclick event for example. I'm stuck so any help is really appreciated :)

Thank you,

Full error log :

Possible Unhandled Promise Rejection (id: 0):
Error: Argument appears to not be a ReactComponent. Keys: push,pop,popN,jump,replace,startVideoRecording,stopVideoRecording,takeScreenshot,resetARSession,setWorldOrigin,project,unproject,viroAppProps
findHostInstanceWithWarning@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:18892:28
findNodeHandle@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:19480:53
_project$@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:113902:160
tryCatch@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:23363:23
invoke@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:23533:32
tryCatch@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:23363:23
invoke@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:23435:30
http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:23465:19
tryCallTwo@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:28047:9
doResolve@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:28211:25
Promise@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:28070:14
callInvokeWithMethodAndArg@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:23464:33
enqueue@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:23469:157
http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:23484:69
_projectPoint@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:120703:44
_projectPoint@[native code]
http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:110809:51
http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:110818:25
invokeGuardedCallbackProd@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:3886:21
invokeGuardedCallback@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:3990:42
invokeGuardedCallbackAndCatchFirstError@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:3994:36
executeDispatch@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:4066:48
executeDispatchesInOrder@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:4086:26
executeDispatchesAndRelease@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:5338:35
forEachAccumulated@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:4611:18
runEventsInBatch@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:5362:27
runExtractedPluginEventsInBatch@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:5442:25
http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:5417:42
batchedUpdates$1@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:16500:20
batchedUpdates@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:5324:36
_receiveRootNodeIDEvent@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:5416:23
receiveEvent@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:5446:32
__callFunction@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:3061:36
http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:2785:31
__guard@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:3012:15
callFunctionReturnFlushedQueue@http://192.168.1.5:8081/index.bundle?platform=android&dev=true&minify=false&app=com.myviroapp&modulesOnly=false&runModule=true:2784:21
callFunctionReturnFlushedQueue@[native code]

Reproducible Demo


'use strict';

import React, {Component} from 'react';
import {StyleSheet} from 'react-native';

import {
  ViroARScene,
  ViroText,
  ViroTrackingStateConstants,
} from '@viro-community/react-viro';

var projectPoint = [1, 1, -4];
export default class HelloWorldSceneAR extends Component {
  constructor() {
    super();

    // Set initial state here
    this.state = {
      text: 'Initializing AR...',
    };

    // bind 'this' to functions
    this._onInitialized = this._onInitialized.bind(this);
    this._projectPoint = this._projectPoint.bind(this);
  }

  render() {
    return (
      <ViroARScene onTrackingUpdated={this._onInitialized}>
        <ViroText
          text={this.state.text}
          onClick={this._projectPoint}
          scale={[0.5, 0.5, 0.5]}
          position={[0, 0, -1]}
          style={styles.helloWorldTextStyle}
        />
      </ViroARScene>
    );
  }

  _projectPoint() {
    this.props.arSceneNavigator.project(projectPoint).then(
      rectDict => {
        console.log(rectDict);
      },
      err => console.log(err),
    );
  }

  _onInitialized(state, reason) {
    if (state == ViroTrackingStateConstants.TRACKING_NORMAL) {
      this.setState({
        text: 'Hello World!',
      });
    } else if (state == ViroTrackingStateConstants.TRACKING_NONE) {
      // Handle loss of tracking
    }
  }
}

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

module.exports = HelloWorldSceneAR;
whatapangolin commented 1 year ago

I ran into the same problem. Did you figure it out?

whatapangolin commented 1 year ago

all right... in the end, it would work if we use a class component... just in case anyone else gets stuck on this.

ViktorVojtek commented 1 year ago

Hello @whatapangolin what do you mean by "it would work if we use a class component"? The creator of the issue @jeremiehelme is using class component already, as we can see in the example of code provided.

Could you please be more specific, how to deal with this issue. In my case, I have the same issue, but with takeScreenshot methode.

whatapangolin commented 1 year ago

@ViktorVojtek did you pass a ref to the navigator?

ViktorVojtek commented 1 year ago

Hello @whatapangolin Yes I am passing ref to navigator and I am forwarding this ref to my "ButtonScreenshot" component which is responsible for the actual "screenshoting". It worked well in v.2.22.0 version of viro, in 2.23 the error above has occurred.

whatapangolin commented 1 year ago

@ViktorVojtek hmm that's strange. I'm on 2.23 and it works fine. I did have to downgrade my RN to 0.69 though. just to be clear, here's the basic structure I used:

class abcScreen extends Component {
    constructor {
           *bind ref here*
    }
    render() {
      return (<Navigator ref={this._ref}>)
    }
   this._ref(nav) {
     this._nav = nav
   }
}
ViktorVojtek commented 1 year ago

Hi @whatapangolin thanks for your reply. Well I can't use class components really. I am using functional components and too many custom hooks all over my app and a lot of my components depends on these hooks. This would mean I need to rewrite a lot of my app 😅 .

So downgrade to 2.22 again is the only way I guess...

Anyone dealt with the similar situation recently and could give an advice?

sarimahmad commented 1 year ago

@ViktorVojtek hmm that's strange. I'm on 2.23 and it works fine. I did have to downgrade my RN to 0.69 though. just to be clear, here's the basic structure I used:

class abcScreen extends Component {
    constructor {
           *bind ref here*
    }
    render() {
      return (<Navigator ref={this._ref}>)
    }
   this._ref(nav) {
     this._nav = nav
   }
}

@whatapangolin Can you mention it with more detail, I am still having error on class component

Error: Argument appears to not be a ReactComponent. Keys: push,pop,popN,jump,replace,startVideoRecording,stopVideoRecording,takeScreenshot,resetARSession,setWorldOrigin,project,unproject,viroAppProps