Not working with latest react-native

[bharatidudhrejiya]

I am trying to implement this library with gl-react but it is not working.

It return error like
[tid:com.facebook.react.JavaScript] Exception '-[RCTCxxBridge jsContextRef]: unrecognized selector sent to instance 0x166d5740' was thrown from JS thread

Thanks!

[bharatidudhrejiya]

There is any one to help me!

[medelvann]

did you solve the problem? i have this too.

[skizzo]

same problem here, please let us know how to fix this!

[zhelezkov]

Hi guys, any suggestions on this?

[sunnylqm]

I think it is related to the jsi/jsc refactor facebook/react-native@c49d365#diff-e15318f48b6447f2d9936c5e047d882fL395 which happened in 0.58

[sunnylqm]

Update: need to rewrite as a turbo module for rn 0.58+
react-native-community/discussions-and-proposals#40 (comment)

[aleksey89]

Hi guys, any progress on this?

[vaukalak]

Looks like jsContextRef has been removed from react-native starting from 0.58, realm has also faced this issue, and it has been resolved this way: realm/realm-js@f6c0e83

[vaukalak]

Hey Guys, I think I was able to add patch for that to work with react-native 0.58 (at least works on my sandbox project). To run that before this PR will be merged:

1 - change your dependency in package.json file "react-native-webgl": "git+https://github.com/vaukalak/react-native-webgl#133b5ae0b53cf0388c66492b5dc9f4ef2a016198"
2 - add this to scripts section of package.json

"postinstall": "cd node_modules/react-native-webgl && npm i && npm run prepublish",

3 - yarn or npm i
4 - I'm not sure if you really need this step, but run:

react-native unlink react-native-webgl
react-native link react-native-webgl

and clean xcode build
5 - compile the app.
everything should work.

[numandev1]

after doing this, I am facing this error
'Cocoa/Cocoa.h' file not found
I found one solution #74
after applying this solution I am facing 10 errors

what i should do

[vaukalak]

@nomi9995 I think you should provide error log.

[numandev1]

@vaukalak
now i have leave webgl and depending with old version of gl-react-native and gl-react

[numandev1]

first i am getting this error

[tid:com.facebook.react.JavaScript] Exception '-[RCTCxxBridge jsContextRef]: unrecognized selector sent to instance 0x166d5740' was thrown from JS thread

after this error i apply prepublish solution for react native 58
git+https://github.com/vaukalak/react-native-webgl#133b5ae0b53cf0388c66492b5dc9f4ef2a016198

after resolving that issue i got #74 this issue ("'Cocoa/Cocoa.h' file not found")

after delete mac folder and mac.xcodeproj i got 10 new errors then i leaved it

[numandev1]

@vaukalak you can see error log

[vaukalak]

@nomi9995 could you please confirm that after you have applied new dependency and postInstall script:

rm -rf node_modules/
yarn
react-native unlink react-native-webgl
react-native link react-native-webgl

and then cleaned build folder? (cmd + clean)

[numandev1]

yeah i added
"postinstall": "cd node_modules/react-native-webgl && npm i && npm run prepublish",
and run this command
watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start -- --reset-cache
after that i unlinked manually and linked manually and then run xcode. xcode gave me #74 problem. when i resolve #74 problem by #74 (comment) this comment then i recieved many error which i have posted above

[numandev1]

@vaukalak tell me the solution what should I do?

[vaukalak]

@nomi9995 sorry, I haven't got a lot of time this week. I've created a new PR, now you should ref another commit in your dependency 298c8746f78443465e1fcf9315cd059309ebaac5.

"react-native-webgl": "git+https://github.com/vaukalak/react-native-webgl#298c8746f78443465e1fcf9315cd059309ebaac5"

Hope that works.

[numandev1]

after adding this commit to package.json and installing node_modules every time I got error "Cocoa/Cocoa.h' file not found" and

i have to delete node_modules/react-native-webgl/GPUImageMac.xcodeproj and
MAC folder inside framework/source manually

after this app is installing successfully by xcode but thing are not working and i am getting one warning. i am going to attach two screenshots
1- for "Cocoa/Cocoa.h' file not found"
2- for warning after installing app

[vaukalak]

@nomi9995 could you please checkout this test project and let me know if it works for you https://github.com/vaukalak/glexample ?

[numandev1]

@vaukalak
sorry I was too much busy this week. I cloned this glexample and run then i got four error and one was Cocoa/Cocoa.h' file not found
after delete mac folder and mac.xcodeproj from react-native-webgl/ios/framework then app run successfully with one warning
i attach my two screenshots below.
in my case. i am using react-native-webgl with gl-react and gl-react-native by
yarn add gl-react@next gl-react-native@next react-native-webgl
and i replace webgl with your repo commit then my app run with same warning which i have faced now
but in this example red box is showing on my app screen but with gl-react-native i am facing white screen
my app run perfect with the combination gl-react and gl-react-native but i face one error due to latest version of react native
unable to find module for uimanager (lazilyloadIfNeccessary)

[numandev1]

i do not use webgl directly in my app. I am using gl-react and gl-react-native directly in my app. gl-react-native v3 is using webgl

[johhansantana]

I created a new project with react-native init and then installed this library following the readme. I add the example component there as well but I get the error mentioned here by the OP (RCTCxxBridge...).

I see the PR is merged, should I still be doing the workaround that @vaukalak mentioned?

[ducNgbk]

How are react native 0.58 or above on Android
I build succeed. However, app crashes every time I launch it
Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0xee0f0434 in tid 16493 (mqt_js), pid 16138 (com.testthree)

[david-saint]

ARRHHGGGH!

What's actually going on?

[Andrei-Vakulski]

Same issue on react native 0.60

[david-saint]

@nomi9995 sorry, I haven't got a lot of time this week. I've created a new PR, now you should ref another commit in your dependency 298c8746f78443465e1fcf9315cd059309ebaac5.

"react-native-webgl": "git+https://github.com/vaukalak/react-native-webgl#298c8746f78443465e1fcf9315cd059309ebaac5"

Hope that works.

I love you man!!! ❤️😩

This worked for me.

I'm using [email protected] and using this with gl-react and gl-react-native

[shub-singh-mail]

@nomi9995 sorry, I haven't got a lot of time this week. I've created a new PR, now you should ref another commit in your dependency 298c8746f78443465e1fcf9315cd059309ebaac5.

"react-native-webgl": "git+https://github.com/vaukalak/react-native-webgl#298c8746f78443465e1fcf9315cd059309ebaac5"

Hope that works.

I love you man!!! ❤️😩

This worked for me.

I'm using [email protected] and using this with gl-react and gl-react-native

hey @david-saint , can u please help me .. I have same the config but I cannot fix the error

what were the steps you followed?

[david-saint]

What's the error you're facing? @shub-singh-mail

You can try to make sure you're building with the Legacy Build, and also don't enable Debug JS Remotely, I noticed the Surface doesn't load when debugging remotely.

[shub-singh-mail]

Hi @david-saint
Thank you for the quick reply

Below are the steps I followed :

npm install gl-react@next gl-react-native@next react-native-webgl
react-native link react-native-webgl
followed react-native-webgl additional steps too.

dependencies : -

react : 16.8.3
react-native : 0.59.9
gl-react : "^3.14.0",
gl-react-native : "^3.14.0",
react-native-webgl : "git+https://github.com/vaukalak/react-native-webgl#298c8746f78443465e1fcf9315cd059309ebaac5"

added postinstall script and also changed to legacy build :

on IOS :
after hitting npm install

SyntaxError: src/ImageLoaderExtension.js: Unexpected token (6:2)
4 |
5 | RNExtension.addMiddleware(ext => ({

6 | ...ext,
| ^
7 | loadTexture: arg => {
8 | if (typeof arg.image === "number") {
9 | // Resolve RN local asset require()

I updated gl-react and gl-react-native to 3.15.0 but still same error

But after running the project I got this error :

Error: While trying to resolve module react-native-webgl from file /path-to-project/node_modules/gl-react-native/lib/GLViewNative.js

so I changed package.json main : 'lib/index.js' to 'src/index.js' which made it run on ios successfully 👍

but on Android i got the below errors :

1. Could not find method leftShift() for arguments [build_d6h1sm2pfgynxecn6ljlignsa$_run_closure3@346b0702] on task ':react-native-webgl:prepareJSC' of type org.gradle.api.DefaultTask.

so I change << on prepareJsc to doLast

2. Some problems were found with the configuration of task ':react-native-webgl:buildRNWebGLLib'.

File '/path/node_modules/react-native-webgl/android/src/main/jni' specified for property '$1' is not a file.
File 'path/node_modules/react-native-webgl/cpp' specified for property '$2' is not a file.

so i commented
inputs.file('src/main/jni')
inputs.file('../cpp')

3. Task :react-native-webgl:buildRNWebGLLib FAILED
   Android NDK: android-9 is unsupported. Using minimum supported version android-16.

so I changed android-9 to android-16 in Application.mk

4. Android NDK: APP_STL gnustl_shared is no longer supported. Please switch to either c++_static or c++_shared.
   so i changed APP_STL to c___static in Application.mk

5. Android NDK: Invalid NDK_TOOLCHAIN_VERSION value: 4.9. GCC is no longer supported
   so i changed it to clang3.6

Now the app builds successfully but crashes every time i open it.

How were you able to run it on android ?

EDIT :

Here are the android studio logs for the crash

Error when loading lib: dlopen failed: "/data/data/com.filters/lib-main/librnwebgl.so" is 32-bit instead of 64-bit lib hash: 8882e78075b9e4c599bde28c9e30f5a0 search path is /data/app/com.filters-1/lib/arm64
2019-07-13 20:22:47.061 16419-16457/com.filters E/SoLoader: couldn't find DSO to load: librnwebgl.so caused by: dlopen failed: "/data/data/com.filters/lib-main/librnwebgl.so" is 32-bit instead of 64-bit
2019-07-13 20:22:47.062 16419-16457/com.filters E/AndroidRuntime: FATAL EXCEPTION: mqt_js
Process: com.filters, PID: 16419
java.lang.UnsatisfiedLinkError: couldn't find DSO to load: librnwebgl.so caused by: dlopen failed: "/data/data/com.filters/lib-main/librnwebgl.so" is 32-bit instead of 64-bit
at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:738)
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:591)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:529)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:484)
at fr.greweb.rnwebgl.RNWebGL.(RNWebGL.java:8)
at fr.greweb.rnwebgl.RNWebGL.RNWebGLContextCreate(Native Method)
at fr.greweb.rnwebgl.RNWebGLView$1.run(RNWebGLView.java:50)
at android.os.Handler.handleCallback(Handler.java:751)
at android.os.Handler.dispatchMessage(Handler.java:95)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
at android.os.Looper.loop(Looper.java:154)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:232)
at java.lang.Thread.run(Thread.java:762)

[skizzo]

I'd really like to use this package for a RN (0.59.10) Android app. Did anybody here manage to do so?

[SiddharthRana]

hey @shub-singh-mail did you find the solution to this? I am stuck in the same issue as you. Any help would be appreciated.