react-native-web-serial-api 0.0.1

package/android/src/main/java/dev/webserialapi/NativeUsbSerialPackage.java

@@ -0,0 +1,46 @@
+package dev.webserialapi;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.BaseReactPackage;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.model.ReactModuleInfo;
+import com.facebook.react.module.model.ReactModuleInfoProvider;
+
+import java.util.HashMap;
+import java.util.Map;
+
+// `implements ReactPackage` is redundant (BaseReactPackage already implements
+// it) but lets the React Native CLI's autolinking detect this package class —
+// its matcher only recognizes `implements ReactPackage` / `extends TurboReactPackage`.
+public class NativeUsbSerialPackage extends BaseReactPackage implements ReactPackage {
+
+    @Nullable
+    @Override
+    public NativeModule getModule(String name, ReactApplicationContext reactContext) {
+        if (name.equals(NativeUsbSerialModule.NAME)) {
+            return new NativeUsbSerialModule(reactContext);
+        }
+        return null;
+    }
+
+    @Override
+    public ReactModuleInfoProvider getReactModuleInfoProvider() {
+        return () -> {
+            Map<String, ReactModuleInfo> map = new HashMap<>();
+            map.put(
+                NativeUsbSerialModule.NAME,
+                new ReactModuleInfo(
+                    NativeUsbSerialModule.NAME,
+                    NativeUsbSerialModule.NAME,
+                    false,
+                    false,
+                    false,
+                    true
+                )
+            );
+            return map;
+        };
+    }
+}

package/android/src/main/java/dev/webserialapi/PortPickerActivity.java

@@ -0,0 +1,235 @@
+package dev.webserialapi;
+
+import android.content.BroadcastReceiver;
+import android.content.Context;
+import android.content.Intent;
+import android.content.IntentFilter;
+import android.hardware.usb.UsbDevice;
+import android.hardware.usb.UsbManager;
+import android.os.Build;
+import android.os.Bundle;
+
+import androidx.appcompat.app.AlertDialog;
+import androidx.appcompat.app.AppCompatActivity;
+import androidx.fragment.app.DialogFragment;
+
+import com.hoho.android.usbserial.driver.UsbSerialDriver;
+import com.hoho.android.usbserial.driver.UsbSerialPort;
+import com.hoho.android.usbserial.driver.UsbSerialProber;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class PortPickerActivity extends AppCompatActivity {
+
+    public static final String EXTRA_DEVICE_ID           = "dev.webserialapi.DEVICE_ID";
+    public static final String EXTRA_PORT_NUMBER         = "dev.webserialapi.PORT_NUMBER";
+    public static final String EXTRA_FILTERS_VENDOR_IDS  = "dev.webserialapi.FILTER_VENDOR_IDS";
+    public static final String EXTRA_FILTERS_PRODUCT_IDS = "dev.webserialapi.FILTER_PRODUCT_IDS";
+    public static final String EXTRA_TITLE_SELECT_PORT       = "dev.webserialapi.LABEL_DIALOG_TITLE";
+    public static final String EXTRA_TITLE_NO_PORTS_AVAILABLE   = "dev.webserialapi.LABEL_NO_DEVICES_TITLE";
+    public static final String EXTRA_MESSAGE_NO_PORTS_AVAILABLE = "dev.webserialapi.LABEL_NO_DEVICES_MESSAGE";
+
+    private static final String DEFAULT_TITLE_SELECT_PORT        = "Select Serial Port";
+    private static final String DEFAULT_TITLE_NO_PORTS_AVAILABLE   = "No devices found";
+    private static final String DEFAULT_MESSAGE_NO_PORTS_AVAILABLE = "No USB serial devices are connected.";
+
+    private static final String TAG_PICKER_DIALOG = "port_picker_dialog";
+
+    private UsbManager usbManager;
+    private int[]      filterVendorIds;
+    private int[]      filterProductIds;
+    private String     titleSelectPort;
+    private String     titleNoPortsAvailable;
+    private String     messageNoPortsAvailable;
+
+    // No dialog handle needed – the DialogFragment manages its own lifecycle
+    private final BroadcastReceiver usbStateReceiver = new BroadcastReceiver() {
+        @Override
+        public void onReceive(Context context, Intent intent) {
+            String action = intent.getAction();
+            if (UsbManager.ACTION_USB_DEVICE_ATTACHED.equals(action) ||
+                    UsbManager.ACTION_USB_DEVICE_DETACHED.equals(action)) {
+                // Dismiss stale dialog and rebuild with the updated device list
+                PortPickerDialogFragment old =
+                        (PortPickerDialogFragment) getSupportFragmentManager()
+                                .findFragmentByTag(TAG_PICKER_DIALOG);
+                if (old != null) old.dismissAllowingStateLoss();
+                showPickerDialog();
+            }
+        }
+    };
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        usbManager            = (UsbManager) getSystemService(Context.USB_SERVICE);
+        filterVendorIds       = getIntent().getIntArrayExtra(EXTRA_FILTERS_VENDOR_IDS);
+        filterProductIds      = getIntent().getIntArrayExtra(EXTRA_FILTERS_PRODUCT_IDS);
+        titleSelectPort        = getIntent().getStringExtra(EXTRA_TITLE_SELECT_PORT);
+        titleNoPortsAvailable  = getIntent().getStringExtra(EXTRA_TITLE_NO_PORTS_AVAILABLE);
+        messageNoPortsAvailable = getIntent().getStringExtra(EXTRA_MESSAGE_NO_PORTS_AVAILABLE);
+
+        // RECEIVER_NOT_EXPORTED is required from Android 14 (API 34) onwards
+        IntentFilter usbFilter = new IntentFilter();
+        usbFilter.addAction(UsbManager.ACTION_USB_DEVICE_ATTACHED);
+        usbFilter.addAction(UsbManager.ACTION_USB_DEVICE_DETACHED);
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) {
+            registerReceiver(usbStateReceiver, usbFilter, Context.RECEIVER_NOT_EXPORTED);
+        } else {
+            registerReceiver(usbStateReceiver, usbFilter);
+        }
+
+        // Show dialog only on first launch, not after a configuration change (e.g. rotation)
+        if (savedInstanceState == null) {
+            showPickerDialog();
+        }
+    }
+
+    private List<UsbSerialDriver> getFilteredDrivers() {
+        List<UsbSerialDriver> drivers =
+                UsbSerialProber.getDefaultProber().findAllDrivers(usbManager);
+
+        if (filterVendorIds == null || filterVendorIds.length == 0) {
+            return drivers;
+        }
+
+        // Guard against mismatched array lengths to avoid ArrayIndexOutOfBoundsException
+        int filterCount = Math.min(filterVendorIds.length,
+                filterProductIds != null ? filterProductIds.length : 0);
+
+        List<UsbSerialDriver> filtered = new ArrayList<>();
+        for (UsbSerialDriver driver : drivers) {
+            int vid = driver.getDevice().getVendorId();
+            int pid = driver.getDevice().getProductId();
+            for (int i = 0; i < filterCount; i++) {
+                boolean vidMatch = vid == filterVendorIds[i];
+                boolean pidMatch = filterProductIds[i] == -1 || pid == filterProductIds[i];
+                if (vidMatch && pidMatch) {
+                    filtered.add(driver);
+                    break;
+                }
+            }
+        }
+        return filtered;
+    }
+
+    private void showPickerDialog() {
+        PortPickerDialogFragment dialog = PortPickerDialogFragment.newInstance(
+                this,
+                getFilteredDrivers(),
+                resolve(titleSelectPort,        DEFAULT_TITLE_SELECT_PORT),
+                resolve(titleNoPortsAvailable,  DEFAULT_TITLE_NO_PORTS_AVAILABLE),
+                resolve(messageNoPortsAvailable, DEFAULT_MESSAGE_NO_PORTS_AVAILABLE)
+        );
+        dialog.show(getSupportFragmentManager(), TAG_PICKER_DIALOG);
+    }
+
+    private static String resolve(String override, String defaultValue) {
+        return (override != null && !override.isEmpty()) ? override : defaultValue;
+    }
+
+    /** Called by the DialogFragment when the user selects a port. */
+    void onPortSelected(UsbDevice device, int portNumber) {
+        Intent result = new Intent();
+        result.putExtra(EXTRA_DEVICE_ID,   device.getDeviceId());
+        result.putExtra(EXTRA_PORT_NUMBER, portNumber);
+        setResult(RESULT_OK, result);
+        finish();
+    }
+
+    /** Called by the DialogFragment when the user cancels. */
+    void onPickerCancelled() {
+        setResult(RESULT_CANCELED);
+        finish();
+    }
+
+    @Override
+    protected void onDestroy() {
+        super.onDestroy();
+        try { unregisterReceiver(usbStateReceiver); } catch (Exception ignored) {}
+    }
+
+    // -------------------------------------------------------------------------
+    // Static DialogFragment – survives configuration changes such as rotation
+    // -------------------------------------------------------------------------
+    public static class PortPickerDialogFragment extends DialogFragment {
+
+        // Not passed via Bundle argument because UsbSerialDriver is not Serializable/Parcelable
+        private List<UsbSerialDriver> drivers;
+        private PortPickerActivity    host;
+        private String                titleSelectPort;
+        private String                titleNoPortsAvailable;
+        private String                messageNoPortsAvailable;
+
+        static PortPickerDialogFragment newInstance(
+                PortPickerActivity host,
+                List<UsbSerialDriver> drivers,
+                String titleSelectPort,
+                String titleNoPortsAvailable,
+                String messageNoPortsAvailable) {
+            PortPickerDialogFragment f = new PortPickerDialogFragment();
+            f.host             = host;
+            f.drivers          = drivers;
+            f.titleSelectPort        = titleSelectPort;
+            f.titleNoPortsAvailable  = titleNoPortsAvailable;
+            f.messageNoPortsAvailable = messageNoPortsAvailable;
+            return f;
+        }
+
+        @Override
+        public android.app.Dialog onCreateDialog(Bundle savedInstanceState) {
+            Context ctx = requireContext();
+
+            if (drivers == null || drivers.isEmpty()) {
+                return new AlertDialog.Builder(ctx)
+                        .setTitle(titleNoPortsAvailable)
+                        .setMessage(messageNoPortsAvailable)
+                        .setPositiveButton(android.R.string.ok, (d, w) -> cancelAndFinish())
+                        .setOnCancelListener(d -> cancelAndFinish())
+                        .create();
+            }
+
+            List<String>          labels          = new ArrayList<>();
+            List<UsbSerialDriver> flatDrivers     = new ArrayList<>();
+            List<Integer>         flatPortNumbers = new ArrayList<>();
+
+            for (UsbSerialDriver driver : drivers) {
+                UsbDevice           device = driver.getDevice();
+                List<UsbSerialPort> ports  = driver.getPorts();
+                String driverName = driver.getClass().getSimpleName()
+                        .replace("SerialDriver", "")
+                        .replace("Serial", "");
+                for (int i = 0; i < ports.size(); i++) {
+                    String label = ports.size() > 1
+                            ? String.format("%s  ·  VID 0x%04X / PID 0x%04X  ·  Port %d",
+                                    driverName, device.getVendorId(), device.getProductId(), i)
+                            : String.format("%s  ·  VID 0x%04X / PID 0x%04X",
+                                    driverName, device.getVendorId(), device.getProductId());
+                    labels.add(label);
+                    flatDrivers.add(driver);
+                    flatPortNumbers.add(i);
+                }
+            }
+
+            return new AlertDialog.Builder(ctx)
+                    .setTitle(titleSelectPort)
+                    .setItems(labels.toArray(new String[0]), (d, which) -> {
+                        if (host != null) {
+                            host.onPortSelected(
+                                    flatDrivers.get(which).getDevice(),
+                                    flatPortNumbers.get(which));
+                        }
+                    })
+                    .setNegativeButton(android.R.string.cancel, (d, w) -> cancelAndFinish())
+                    .setOnCancelListener(d -> cancelAndFinish())
+                    .create();
+        }
+
+        private void cancelAndFinish() {
+            if (host != null) host.onPickerCancelled();
+        }
+    }
+}

package/android/src/main/java/dev/webserialapi/UsbDetachReceiver.java

@@ -0,0 +1,37 @@
+package dev.webserialapi;
+
+import android.content.BroadcastReceiver;
+import android.content.Context;
+import android.content.Intent;
+import android.hardware.usb.UsbDevice;
+import android.hardware.usb.UsbManager;
+
+import com.facebook.react.ReactApplication;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+
+public class UsbDetachReceiver extends BroadcastReceiver {
+
+    @Override
+    public void onReceive(Context context, Intent intent) {
+        if (!UsbManager.ACTION_USB_DEVICE_DETACHED.equals(intent.getAction())) return;
+
+        UsbDevice device = intent.getParcelableExtra(UsbManager.EXTRA_DEVICE);
+        if (device == null) return;
+
+        ReactApplication app = (ReactApplication) context.getApplicationContext();
+        ReactContext reactContext = app.getReactHost().getCurrentReactContext();
+        if (reactContext == null) return;
+
+        WritableMap event = Arguments.createMap();
+        event.putInt("deviceId", device.getDeviceId());
+        event.putInt("usbVendorId", device.getVendorId());
+        event.putInt("usbProductId", device.getProductId());
+
+        reactContext
+            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+            .emit("disconnect", event);
+    }
+}

package/android/src/main/res/xml/device_filter.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- CDC ACM (Arduino, etc.) -->
+    <usb-device class="2" subclass="2" protocol="1" />
+    <!-- FTDI -->
+    <usb-device vendor-id="0x0403" />
+    <!-- CP210x -->
+    <usb-device vendor-id="0x10C4" />
+    <!-- CH340/CH341 -->
+    <usb-device vendor-id="0x1A86" />
+    <!-- Prolific PL2303 -->
+    <usb-device vendor-id="0x067B" />
+</resources>

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+};

package/biome.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.16/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": ["src/**/*.{ts,tsx}"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "trailingCommas": "all",
+      "bracketSpacing": false,
+      "bracketSameLine": true,
+      "arrowParentheses": "asNeeded"
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": {
+        "noNonNullAssertion": "off"
+      }
+    }
+  }
+}

package/example/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/example/App.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {StatusBar, StyleSheet, View} from 'react-native';
+import type {SerialPort} from 'react-native-web-serial-api';
+import {ConnectScreen} from './src/screens/ConnectScreen';
+import {DevicesScreen} from './src/screens/DevicesScreen';
+import {TerminalScreen} from './src/screens/TerminalScreen';
+import {type ConnectionSettings, DEFAULT_SETTINGS} from './src/settings';
+import {colors} from './src/theme';
+
+type Screen = 'devices' | 'connect' | 'terminal';
+
+/**
+ * A React Native clone of Kai Morich's SimpleUsbTerminal, built on the
+ * react-native-web-serial-api Web Serial API. Runs on Android and (Chromium) web.
+ */
+function App(): React.JSX.Element {
+  const [screen, setScreen] = React.useState<Screen>('devices');
+  const [port, setPort] = React.useState<SerialPort | null>(null);
+  const [settings, setSettings] =
+    React.useState<ConnectionSettings>(DEFAULT_SETTINGS);
+
+  // Devices -> Connect form
+  const selectPort = (p: SerialPort) => {
+    setPort(p);
+    setScreen('connect');
+  };
+
+  // Connect form -> Terminal
+  const startTerminal = (s: ConnectionSettings) => {
+    setSettings(s);
+    setScreen('terminal');
+  };
+
+  const backToDevices = () => {
+    setScreen('devices');
+    setPort(null);
+  };
+
+  const backToConnect = () => setScreen('connect');
+
+  return (
+    <View style={styles.root}>
+      <StatusBar
+        barStyle="light-content"
+        backgroundColor={colors.primaryDark}
+      />
+      {screen === 'terminal' && port ? (
+        <TerminalScreen
+          port={port}
+          settings={settings}
+          onBack={backToConnect}
+        />
+      ) : screen === 'connect' && port ? (
+        <ConnectScreen
+          port={port}
+          initial={settings}
+          onBack={backToDevices}
+          onConnect={startTerminal}
+        />
+      ) : (
+        <DevicesScreen onSelect={selectPort} />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {flex: 1, backgroundColor: colors.background},
+});
+
+export default App;

package/example/__tests__/App.test.tsx

@@ -0,0 +1,16 @@
+/**
+ * @format
+ */
+
+// Note: import explicitly to use the types shipped with jest.
+import {expect, it} from '@jest/globals';
+import {render, screen, waitFor} from '@testing-library/react-native';
+import App from '../App';
+
+it('renders the devices screen', async () => {
+  render(<App />);
+  expect(screen.getByText('USB Devices')).toBeTruthy();
+  // DevicesScreen kicks off an async serial.getPorts() refresh on mount; let it
+  // settle so the state update is wrapped in act() (avoids a console warning).
+  await waitFor(() => expect(screen.queryByText('USB Devices')).toBeTruthy());
+});

package/example/android/app/build.gradle

@@ -0,0 +1,120 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    /* Folders */
+    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
+    // cliFile = file("../../node_modules/react-native/cli.js")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+    //
+    //   The command to run when bundling. By default is 'bundle'
+    // bundleCommand = "ram-bundle"
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace "dev.react_native_web_serial_api.example"
+    defaultConfig {
+        applicationId "dev.react_native_web_serial_api.example"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+}
+
+dependencies {
+    // usb-serial-for-android is provided transitively by react-native-web-serial-api
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

package/example/android/app/proguard-rules.pro

@@ -0,0 +1,10 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:

package/example/android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning"/>
+</manifest>

package/example/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,38 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-feature android:name="android.hardware.usb.host" />
+
+    <application
+      android:name=".MainApplication"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:roundIcon="@mipmap/ic_launcher_round"
+      android:allowBackup="false"
+      android:theme="@style/AppTheme"
+      android:supportsRtl="true">
+      <!-- PortPickerActivity and UsbDetachReceiver are provided by
+           react-native-web-serial-api and merged in automatically. -->
+      <activity
+        android:name=".MainActivity"
+        android:label="@string/app_name"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+        android:launchMode="singleTask"
+        android:windowSoftInputMode="adjustResize"
+        android:exported="true">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+        <intent-filter>
+            <action android:name="android.hardware.usb.action.USB_DEVICE_ATTACHED" />
+        </intent-filter>
+        <intent-filter>
+            <action android:name="android.hardware.usb.action.USB_DEVICE_DETACHED" />
+        </intent-filter>
+        <meta-data
+            android:name="android.hardware.usb.action.USB_DEVICE_ATTACHED"
+            android:resource="@xml/device_filter" />
+      </activity>
+    </application>
+</manifest>

package/example/android/app/src/main/java/dev/uzlopak/MainActivity.kt

@@ -0,0 +1,22 @@
+package dev.react_native_web_serial_api.example
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MainActivity : ReactActivity() {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "SimpleUsbTerminal"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate =
+      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}