null is not an object (evaluating 'this.nativeCommandsModule.push')

1.3k views Asked by At

I am using WIX-React-Native-Navigation and while pushing a component in the stack I am getting this error. Error

One thing to say, I am using Viro-React ARScene Navigation (Scene Navigation) in WIX-React-Native-Navigation.

Here's my code index.js

import { AppRegistry } from 'react-native';
var OpenDoor = require('./app/base')
import Stack from './app/navigation';

import { Navigation } from "react-native-navigation";

AppRegistry.registerComponent('ViroSample', () => OpenDoor);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: Stack
    }
  });
});

navigation.js

import { Navigation } from "react-native-navigation";

import Base from './base';
import Menu from './components/Menu/menu';

Navigation.registerComponent('Base', () => Base);
Navigation.registerComponent('Menu', () => Menu);


const Stack = {
    children: [{
            component: {
                name: 'Base'
            },
        }
    ]
};

export default Stack;

base.js

import React, {Component} from 'react';
import {
    Alert,
    View
} from 'react-native';
import {ViroARSceneNavigator} from 'react-viro';
import { Navigation } from 'react-native-navigation';

import APIKeys from './index';
import Camera from './components/Camera/camera';
import MenuButton from './components/Menu/menu_button';


class Base extends Component {
    constructor(props) {
        super(props);
        this.navigateScreen = this.navigateScreen.bind(this);
    }

    navigateScreen(location) {
        Navigation.push(this.props.componentId, {
            component: {
                name: location
            }
        });
    }

    render() {
        return(
            <View style={styles.container}>
                <ViroARSceneNavigator
                    initialScene = {{
                        scene: Camera
                    }}
                    apiKey = {APIKeys.ViroReact}
                    style = {styles.ar_scene}
                />
                <MenuButton navigation={this.navigateScreen}/>
            </View>
        );
    }
};

const styles = {
    container: {
        flex: 1
    }
};

export default Base;
module.exports = Base;

Correct me, If I am wrong somewhere.

What I am doing is, creating an application where users can decorate home virtually with the help of Augmented Reality. The mobile app is created on React-Native while the library used for augmented reality is Viro-React.

So, When I want to navigate from One Screen to another, then while pushing component in the stack I am getting this error. Thanks.

0

There are 0 answers