Current status of react-native-webgl

[gre]

no longer works on RN 0.60

• Android: it compiles now (RN 0.60) but it seems to crash at runtime when you try to draw something on GL. investigation help welcomed

pid: 4796, tid: 4826, name: mqt_js  >>> com.cookbook <<<
signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x3ee4
    eax 00000000  ebx d3975ff4  ecx cf20d5cc  edx 00000000
    edi cf20ddc8  esi d2725440
    ebp cf20dde8  esp cf20ddb8  eip d326332e
backtrace:
    #00 pc 0006332e  /data/app/com.cookbook-ruaLFWM5XjOruIDgJa_ogQ==/lib/x86/libjsc.so (JSContextGetGlobalObject+46)
    #01 pc 00084b71  /data/app/com.cookbook-ruaLFWM5XjOruIDgJa_ogQ==/lib/x86/librnwebgl.so (JSContextPrepareTypedArrayAPI+129)
    #02 pc 0003fe75  /data/app/com.cookbook-ruaLFWM5XjOruIDgJa_ogQ==/lib/x86/librnwebgl.so (RNWebGLContext::RNWebGLContext(OpaqueJSContext*, unsigned int)+149)
    #03 pc 0003fa48  /data/app/com.cookbook-ruaLFWM5XjOruIDgJa_ogQ==/lib/x86/librnwebgl.so (RNWebGLContextCreate+328)
    #04 pc 000856d4  /data/app/com.cookbook-ruaLFWM5XjOruIDgJa_ogQ==/lib/x86/librnwebgl.so (Java_fr_greweb_rnwebgl_RNWebGL_RNWebGLContextCreate+36)
    #05 pc 005f6b97  /system/lib/libart.so (art_quick_generic_jni_trampoline+71)
    #06 pc 005f0d52  /system/lib/libart.so (art_quick_invoke_static_stub+418)
    #07 pc 000a30df  /system/lib/libart.so (art::ArtMethod::Invoke(art::Thread*, unsigned int*, unsigned int, art::JValue*, char const*)+239)

• iOS: it does not even compile (testing with RN 0.60). Not sure why. help welcomed

Undefined symbols for architecture x86_64:
  "_OBJC_CLASS_$_RNWebGLView", referenced from:
      objc-class-ref in libreact-native-webgl.a(RNWebGLViewManager.o)
     (maybe you meant: _OBJC_CLASS_$_RNWebGLViewManager
)

project ownership issues

• I don't have myself the access to push to NPM any update ( cc @brentvatne or whoever is the owner )

long term vision

I think ideally we need to make this project just consume an embedded version of Expo's GLView, especially now that expo offers a way to get an independent library out of the box.

We need someone to dig how easy it is to get this done and we could just wrap it in this library. The main pain point i can see is if we want to keep the support of things like Camera stream.

[brentvatne]

not sure what happened with npm permissions but that's been fixed now :)

[ysrarff]

Any updates on this issue? :(

I'm getting this error:

Exception '-[RCTCxxBridge jsContextRef]: unrecognized selector sent to instance 0x141e74b60' was thrown from JS thread

Whenever there's a call to <Surface></Surface>

[illestrater]

Would definitely like some pointers. Would like to utilize THREE.js in RN without Expo, but I'm unable to get RN WebGL to work

[brentvatne]

@illestrater - you can install this on any react-native app: https://github.com/expo/expo/blob/master/packages/expo-gl/README.md

as @gre mentioned in the op:

I think ideally we need to make this project just consume an embedded version of Expo's GLView, especially now that expo offers a way to get an independent library out of the box.

[ashusaini]

@brentvatne expo-gl depends on react-native-unimodules, but https://github.com/unimodules/react-native-unimodules react-native-unimodules are not compatible with React Native 0.60.x yet.

[brentvatne]

@ashusaini - it should work on android if you use jetifier. I have no issue using it on ios with 0.60

[shub-singh-mail]

Hi @brentvatne

I tried running a fresh project with :

react-native 0.60.5 expo-gl 6.0.0 react-native-unimodules, 0.5.4 expo-gl-cpp 6.0.0

but i was unable to run it on ios and android.

If you have an example project then please share with us !!

UPDATE I was able to run it successfully on ios, but on android I am having build errors

[rndm-jpg]

Just wondering if anyone know what the latest setup (RN version, gradle version, and NDK version) to get the library up and running. Any example project would be extremely helpful.

[ashusaini]

Thanks, @brentvatne it's working with both ios and android. with the following configs.

android: buildToolsVersion = "28.0.3" gradle:3.4.1

enableHermes: false,

React Native: "expo-camera": "^7.0.0", "expo-gl": "^6.0.0", "expo-gl-cpp": "^7.0.0", "expo-image-picker": "^7.0.0", "expo-location": "^7.0.0", "gl-react": "^3.17.2", "gl-react-expo": "^3.17.2", "gl-react-native": "^3.17.2", "react": "16.9.0", "react-native": "0.61.1", "react-native-unimodules": "^0.7.0-rc.1",

[TheHothihi]

Build success on arm64-v8a @ react-native 0.61.5 when making those changes, but still app crash on runtime.

node_modules/react-native-webgl/android/src/main/jni/Application.mk:

3    APP_ABI := armeabi-v7a arm64-v8a #<--adding arm64-v8a

10 APP_STL := c++_shared #<--change it to c++_shared if the library is installed though npm

20 #NDK_TOOLCHAIN_VERSION := 4.9 #<---removing line 20 if the library is installed though npm

node_modules/react-native-webgl/android/build.gradle:

 3  repositories {
 4    google() //<--adding google()
 5    jcenter()
 6 }

 101  file('src/main/jni') //all start with file
 102  file('../cpp')
 103  file("$buildDir/exgl/all")

124       exclude '**/libc++_shared.so' //<--change it to libc++_shared.so if the library is installed though npm

137       abiFilters "armeabi-v7a", "arm64-v8a" //<--adding arm64-v8a

node_modules/react-native-webgl/cpp/JSUtils.h:

10 #include <stdint.h> //<--adding this line

If the error message libc++_shared.so is duplicated shwon, on app/build.gradle:

android {
    packagingOptions {
        pickFirst '**/libc++_shared.so'
    }
}

Environment:

macOS 10.15.2 Android Studio 3.5 react-native 0.61.5 Nodejs v10.16.0 clang version 11.0.0 Testing Device: Samsung Galaxy C7

Error Message:

Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0xee0f0434 in tid 16493 (mqt_js), pid 16138

The error MAY BE caused by 64bit pointer pointed to error address while running on 32bit code????? I am not familiar with 32bit/64bit C++ code, anyone know?

[gre]

see https://github.com/react-native-community/react-native-webgl/pull/100