Viro: Viro on Android crashes (GLSurfaceView) when using Drawer from react-navigation

[tuur29]

• [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

Environment

Please provide the following information about your environment:

1. Development OS: Mac, Windows
2. Device OS & Version:
   
   
   
   • ThinkPad X1 Extreme with Windows 10 1809
   
   
   • Macbook Pro 13" 2016 with MacOS 10.14.3
   
   
3. Version: Viro 2.14.0, React Native 0.59.3
4. Device(s):
   
   
   
   • Pixel 3 (non xl) on Android 9.0 (April sec update, PQ2A)
   
   
   • LG G6 (H870) on Andoid 8.0 (November sec update, V20g)
   
   
   • iPhone 7 with iOS 12.2
   
   

Description

My android app crashes when using the DrawerNavigator from react-navigation. This happens when you navigate back to the ViroScene. This is the error in the android logcat:

NullPointerException: Attempt to invoke virtual method 'android.view.SurfaceHolder
android.opengl.GLSurfaceView.getHolder()' on a null object reference at 
com.viro.core.ViroViewARCore$ViroARRenderer.onSurfaceCreated

Doesn't happen on iOS but happens on both Android 8 & 9 (check devices above).

388 issue seems related, but the 'solution' isn't helpful in the case of drawer navigation.

Possible workaround

We tried fixing this issue by manually destroying the ViroScene before navigation happens and only rendering it after navigation to the page has completed with NavigationEvents. This works, but obviously the coordinate system is reset and all objects have moved since we built a new ViroScene. Not a great solution.

Reproducible Demo

I made a small demo project. You can view the important code on my gist: https://gist.github.com/tuur29/ff0a17a6ced257b37977bc9e2b849187

The full project can be downloaded here: viro-nav.zip

1. Download project and install node packages
2. Set apikey in App.js
3. run npm android or yarn android to build a android app
4. Follow instructions on screen or description above

Video

[shokimble]

Interesting. I'm using the DrawerLayout from react-native-gesture-handler which react-navigation drawer is based upon.

I've not hit it with emulated devices or a Nokia 6.1 I have. Not tried other devices yet. Could be specific hardware that has the problem.

I was going to suggest disabling native animations but DrawerLayout uses them too.

[antoinerousseau]

I'm having this crash as well when used in react-navigation. My current workaround is to remove (unmount) the viro scene before leaving the nav screen, by waiting a few hundred milliseconds, but it's complicating my code and my UI...

java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.SurfaceHolder android.opengl.GLSurfaceView.getHolder()' on a null object reference
    at com.viro.core.ViroViewARCore$ViroARRenderer.onSurfaceCreated(ViroViewARCore.java:262)
    at android.opengl.GLSurfaceView$GLThread.guardedRun(GLSurfaceView.java:1539)
    at android.opengl.GLSurfaceView$GLThread.run(GLSurfaceView.java:1270)

related deps:

"react-native": "0.59",
"react-native-gesture-handler": "1.3",
"react-native-reanimated": "^1.2.0",
"react-native-screens": "1.0.0-alpha.22",
"react-navigation": "^3.12.1",
"react-viro": "^2.16.0",

[radvani]

This looks like a lifecycle issue caused by rapidly creating and disposing the view. We have a potential mitigation for this in the next release. Thanks!

[antoinerousseau]

This looks like a lifecycle issue caused by rapidly creating and disposing the view. We have a potential mitigation for this in the next release. Thanks!

Perfect, thank you very much!

[antoinerousseau]

@radvani the crash still happens with the freshly released ViroReact v2.17.0, although the release notes say "Fixed potential NPEs when using React Navigation drawer." 😢

FATAL EXCEPTION: GLThread 3471
Process: com.artefac, PID: 28594
java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.SurfaceHolder android.opengl.GLSurfaceView.getHolder()' on a null object reference
    at com.viro.core.ViroViewARCore$ViroARRenderer.onSurfaceChanged(ViroViewARCore.java:304)
    at android.opengl.GLSurfaceView$GLThread.guardedRun(GLSurfaceView.java:1555)
    at android.opengl.GLSurfaceView$GLThread.run(GLSurfaceView.java:1270)

[nhatvuminh]

I have same issue with react-navigation/bottom-tabs. Any update or fix it?

[nhatvuminh]

Good news! I'm trying with createBottomTabNavigator and react-navigation. In TabNavigator, I'm set

unmountOnBlur: true

crash is gone. Hope this help! :)