Viro App crashes when onExitViro button is pressed

[robertomaster]

• [x ] Review the documentation: https://docs.viromedia.com/
• [ x] Search for existing issues: https://github.com/viromedia/viro
• [ x] Use the latest ViroReact release: https://docs.viromedia.com/docs/releases

1. Development OS: Windows
2. Device OS & Version: Samsung A32 Android 11
3. Version: ViroReact "2.17.0" and React Native "0.59.9"
4. Device(s): Samsung

Hi friends of ViroMedia team. I'm coding a ViroReact app and when I press the X button in a VR scene, the app crashes.

I'm using a Samsung A32 phone for testing the app.

This is the code of my Component, where the app crashes:

import React, { Component } from "react";
import { Image, Text, TouchableOpacity, StyleSheet, View } from "react-native";
import { ViroVRSceneNavigator } from "react-viro";

import Details from "../components/Details";

var InitialVRScene = require("../components/VirtualRender");
var VR_NAVIGATOR_TYPE = "VR";
var UNSET = "UNSET";

var defaultNavigatorType = UNSET;

export default class VirtualReality extends Component {
  static navigationOptions = {
    header: null,
  };
  constructor() {
    super();
    this.state = {
      navigatorType: defaultNavigatorType,
    };
    this._getVRNavigator = this._getVRNavigator.bind(this);
    this._getExperienceButtonOnPress =
      this._getExperienceButtonOnPress.bind(this);
    this._exitViro = this._exitViro.bind(this);
  }

  render() {
    if (this.state.navigatorType == UNSET) {
      return this._getExperienceSelector();
    } else if (this.state.navigatorType == VR_NAVIGATOR_TYPE) {
      return this._getVRNavigator();
    }
  }

  _getExperienceSelector() {
    const { navigation } = this.props;
    const img = navigation.getParam("ciudad");
    const ciudad = navigation.getParam("ciudad");
    const provincia = navigation.getParam("provincia");
    return (
      <View>
        <Details img={img} ciudad={ciudad} provincia={provincia} />
        <TouchableOpacity
          style={{ margin: 10 }}
          onPress={() => this.props.navigation.goBack()}
        >
          <Image
            source={require("../res/icons/back.png")}
            style={{ height: 30, width: 30 }}
          />
        </TouchableOpacity>
        <TouchableOpacity
          onPress={this._getExperienceButtonOnPress(VR_NAVIGATOR_TYPE)}
          style={styles.button}
        >
          <Text style={{ fontSize: 20, color: "white" }}>Visitar</Text>
        </TouchableOpacity>
      </View>
    );
  }
  _getExperienceButtonOnPress(navigatorType) {
    return () => {
      this.setState({
        navigatorType: navigatorType,
      });
    };
  }

  _getVRNavigator() {
    const { navigation } = this.props;
    const img = navigation.getParam("img");
    const ciudad = navigation.getParam("ciudad");
    return (
      <ViroVRSceneNavigator
        initialScene={{ scene: InitialVRScene }}
        onExitViro={this._exitViro}
        viroAppProps={{
          img: img,
          ciudad: ciudad,
        }}
      />
    );
  }
  _exitViro() {
    this.setState({
      navigatorType: UNSET,
    });
  }
}

const styles = StyleSheet.create({
  button: {
    borderRadius: 20,
    marginTop: 520,
    margin: 20,
    height: 50,
    backgroundColor: "#F26430",
    justifyContent: "center",
    alignItems: "center",
  },
});

module.exports = VirtualReality;

And the dependencies that I'm using:

"dependencies": {
    "@lightbase/react-native-panorama-view": "^1.0.1",
    "react": "16.8.3",
    "react-native": "0.59.9",
    "react-navigation": "^2.18.3",
    "react-timer-mixin": "^0.13.4",
    "react-viro": "2.17.0"
  },
  "devDependencies": {
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.3"
  },

I hope you can help me.

Thanks in advance.

[robertomaster]

After a long research, it was missing a dependency implementation in my /android/app/build.gradle file:

implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'

And that was it!