rnc-archive / react-native-webgl

DEPRECATED: use expo-gl – Implements WebGL for react-native
295 stars 73 forks source link

Not working with latest react-native #79

Closed bharatidudhrejiya closed 5 years ago

bharatidudhrejiya commented 5 years ago

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 commented 5 years ago

There is any one to help me!

medelvann commented 5 years ago

did you solve the problem? i have this too.

skizzo commented 5 years ago

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

zhelezkov commented 5 years ago

Hi guys, any suggestions on this?

sunnylqm commented 5 years ago

I think it is related to the jsi/jsc refactor https://github.com/facebook/react-native/commit/c49d3653ef35bb3b932055027af0c0a6bab91d84#diff-e15318f48b6447f2d9936c5e047d882fL395 which happened in 0.58

sunnylqm commented 5 years ago

Update: need to rewrite as a turbo module for rn 0.58+ https://github.com/react-native-community/discussions-and-proposals/issues/40#issuecomment-465680218

aleksey89 commented 5 years ago

Hi guys, any progress on this?

vaukalak commented 5 years ago

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: https://github.com/realm/realm-js/pull/2242/commits/f6c0e831a5b1bb8fc466550359d0b226c8b9fa39

vaukalak commented 5 years ago

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 commented 5 years ago

after doing this, I am facing this error 'Cocoa/Cocoa.h' file not found I found one solution https://github.com/react-native-community/react-native-webgl/issues/74 after applying this solution I am facing 10 errors

what i should do

vaukalak commented 5 years ago

@nomi9995 I think you should provide error log.

numandev1 commented 5 years ago

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

numandev1 commented 5 years ago

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 https://github.com/react-native-community/react-native-webgl/issues/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 commented 5 years ago

loggg @vaukalak you can see error log

vaukalak commented 5 years ago

@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 commented 5 years ago

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 https://github.com/react-native-community/react-native-webgl/issues/74#issuecomment-422532730 this comment then i recieved many error which i have posted above

numandev1 commented 5 years ago

@vaukalak tell me the solution what should I do?

vaukalak commented 5 years ago

@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 commented 5 years ago

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

Screenshot 2019-04-23 at 1 13 38 PM Screenshot 2019-04-23 at 1 31 16 PM

vaukalak commented 5 years ago

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

numandev1 commented 5 years ago

@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) Screenshot 2019-04-26 at 12 44 22 AM Screenshot 2019-04-26 at 12 49 41 AM

numandev1 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

ARRHHGGGH!

What's actually going on?

Andrei-Vakulski commented 5 years ago

Same issue on react native 0.60

david-saint commented 5 years ago

@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 react-native@0.59.9 and using this with gl-react and gl-react-native

shub-singh-mail commented 5 years ago

@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 react-native@0.59.9 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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

SiddharthRana commented 4 years ago

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.