Viro360 image does not render until entering the portal when building the APK

[semmiverian]

• Review the documentation: https://virocore.viromedia.com/
• Search for existing issues: https://github.com/viromedia/virocore/issues
• Use the latest ViroCore release: https://virocore.viromedia.com/docs/releases
• Turn off Instant Run in Android Studio

Environment

Please provide the following information about your environment:

1. OS: Mac
2. Version: ViroCore 2.140
3. Device(s): Samsung a30 2018

Description

Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.

Hi, I have one portal in our application with viro360Image inside. My App has been working correctly on the development mode. But when I try to build the App and test the portal. it's only show me the portal with one solid color (SS attached). My 360 picture will be visible when I entering the portal, in my development mode my 360 image will be visible even when I am not entering the portal. I build my app in the debug mode. I will also attached my code to show this portal.

My Portal in my Apk debug

My Portal in development mode

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, screen capture, video recording. The more information you provide, the better we can support you.

'use strict'

import React, {Component} from 'react'

import {StyleSheet} from 'react-native'

import {
  ViroARScene,
  ViroConstants,
  Viro3DObject,
  ViroNode,
  ViroSpotLight,
  ViroQuad,
  ViroAmbientLight,
  ViroPortal,
  ViroPortalScene,
  Viro360Image,
  ViroSceneNavigator,
  ViroScene,
  ViroUtils
} from 'react-viro'

export default class Portal extends Component {
  static navigationOptions = {
    title: 'Home'
  }

  constructor() {
    super()

    // Set initial state here
    // this.state = {
    //   hasARInitialized : false,
    // };

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

  render() {
    return (
      <ViroARScene>
        <ViroAmbientLight color="#ffffff" intensity={200} />
        <ViroPortalScene passable={true} dragType="FixedDistance" onDrag={() => {}}>
          <ViroPortal position={[0, 0, -1]} scale={[0.3, 0.3, 0.3]}>
            <Viro3DObject
              source={require('./../assets/ar/portal_res/portal_archway/portal_archway.vrx')}
              resources={[
                require('./../assets/ar/portal_res/portal_archway/portal_archway_diffuse.png'),
                require('./../assets/ar/portal_res/portal_archway/portal_archway_normal.png'),
                require('./../assets/ar/portal_res/portal_archway/portal_archway_specular.png')
              ]}
              type="VRX"
            />
          </ViroPortal>
          {/* <Viro360Image source={require("./../assets/ar/portal_res/360_island.jpg")} /> */}
          <Viro360Image source={{uri: 'https://storage.googleapis.com/morotai-travel-app/360_island.jpg'}} />
        </ViroPortalScene>
      </ViroARScene>
    )
  }

  _onInitialized(state, reason) {
    if (!this.state.hasARInitialized && state == ViroConstants.TRACKING_NORMAL) {
      this.setState({
        hasARInitialized: true
      })
    } else if (state == ViroConstants.TRACKING_NONE) {
      // Handle loss of tracking
    }
  }
}

module.exports = Portal

[manbod]

Hi @semmiverian ,
Thanks for reaching out. We tested portals on our latest release, images and portal textures seem to be working correctly. My suspicion is your pngs (images) that you use for your portal's 360 background and the portal textures are not being included in your bundle when you build for release. On the lines of facebook/react-native#21309. Try the solutions mentioned on react-native repo to see if any of them resolve the issue for you.

Thanks.