> ## Documentation Index > Fetch the complete documentation index at: https://boxo.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Custom Events System 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](/miniapp/CES) ```swift theme={"system"} miniapp.delegate = self ... extension ViewController : MiniappDelegate { func didReceiveCustomEvent(miniapp: Miniapp, customEvent: CustomEvent) { customEvent.payload = [ "message" : "text", "id" : 123, "checked" : true ] miniapp.sendCustomEvent(customEvent: customEvent) } } ``` ```kotlin theme={"system"} miniApp.setCustomEventListener { _, miniapp, customEvent -> //doSomething customEvent.payload = mapOf("message" to "text", "id" to 123, "checked" to true) miniapp.sendEvent(customEvent) } ``` **java** ```java theme={"system"} miniapp.setCustomEventListener(new Miniapp.CustomEventListener() { @Override public void handle(@NotNull BoxoFragment boxoFragment, @NotNull MiniApp miniapp, @NotNull CustomEvent customEvent) { Map payload = new HashMap<>(); payload.put("message", "message"); payload.put("id", 123); payload.put("checked", true); customEvent.setPayload(payload); miniapp.sendEvent(customEvent); } }); ``` 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: ```clike theme={"system"} 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 { @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"), ), ), ), ); } } ``` 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: ```clike theme={"system"} 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: ```clike theme={"system"} 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( //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 (