Integrate React Native into a Xamarin project

I was able to get this working using the steps below. There's a lot here so please forgive me if I missed a detail.

Build a Static Library

1. Create a Cocoa Touch Static Library project in Xcode.

2. Install React Native in the same directory.

   npm install react-native
   

3. Add all the React Xcode projects to your project. (Screenshot) You can look at the .pbxproj file of an existing React Native app for clues on how to find all these.
4. Add React to the Target Dependencies build phase. (Screenshot)
5. Include all the React targets in the Link Binary With Libraries build phase. (Screenshot)
6. Be sure to include -lc++ in the Other Linker Flags build setting.
7. Use lipo to create a universal library (fat file). See Building Universal Native Libraries section in Xamarin documentation.

Create a Xamarin App

1. Create a new iOS Single View App project/solution in Visual Studio. (Screenshot)
2. Add an iOS Bindings Library project to the solution. (Screenshot)
3. Add your universal static library as a Native Reference to the bindings library project.
4. Set Frameworks to JavaScriptCore and Linker Flags to -lstdc++ in the properties for the native reference. This fixes the linker errors mentioned in the original question. Also enable Force Load. (Screenshot)

5. Add the following code to ApiDefinition.cs. Be sure to include using statements for System, Foundation, and UIKit.

   // @interface RCTBundleURLProvider : NSObject
   [BaseType(typeof(NSObject))]
   interface RCTBundleURLProvider
   {
       // +(instancetype)sharedSettings;
       [Static]
       [Export("sharedSettings")]
       RCTBundleURLProvider SharedSettings();
   
       // -(NSURL *)jsBundleURLForBundleRoot:(NSString *)bundleRoot fallbackResource:(NSString *)resourceName;
       [Export("jsBundleURLForBundleRoot:fallbackResource:")]
       NSUrl JsBundleURLForBundleRoot(string bundleRoot, [NullAllowed] string resourceName);
   }
   
   // @interface RCTRootView : UIView
   [BaseType(typeof(UIView))]
   interface RCTRootView
   {
       // -(instancetype)initWithBundleURL:(NSURL *)bundleURL moduleName:(NSString *)moduleName initialProperties:(NSDictionary *)initialProperties launchOptions:(NSDictionary *)launchOptions;
       [Export("initWithBundleURL:moduleName:initialProperties:launchOptions:")]
       IntPtr Constructor(NSUrl bundleURL, string moduleName, [NullAllowed] NSDictionary initialProperties, [NullAllowed] NSDictionary launchOptions);
   }
   
   // @protocol RCTBridgeModule <NSObject>
   [Protocol, Model]
   [BaseType(typeof(NSObject))]
   interface RCTBridgeModule
   {
   
   }
   

6. Add the following code to Structs.cs. Be sure to include using statements for System, System.Runtime.InteropServices, and Foundation.

   [StructLayout(LayoutKind.Sequential)]
   public struct RCTMethodInfo
   {
       public string jsName;
       public string objcName;
       public bool isSync;
   }
   
   public static class CFunctions
   {
       [DllImport ("__Internal")]
       public static extern void RCTRegisterModule(IntPtr module);
   }
   

7. Add a reference to the bindings library project in the app project.

8. Add the following code to the FinishedLaunching method in AppDelegate.cs. Don't forget to add a using statement for the namespace of your bindings library and specify the name of your React Native app.

   var jsCodeLocation = RCTBundleURLProvider.SharedSettings().JsBundleURLForBundleRoot("index", null);
   var rootView = new RCTRootView(jsCodeLocation, "<Name of your React app>", null, launchOptions);
   
   Window = new UIWindow(UIScreen.MainScreen.Bounds);
   Window.RootViewController = new UIViewController() { View = rootView };
   Window.MakeKeyAndVisible();
   

9. Add the following to Info.plist.

   <key>UIViewControllerBasedStatusBarAppearance</key>
   <false/>
   <key>NSAppTransportSecurity</key>
   <dict>
       <key>NSExceptionDomains</key>
       <dict>
           <key>localhost</key>
           <dict>
               <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
               <true/>
           </dict>
       </dict>
   </dict>
   

At this point, you should be able to run any React Native app by launching the React Packager (react-native start) in the corresponding directory. The following sections will show you how to call C# from React Native.

Create a Native Module

1. Add a class to your iOS app project.

2. Have the class inherit RCTBridgeModule (from your bindings library).

   public class TestClass : RCTBridgeModule
   

3. Add the ModuleName method to your class. Change the value returned to whatever you want to call the class in JavaScript. You can specify empty string to use the original.

   [Export("moduleName")]
   public static string ModuleName() => "TestClass";
   

4. Add the RequiresMainQueueSetup method to your class. I think this will need to return true if you implement a native (UI) component.

   [Export("requiresMainQueueSetup")]
   public static bool RequiresMainQueueSetup() => false;
   

5. Write the method that you want to export (call from JavaScript). Here is an example.

   [Export("test:")]
   public void Test(string msg) => Debug.WriteLine(msg);
   

6. For each method that you export, write an additional method that returns information about it. The names of each of these methods will need to start with __rct_export__. The rest of the name doesn't matter as long as it is unique. The only way I could find to get this to work was to return an IntPtr instead of an RCTMethodInfo. Below is an example.

   [Export("__rct_export__test")]
   public static IntPtr TestExport()
   {
       var temp = new RCTMethodInfo()
       {
           jsName = string.Empty,
           objcName = "test: (NSString*) msg",
           isSync = false
       };
       var ptr = Marshal.AllocHGlobal(Marshal.SizeOf(temp));
   
       Marshal.StructureToPtr(temp, ptr, false);
   
       return ptr;
   }
   

   • jsNameis the name you want to call the method from JavaScript. You can specify empty string to use the original.
   • objcName is the equivalent Objective-C signature of the method.
   • I'm not sure what isSync is.

7. Please register your class before launching the view in AppDelegate.cs. The name of the class will be the fully qualified name with underscores instead of dots. Here is an example.

   CFunctions.RCTRegisterModule(ObjCRuntime.Class.GetHandle("ReactTest_TestClass"));
   

Calling native modules from JavaScript

1. Import NativeModulesyour JavaScript file.

   import { NativeModules } from 'react-native';
   

2. Call one of your exported methods.

   NativeModules.TestClass.test('C# called successfully.');