I want to run react native project in xamarin android. I have gone through the following. They are connecting React native and Xamarin using React native bridge.
https://github.com/voydz/xamarin-react-native
Following is my package.json code
{
"name": "xamarin-react-native",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"bundle-android": "npx bundle-sample-android && npx bundle-sample-forms-android",
"bundle-sample-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output ../samples/SampleApp.Droid/Assets/index.android.bundle --assets-dest ../samples/SampleApp.Droid/Resources/",
"bundle-sample-forms-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output ../samples/SampleApp.Forms.Droid/Assets/index.android.bundle --assets-dest ../samples/SampleApp.Forms.Droid/Resources/",
"bundle-ios": "yarn bundle-sample-ios && yarn bundle-sample-forms-ios",
"bundle-sample-ios": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ../samples/SampleApp.iOS/Resources/main.jsbundle --assets-dest ../samples/SampleApp.iOS/Resources/",
"bundle-sample-forms-ios": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ../samples/SampleApp.Forms.iOS/Resources/main.jsbundle --assets-dest ../samples/SampleApp.Forms.iOS/Resources/"
},
"dependencies": {
"react": "18.2.0",
"react-native": "^0.71.4"
}
}
When I run the following commands
npm install
npm start
npm bundle-sample-android
My index.android.bundle file is getting updated in Sample project which is exactly what I wanted. But there is only one small problem. There is a file name react-native-0.55.3.aar which is already present in Jars folder. I need to replace it with react-native-0.71.4.aar. This react-native-0.55.3.aar file gives me error
Error occured while reading the file '..\node_modules\react-native\android\com\facebook\react\react-native\0.55.3\react-native-0.55.3.aar'.
Currently I have downgraded my Node from 18.8.0 to 9.11.1 to use react-native-0.55.3.aar. It is working in the older versions of node. But my requirement is to use the latest react-native-0.71.4.aar and Node 18.8.0. I have no clue how to fix this. Any suggestions?
The Xamarin build files are directly looking for that file. Update this:
<LibraryProjectZip Include="..\node_modules\react-native\android\com\facebook\react\react-native\0.55.3\react-native-0.55.3.aar">
in the binding/ReactNative.Droid/ReactNative.Droid.csproj file.
That said, this will very likely explode. The project is bundling very outdated AARs which are used by RN itself, so you will get a bunch of extra build conflicts by changing the core version, unless Xamarin is smart enough to discard those in favor of the newer ones required by the latest RN. You'll need to check the dependencies from the RN android repository, and update everything based on that.
Now, you want to do this in order to run WASM... react-native does not run WASM. In fact, react-native does not run all the JS code you want to throw at it. It runs the JS code supported by the embedded js engine, in the latest editions, Hermes, and Hermes does not support WASM:
https://github.com/facebook/hermes/issues/429
You would have to either link a different JS engine through JSI (which is kinda hard. I hope there's documentation now, but when I tried a couple years ago there was ZERO docs, in the entire internet, besides a chinese blog), or run through a webview. So you get a ton of extra work in each platform, and more slowness.
And on top of that, Apple does not like this kind of thing. Keep it mind.
Android-wise, your best bet is to use
https://developer.android.com/develop/ui/views/layout/webapps/jsengine
Or link to an embeddable JS engine able to execute WASM (maybe Zipline)