React Viro does not respect device orientation in VR

[grahamyesfit]

react: 16.2.0 react-native: 0.55.2 react-viro: 2.5.1 Device: Pixel 2

I've constructed a simple scene containing one Viro360Image component. Its source property is set to a sample TopBottom image.

The first question/issue I have is regarding the rotation properties. I have to set the values to [0, 180, 90] in order for my image to be oriented correctly. If I don't supply these values, the image is on its side (rotated 90 degrees around the Z axis). The text is also on its side (same rotation). I would expect that the default behavior (without specifying rotation values) would be to see the image and text without any rotation.

The second question/issue I have might be related to the first. When I'm in my Viro scene and I rotate my phone, the Viro360Image and ViroText pan in the wrong plane. For example, when I rotate my phone around the X axis (i.e. looking up and down), the image and text pan left-to-right. When I rotate my phone around the Y axis (i.e. looking left and right), the image and text pan up-and-down.

<ViroVRSceneNavigator
    apiKey="..."
    initialScene={{
        scene: () => (
            <ViroScene>
                <Viro360Image
                    vrModeEnabled={true}
                    stereoMode="none"
                    rotation={[0, 180, 90]}
                    source={{ uri: "https://files.readme.io/45c93fe-ps_waikiki.jpg" }} />
                <ViroText text="Hello World!" width={2} height={2} position={[0, 0, -2]} style={styles.helloWorldTextStyle} />
            </ViroScene>
        )
    }} />

[grahamyesfit]

I have some more information on this issue.

The first time I launch my App and fire up the Viro scene, all the orientation and panning works as expected. However, when I shake the phone and hit "Reload" on the developer menu, that's when things get messed up (as described above). In addition to that, when my App reloads (after tapping the developer Reload menu item), all my screen icons are huge, as if React Native is suddenly confused about my device's dimensions, and it's often stuck in landscape mode.

If I interact with Android's Overview button (the one on the right) or if I completely kill the App and go back in, the orientation and panning work as expected again.

[dthian]

Hey @grahamyesfit, thanks for reaching out, this may be a bug on the Viro Platform when using ReactNative > 0.49 with ViroReact 2.5.1, where events fail to fire across the bridge for some odd reason after a reload, potentially resulting in a messed up misconfigured view.

We've actually just pushed ViroReact 2.6 that may resolve this issue (it now works with React Native 0.55). Could you try upgrading ViroReact with the upgrade instructions in that link and re-verify if the bug persists? Thanks!

[grahamyesfit]

Thanks for your reply, @dthian. I can confirm that upgrading to ViroReact 2.6 fixed my main issue.

ReactNative does seem to be confused about my device dimensions after a reload. Also, when I navigate my sidebar to go to a different page, my App is stuck in landscape mode. I can open up a new issue to cover this if you prefer, as you've fixed the main issue.

[dthian]

1) "ReactNative does seem to be confused about my device dimensions after a reload." - How did you come to this conclusion again? If possible, can you provide the visual defects you are seeing with regards to device dimensions (not rotation) upon a reload, and as well as sample code + repro steps if possible.

2) "Also, when I navigate my sidebar to go to a different page, my App is stuck in landscape mode" - This definitely sounds like a bug. Are you building a 2DReact-VR Hybrid application? I'll just rename and repurpose this issue. Would it be possible to provide sample code on how you are entering VR from your 2D layout, so that we can attempt to repro that on our end?

[grahamyesfit]

@dthian , thanks for your response. Yes, I am building a 2DReact-VR Hybrid application.

1. I came to the conclusion that there was confusion about my device dimensions because I layout our Home screen using the device's width. When I exit Viro, the layout behaves as if the code thinks the device is wider than it is. In my non-VR screen, I retrieve the width with const { width, height } = Dimensions.get('window'), and it appears to me that, after exiting Viro, the width and height are transposed. In other words, React thinks I'm in landscape, but I'm actually in portrait. I just confirmed this theory by doing a console.log on the width and height, and they are reversed. If I perform another developer reload, the issue rectifies itself.

2. I'm using react-native-router-flux, so to load my VR page, I just do a push to it, from my non-VR home screen. When I exit Viro (using the onExitViro property), I push to my non-VR Home screen, and my App gets stuck in landscape mode.

class NativeViro extends React.Component {

    _onExitViro = () => {
        this.props.push('/home');
    }

    render() {
        return (
            <ViroVRSceneNavigator
                onExitViro={this._onExitViro}
                apiKey="..."
                initialScene={{
                    scene: () => (
                        <ViroScene>
                            <Viro360Image
                                vrModeEnabled={true}
                                stereoMode="None"
                                source={{ uri: "https://s3-us-west-2.amazonaws.com/viro/Assets/photospheres/360_park.jpg" }} />
                        </ViroScene>
                    )
                }} />
        );
    }
}

[grahamyesfit]

Some extra information for (2); I changed my onExitViro action from a push to a pop, and my device re-orientates correctly after exit.

[dthian]

Hi @grahamyesfit, much thanks for your detailed description and sample code - they were extremely helpful. Both (1) and (2) above sounds like different symptoms of the same issue: That when a ViroVRSceneNavigator is rendered (not popped and thus is alive in the stack), the device orientation is not respected.

This would explain why you see incorrect dimensions, until after you reload (where viro is then no longer rendered), or after you popped Viro within onExit (Where viro is also no longer rendered) - the ViroView enforcing incorrect dimensions is gone. Hopefully the above method of popping Viro to re-enable correct re-orientation could work as a momentary mitigation?

I've filed a bug on our back log, and we'll be updating this issue as soon as the patch is pushed to release.