Requirements:

Please go through this checklist before opening a new issue

[x] Review the documentation
[x] Search for existing issues in: viromedia/viro & ViroCommunity/viro
[x] Use the latest ViroReact release

Environment

Please provide the following information about your environment:

Development OS: Mac
Device OS & Version: Android OS version 9 iOS version 15.4.1
Version: ViroReact version 2.22.0 React Native version 0.65.1
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;

May 18 '22 11:05 jeremiehelme

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

Sep 12 '22 16:09 whatapangolin

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

Sep 22 '22 17:09 whatapangolin

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.

Dec 20 '22 20:12 ViktorVojtek

@ViktorVojtek did you pass a ref to the navigator?

Dec 20 '22 21:12 whatapangolin

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.

Dec 20 '22 23:12 ViktorVojtek

@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
   }
}

Dec 21 '22 04:12 whatapangolin

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?

Jan 17 '23 12:01 ViktorVojtek

@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

May 28 '23 14:05 sarimahmad

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

Requirements:

Environment

Description

Reproducible Demo