​
Handle custom event from miniapp.

The custom events system is a powerful feature that enables bidirectional data communication between a miniapp and the host app. The miniapp can send data that the host app can recognize. Additionally, certain operations can be implemented at the native app level for enhanced functionality.

Custom events example

​
iOS

miniapp.delegate = self
...
extension ViewController : MiniappDelegate {
    func didReceiveCustomEvent(miniapp: Miniapp, customEvent: CustomEvent) {
        customEvent.payload = [
            "message" : "text",
            "id" : 123,
            "checked" : true
        ]
        miniapp.sendCustomEvent(customEvent: customEvent)
    }
}

​
Android

miniApp.setCustomEventListener { miniAppActivity, miniApp, customEvent ->
    //doSomething
    customEvent.payload = mapOf("message" to "text",
                                "id" to 123,
                                "checked" to true)
    miniApp.sendEvent(customEvent)
}

java

miniApp.setCustomEventListener(new MiniApp.CustomEventListener() {
    @Override
    public void handle(@NotNull Activity miniAppActivity, @NotNull MiniApp miniApp, @NotNull CustomEvent customEvent) {
        Map<String, Object> payload = new HashMap<>();
        payload.put("message", "message");
        payload.put("id", 123);
        payload.put("checked", true);
        customEvent.setPayload(payload);
        miniApp.sendEvent(customEvent);
    }
});

​
Flutter

Handle custom events by listening to .customEvents().

Example receiving and sending back same event:

Appboxo.customEvents().listen((CustomEvent event) {
  if (event.appId == 'app123456') {
    event.payload = {"foo": "bar"};
    Appboxo.sendEvent(event);
  }
});

For cases when you want to hide all miniapps when a custom event is received, you can call Appboxo.hideMiniapps();

Example:

import 'package:flutter/material.dart';
import 'package:appboxo_sdk/appboxo_sdk.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    Appboxo.setConfig("CLIENT_ID");
    Appboxo.customEvents().listen((CustomEvent event) {
      if (event.appId == 'app123456') {
        Appboxo.hideMiniapps();
        Future.delayed(const Duration(milliseconds: 2000), () {
          Appboxo.openMiniapp("app123456", "");
          event.payload = {"complete": "ok"};
          Appboxo.sendEvent(event);
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Appboxo SDK Test'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              Appboxo.openMiniapp("app123456", "");
            },
            child: Text("Miniapp"),
          ),
        ),
      ),
    );
  }
}

​
React Native

Handling custom events in React Native is straightforward. Use customEvents to both subscribe to and send custom events between the miniapp and the host app.

Example:

   appboxo.customEvents
      .subscribe<'eventType', { payloadKey: 'payloadData' }>(event => {
        const modifiedEvent = {
          app_id: '[miniap_id]', // miniapp id
          custom_event: {
            error_type: undefined, // throw the error with non empty 'error_type'
            payload: {payloadKey: 'payloadData'}, // payload data to send to miniapp
            request_id: '1', // event requet id
            type: 'eventType', // event type
          },
        }
        appboxo.customEvents.send(modifiedEvent) // your data that you want to send back to miniapp
      })

TIP

Please don’t forget to unsubscribe from events

Usage:

import React from 'react';
import appboxo from '@appboxo/react-native-sdk';
import { StyleSheet, View, Button } from 'react-native';

type eventType = 'eventType';
type eventPayload = { payloadKey: 'payload' };

export default function App() {

  React.useEffect(() => {
    appboxo.setConfig('[client_id]');  //set your Appboxo client_id

    const eventPayloadData = { payloadKey: 'payload' };

    const subscription = appboxo.customEvents
      .subscribe<eventType, eventPayload>( //listen custom event from miniapp
        event => {
          const modifiedEvent = {
            app_id: '[miniap_id]', // miniapp id
            custom_event: {
              request_id: event.custom_event.request_id, // event requet id
              payload: eventPayloadData, // payload data to send to miniapp
              type: eventType, // event type
            },
          };
          appboxo.customEvents.send(modifiedEvent); //send custom event to miniapp
        },
        (errorType?: string) => {
          console.error(errorType || 'Something went wrong!'); //handle error
        }     
      );

    return () => subscription(); //unsubscribe from custom events

  }, []);

  const handleOpenMiniapp = () => {
    appboxo.openMiniapp('[miniapp_id]', '[auth_payload]');  //launch miniapp by id with auth payload
  }

  return (
    <View style={styles.container}>
      <Button
        color="#841584"
        title="Launch miniapp"
        onPress={handleOpenMiniapp}
        accessibilityLabel="Launch miniapp"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
});