Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

GLView inside react-navigation 5

See original GitHub issue

🐛 Bug Report

Summary

If using expo-gl inside react-navigation 5 the app crashs with an undefined is not an object exception (evaluating glexVersion.split) and (evaluating viewport[2]). Sometimes you need to reload the app 2-3 times in order to reproduce this error. The error happens on android device only. Been able to reproduce on real device and simulator.

Might be related to https://github.com/expo/expo/issues/7623 but ticket is closed.

Environment

  Expo CLI 3.21.5 environment info:
    System:
      OS: Windows 10 10.0.19041
    Binaries:
      Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      expo: ~37.0.3 => 37.0.12
      react: ~16.9.0 => 16.9.0
      react-dom: ~16.9.0 => 16.9.0
      react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4
      react-native-web: ~0.11.7 => 0.11.7

Reproducible Demo

Snack: https://snack.expo.io/@trexpert/rn5-expo-gl

Steps to Reproduce

expo init
yarn add @react-navigation/native @react-navigation/stack
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view expo-gl

Add simple App.js:

import React from 'react';
import { View } from 'react-native';
import { GLView } from 'expo-gl'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { CardStyleInterpolators, TransitionPresets } from '@react-navigation/stack'

const Stack = createStackNavigator()

const Splash = () => {
  console.log('render splash: ', true)

  const onContextCreated = () => { }

  return (
    <View style={ { flex: 1, backgroundColor: 'red' } }>
      <GLView style={ { flex: 1, backgroundColor: 'yellow' } } onContextCreate={ onContextCreated } />
    </View>
  )
}

export default function App () {

  console.log('render app: ', true)

  return (
    <View style={ { flex: 1 } }>
      <NavigationContainer>
        <Stack.Navigator screenOptions={ {
          cardStyleInterpolator: CardStyleInterpolators.forNoAnimation
        } }>
          <Stack.Screen name="Splash" component={ Splash } />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  )
}

Expected Behavior vs Actual Behavior

It should not crash 😃

if i remove the cardStyleInterpolator within the screenOptions everything runs fine,

it looks like there are no undefined checks within the GLView.js code (Line ~542):

  // Drawing buffer width/height
  // TODO(nikki): Make this dynamic
  const viewport = gl.getParameter(gl.VIEWPORT);
  gl.drawingBufferWidth = viewport[2];
  gl.drawingBufferHeight = viewport[3];

Same here (GLView.js - line 507):

  // determine the prototype to use, depending on OpenGL ES version
  const glesVersion = gl.getParameter(gl.VERSION);
  const supportsWebGL2 = parseFloat(glesVersion.split(/[^\d.]+/g).join(' ')) >= 3.0;