search

gjtiquia / react-native-web-skia

A demo project to test the compatibility between React Native Web and React Native Skia using an Expo managed workflow.
https://react-native-web-skia-demo.netlify.app/
1 stars 1 forks source link

expo-router and metro bundler #2

Open odhekar opened 1 year ago

odhekar commented 1 year ago

This is great. I was wondering if you have managed to get this working with expo-router?

gjtiquia commented 1 year ago

Glad you found it useful!

I haven't used expo-router before, I think it's still rather new. According to the docs it's built on top of React Navigation. I'm not sure what that means exactly, but the examples shown in the React Native Skia repo use React Navigation, so I think it should be theoretically supported. Keep in mind, it seems to me that the examples in the React Native Skia repo use the React Native CLI instead of Expo, further testing is needed.

odhekar commented 1 year ago

so got everything wired with expo-router as well. It's here for reference, https://github.com/odhekar/expo-router-react-native-skia

gjtiquia commented 1 year ago

This is great! Thanks a lot!

odhekar commented 1 year ago

don't want to nag you but were you able to load skia on both web and mobile (Android using expo go)? It loads just blank on expo go but works alright on web. I am using Platform.OS to selectively load skia using WithSkiaWeb (web) or just use the HelloWorld/Breath components as is (Android).

gjtiquia commented 1 year ago

Yup I got it to work! Tried so many things, including Platform.OS, and I found that the only way to get it to work was with Platform-specific extensions.

If you look into my source code in the /src directory you can see that I used Main.tsx for web and Main.native.tsx for iOS and Android.

If you dig deep into the React Native Skia repo under the /example directory, you can see that they used platform-specific extensions too, index.js and index.web.js. Worth noting that they are using defered component registration instead of code-splitting using the <WithSkiaWeb> component.

My guess is that on mobile there would be a compile error when trying to import the WithSkiaWeb. Even if you used Platform.OS, since it is in the import statement it will still get compiled. The only workaround I know to make sure it doesn't even get compiled is by using Platform-specific extensions.

Check out my answer on stack overflow where I answered something similar to this.

Wish you luck!