Expo compatibility
timoisalive opened this issue · 8 comments
Hi!
I'm trying to give the library a test but running into trouble getting started. I have a blank Expo (SDK 47) project and I have added the @flyskywhy/react-native-gcanvas package. However, when I run the project npx expo run:ios, I get following errors.
Is the library supposed to be usable with Expo? If yes, a short guide on the steps to take would be super!
Thanks!
❌ (node_modules/@flyskywhy/react-native-gcanvas/ios/RCTGCanvasModule.m:81:25)
79 | RCT_EXPORT_METHOD(disable:(NSString*) componentId)
80 | {
> 81 | [self.gcanvasModule disable:componentId];
| ^ no visible @interface for 'GCanvasModule' declares the selector 'disable:'
82 | }
83 |
84 | //preload image
❌ (node_modules/@flyskywhy/react-native-gcanvas/ios/RCTGCanvasModule.m:95:25)
93 | RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(drawCanvas2Canvas:(NSDictionary*)dict)
94 | {
> 95 | [self.gcanvasModule drawCanvas2Canvas:dict];
| ^ no visible @interface for 'GCanvasModule' declares the selector 'drawCanvas2Canvas:'
96 |
97 | return nil;
98 | }
❌ (node_modules/@flyskywhy/react-native-gcanvas/ios/RCTGCanvasModule.m:120:25)
118 | RCT_EXPORT_METHOD(setDevicePixelRatio:(NSString*)componentId ratio:(CGFloat)ratio)
119 | {
> 120 | [self.gcanvasModule setDevicePixelRatio:componentId ratio:ratio];
| ^ no visible @interface for 'GCanvasModule' declares the selector 'setDevicePixelRatio:ratio:'
121 | }
122 |
123 | RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(resetGlViewport:(NSString*)componentId)
❌ (node_modules/@flyskywhy/react-native-gcanvas/ios/RCTGCanvasModule.m:125:25)
123 | RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(resetGlViewport:(NSString*)componentId)
124 | {
> 125 | [self.gcanvasModule resetGlViewport:componentId];
| ^ no visible @interface for 'GCanvasModule' declares the selector 'resetGlViewport:'
126 |
127 | return nil;
128 | }
❌ (node_modules/@flyskywhy/react-native-gcanvas/ios/RCTGCanvasModule.m:132:32)
130 | RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(toDataURL:(NSString*)componentId mimeType:(NSString*)mimeType quality:(CGFloat)quality)
131 | {
> 132 | return [self.gcanvasModule toDataURL:componentId mimeType:mimeType quality:quality];
| ^ no visible @interface for 'GCanvasModule' declares the selector 'toDataURL:mimeType:quality:'
133 | }
134 |
135 | //set loglevel
❌ (node_modules/@flyskywhy/react-native-gcanvas/ios/RCTGCanvasModule.m:150:25)
148 | RCT_EXPORT_METHOD(render:(NSString*)componentId commands:(NSString *)commands type:(NSUInteger)type)
149 | {
> 150 | [self.gcanvasModule render:componentId commands:commands type:type];
| ^ no visible @interface for 'GCanvasModule' declares the selector 'render:commands:type:'
151 | }
152 |
153 | #pragma mark - Export Sync RN Method
If some configuration is required, a config plugin could maybe serve the need?
https://github.com/expo/config-plugins
Is npx expo run:android OK?
Android fails as well 😢
FAILURE: Build completed with 2 failures.
1: Task failed with an exception.
-----------
* Where:
Build file '/Users/xxx/yyy/gcanvas-test/android/app/build.gradle' line: 92
* What went wrong:
A problem occurred evaluating project ':app'.
> Could not open cp_dsl generic class cache for script '/Users/xxx/yyy/gcanvas-test/node_modules/react-native/react.gradle' (/Users/xxx/.gradle/caches/7.5.1/scripts/iw3zdgivw8z53seb2tteei08).
> BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 63
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================
2: Task failed with an exception.
-----------
* What went wrong:
A problem occurred configuring project ':app'.
> compileSdkVersion is not specified. Please add it to build.gradle
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================
@timoisalive Hello, a couple of days ago I tried to run this canvas as well as the react-native-pixi library outside the https://github.com/flyskywhy/snakeRN repository, for example with the latest version of react-native, or using the expo template, but I didn’t succeed, I ran into too many problems (at least I'm new and don't understand much about gradle java and writing libraries), but it seemed to me that the author still has a lot of work and he didn't plan to update it for the latest versions of nodejs react-native and expo 🙁🙁🙁. I found an analogue https://github.com/bberak/react-native-game-engine, but alas, there is not everything that is in the latest versions of pixijs.
@Mario2280 , I just test with nodejs v15 (v15 is the last version can run on Win7, other version on other OS should also be OK) to use latest version of react-native
npx react-native init RN70 --version 0.70.6
then add @flyskywhy/react-native-gcanvas just like what said in README.md, and the API's e.g. ctx.fill() also works well.
So the only problem is expo, I'll try to use expo when I'm not busy.
PS: Is the original https://github.com/flyskywhy/snakeRN without latest version of react-native or using the expo OK for you?
Breaking: Any APP now can be based on pixi.js @4, @5, @6 or @7 directly without react-native-pixi as described in react-native-pixi@3, you can easily follow the comments in example https://github.com/flyskywhy/GCanvasRNExamples/blob/master/app/components/Pixi.js to use any version of pixi.
@timoisalive , I npm install expo@47.0.13 react-native@0.70.5 into https://github.com/flyskywhy/GCanvasRNExamples as expo bare project today, and it works well on my Android phone. So is your project an expo managed project?
@timoisalive , the cause of no visible @interface for 'GCanvasModule' declares the selector 'disable:' is you miss the
Add below into `/ios/Podfile`
pod "GCanvas", :path => "../node_modules/@flyskywhy/react-native-gcanvas/GCanvas.podspec"
that desribed in README.md 😝