Custom component to communicate back to JavaScript

How-to Discussions
1

We’re working on MapBox integration, and was able to create component which shows map.

Now we’re working on adding more features.

I want to communicate back to JavaScript like

<Native.NeonMapBox AnnotationClicked="{myCallback}" />

I’ve checked this post: https://www.fusetools.com/community/forums/howto_discussions/push_from_uno_to_javascript, but I’m not able to inherit my component from NativeModule as I receive message that my component can inherit from only one base class or something like that.

Here is the code I have:

Every time I tap annotation on the map, selectedAnnotation method is called, I want to be able to run JS callback and pass arguments to that callback.

using Uno;
using Uno.UX;
using Uno.Time;
using Uno.Compiler.ExportTargetInterop;
using Fuse;
using Fuse.Controls;
using Fuse.Controls.Native;
using Fuse.Controls.Native.iOS;
// event support
using Fuse.Scripting;
using Fuse.Reactive;


namespace Native.iOS
{
	[Require("Source.Include", "UIKit/UIKit.h")]
	[Require("Xcode.Plist.Element", "<key>MGLMapboxAccessToken</key><string>pk.eyJ1IjoicGF2ZWxrb3N0ZW5rbyIsImEiOiJjajVmYWYwMW8xMWc0MzNvZGt1ajZhdHlzIn0.v3z5PDM8pAbRZZnCHWka5Q</string>")]

    [extern(iOS) Require("Source.Include", "Mapbox/Mapbox.h")]
	[ForeignInclude(Language.ObjC, "NeonMapBox-Swift.h")]
	extern(iOS) public class NeonMapBox : LeafView, NeonMapBoxView
	{
		NeonMapBoxDelegate _host;
		// NativeEvent _nativeEvent; // UNO to JS support

        [UXConstructor]
		public NeonMapBox([UXParameter("Host")]NeonMapBoxDelegate host) : base(Create())
		{
			_host = host;
			getCalback(Handle);
			// event support
			// _nativeEvent = new NativeEvent("onMessageReceived");
            // AddMember(_nativeEvent);
		}

		void onClickedButton(ObjC.Object sender, ObjC.Object args)
		{
			
		}

		void selectedAnnotation(string userName)
		{
			debug_log "Selected User " + userName;
		}

		[Foreign(Language.ObjC)]
		void getCalback(ObjC.Object handle)
		@{
			MapView* mapView =(MapView*)handle;
			mapView.annotationSelectCallback = ^(AnnotationObject* selectedAnnotation) {
				@{NeonMapBox:Of(_this).selectedAnnotation(string):Call(selectedAnnotation.userName)};
			};
		@}

		void NeonMapBoxView.AddAnnotation(double lat, double lng)
		{

		}

		[Foreign(Language.ObjC)]
		static ObjC.Object Create()
		@{
			MapView* mapView =[[MapView alloc] init];
			return mapView;
		@}

		[Foreign(Language.ObjC)]
		ObjC.Object CreateCoordinate(double lat, double lng)
		@{
			CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(lat, lng);
			return coordinate
		@}

		[Foreign(Language.ObjC)]
		ObjC.Object CreateAnnotationObject(String username, String time, String id, String color, double lat, double lng)
		@{
		
		@}

		[Foreign(Language.ObjC)]
		void AddAnnotation(ObjC.Object handle, ObjC.Object arg)
		@{
			
		@}
	}
}

Here is the full repo, if required: https://github.com/poul-kg/MapBoxSwift

2

Ok, thanks to FuseCommunity Slack and to @bolav

Workaround was found. I’m using another object which can emit events, and we can receive them in JS.

Object for receiving messages in JS:

using Fuse;
using Fuse.Scripting;
using Uno.UX;

[UXGlobalModule]
public class Chat : NativeEventEmitterModule
{
    static readonly Chat _instance;
    static Context _context;
    static NativeEvent _onMessage;

    public Chat()
        : base(true, "message")
    {
        if (_instance != null) return;

        _instance = this;
        Resource.SetGlobalKey(_instance, "Chat");

        // Events
        _onMessage = new NativeEvent("onMessage");
        On("message", _onMessage);
        AddMember(_onMessage);
    }

    public void tryMessage(string message) {
        _instance.Emit("message", message, 1);
    }
}

JS:

    var chat = require('Chat');
    chat.onMessage = function (message, code) {
        console.log('Received Message form UNO:');
        console.log(message);
        console.log(code);
    }

Uno file which sends the message to JS:

                 void selectedAnnotation(string userName)
		{
			debug_log "Selected User " + userName;
                        // statement below will trigger chat.onMessage function in JS
			chat.tryMessage(userName); 
		}