react-native-web-serial-api 0.0.1

package/example/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "react-native-web-serial-api-example",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "start": "react-native start",
+    "build:android": "cd android && ./gradlew assembleDebug",
+    "web": "vite",
+    "web:build": "vite build",
+    "web:preview": "vite preview",
+    "lint": "biome check",
+    "format": "biome check --write",
+    "test": "jest"
+  },
+  "dependencies": {
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-web": "^0.21.2",
+    "react-native-web-serial-api": "file:.."
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@biomejs/biome": "2.4.16",
+    "@react-native-community/cli": "20.1.3",
+    "@react-native-community/cli-platform-android": "20.1.3",
+    "@react-native/babel-preset": "0.85.3",
+    "@react-native/jest-preset": "0.85.3",
+    "@react-native/metro-config": "0.85.3",
+    "@react-native/typescript-config": "0.85.3",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "babel-jest": "^29.6.3",
+    "babel-plugin-module-resolver": "^5.0.3",
+    "jest": "^29.6.3",
+    "react-test-renderer": "19.2.3",
+    "typescript": "6.0.3",
+    "vite": "^8.0.0"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

package/example/react-native.config.js

@@ -0,0 +1,17 @@
+const path = require('node:path');
+const pkg = require('../package.json');
+
+/**
+ * The library lives one level up (repo root) and is installed here as a symlink
+ * pointing to an ancestor of this example dir. React Native autolinking skips
+ * dependencies whose resolved path is an ancestor of the project, so we map the
+ * dependency explicitly to the library's android module. This mirrors what
+ * create-react-native-library scaffolds for its example app.
+ */
+module.exports = {
+  dependencies: {
+    [pkg.name]: {
+      root: path.join(__dirname, '..'),
+    },
+  },
+};

package/example/src/components/AppBar.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {colors} from '../theme';
+import {Menu, type MenuItem} from './Menu';
+
+type Props = {
+  title: string;
+  onBack?: () => void;
+  menu?: MenuItem[];
+};
+
+const statusBarHeight =
+  Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) : 0;
+
+export function AppBar({title, onBack, menu}: Props) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.bar}>
+        {onBack ? (
+          <TouchableOpacity onPress={onBack} style={styles.iconBtn}>
+            <Text style={styles.icon}>←</Text>
+          </TouchableOpacity>
+        ) : null}
+        <Text style={styles.title} numberOfLines={1}>
+          {title}
+        </Text>
+        <View style={styles.spacer} />
+        {menu?.length ? (
+          <TouchableOpacity
+            onPress={() => setOpen(true)}
+            style={styles.iconBtn}>
+            <Text style={styles.icon}>⋮</Text>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+      {menu ? (
+        <Menu visible={open} items={menu} onClose={() => setOpen(false)} />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {backgroundColor: colors.primary, paddingTop: statusBarHeight},
+  bar: {
+    height: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 4,
+  },
+  iconBtn: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {color: colors.onPrimary, fontSize: 22},
+  title: {
+    color: colors.onPrimary,
+    fontSize: 20,
+    fontWeight: '600',
+    marginLeft: 8,
+  },
+  spacer: {flex: 1},
+});

package/example/src/components/Menu.tsx

@@ -0,0 +1,90 @@
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {colors} from '../theme';
+
+export type MenuItem = {
+  key: string;
+  title: string;
+  checkable?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+};
+
+type Props = {
+  visible: boolean;
+  items: MenuItem[];
+  onClose: () => void;
+};
+
+/** Android-style overflow (⋮) dropdown anchored to the top-right. */
+export function Menu({visible, items, onClose}: Props) {
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}>
+      <Pressable style={styles.backdrop} onPress={onClose}>
+        <View style={styles.menu}>
+          <ScrollView>
+            {items.map(item => (
+              <Pressable
+                key={item.key}
+                style={styles.item}
+                disabled={item.disabled}
+                onPress={() => {
+                  onClose();
+                  item.onPress();
+                }}>
+                <Text
+                  style={[styles.itemText, item.disabled && styles.disabled]}>
+                  {item.title}
+                </Text>
+                {item.checkable ? (
+                  <Text style={styles.check}>{item.checked ? '☑' : '☐'}</Text>
+                ) : null}
+              </Pressable>
+            ))}
+          </ScrollView>
+        </View>
+      </Pressable>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    alignItems: 'flex-end',
+    paddingTop: 4,
+    paddingRight: 4,
+  },
+  menu: {
+    minWidth: 220,
+    maxHeight: '80%',
+    backgroundColor: colors.background,
+    borderRadius: 4,
+    paddingVertical: 4,
+    elevation: 8,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+    shadowOffset: {width: 0, height: 2},
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  itemText: {flex: 1, fontSize: 16, color: colors.text},
+  disabled: {color: colors.textSecondary, opacity: 0.5},
+  check: {fontSize: 16, marginLeft: 16, color: colors.text},
+});

package/example/src/components/SingleChoiceDialog.tsx

@@ -0,0 +1,120 @@
+import {
+  Alert,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {colors} from '../theme';
+
+export type Choice<T> = {label: string; value: T};
+
+type Props<T> = {
+  visible: boolean;
+  title: string;
+  options: Choice<T>[];
+  selected: T;
+  onSelect: (value: T) => void;
+  onClose: () => void;
+  /** When set, shows an "Info" button that pops this message. */
+  infoMessage?: string;
+};
+
+/** Single-choice (radio) dialog, mirroring AlertDialog.setSingleChoiceItems. */
+export function SingleChoiceDialog<T extends string | number>({
+  visible,
+  title,
+  options,
+  selected,
+  onSelect,
+  onClose,
+  infoMessage,
+}: Props<T>) {
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}>
+      <Pressable style={styles.backdrop} onPress={onClose}>
+        <Pressable style={styles.card} onPress={() => {}}>
+          <Text style={styles.title}>{title}</Text>
+          <ScrollView style={styles.list}>
+            {options.map(opt => {
+              const isSelected = opt.value === selected;
+              return (
+                <Pressable
+                  key={String(opt.value)}
+                  style={styles.row}
+                  onPress={() => {
+                    onSelect(opt.value);
+                    onClose();
+                  }}>
+                  <Text style={styles.radio}>{isSelected ? '◉' : '◯'}</Text>
+                  <Text style={styles.label}>{opt.label}</Text>
+                </Pressable>
+              );
+            })}
+          </ScrollView>
+          <View style={styles.footer}>
+            {infoMessage ? (
+              <Pressable
+                style={styles.footerBtn}
+                onPress={() => Alert.alert(title, infoMessage)}>
+                <Text style={styles.footerText}>INFO</Text>
+              </Pressable>
+            ) : null}
+            <Pressable style={styles.footerBtn} onPress={onClose}>
+              <Text style={styles.footerText}>CANCEL</Text>
+            </Pressable>
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 360,
+    maxHeight: '80%',
+    backgroundColor: colors.background,
+    borderRadius: 6,
+    paddingVertical: 16,
+    elevation: 12,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: colors.text,
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+  },
+  list: {flexGrow: 0},
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+  },
+  radio: {fontSize: 18, color: colors.primary, marginRight: 16},
+  label: {fontSize: 16, color: colors.text},
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingHorizontal: 12,
+    paddingTop: 8,
+  },
+  footerBtn: {paddingVertical: 8, paddingHorizontal: 12},
+  footerText: {color: colors.primary, fontWeight: '600', fontSize: 14},
+});

package/example/src/screens/ConnectScreen.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import type {SerialPort} from 'react-native-web-serial-api';
+import {AppBar} from '../components/AppBar';
+import {
+  type Choice,
+  SingleChoiceDialog,
+} from '../components/SingleChoiceDialog';
+import {
+  BAUD_RATES,
+  type ConnectionSettings,
+  DATA_BITS,
+  DEFAULT_SETTINGS,
+  FLOW_CONTROL_LABELS,
+  FLOW_CONTROLS,
+  PARITIES,
+  STOP_BITS,
+} from '../settings';
+import {colors} from '../theme';
+
+type Props = {
+  port: SerialPort;
+  initial?: ConnectionSettings;
+  onBack: () => void;
+  onConnect: (settings: ConnectionSettings) => void;
+};
+
+function hex4(n: number | undefined): string {
+  return (n ?? 0).toString(16).toUpperCase().padStart(4, '0');
+}
+
+export function ConnectScreen({port, initial, onBack, onConnect}: Props) {
+  const [settings, setSettings] = React.useState<ConnectionSettings>(
+    initial ?? DEFAULT_SETTINGS,
+  );
+  // Which dropdown's dialog is open (null = none).
+  const [open, setOpen] = React.useState<keyof ConnectionSettings | null>(null);
+
+  const info = port.getInfo();
+
+  const set = <K extends keyof ConnectionSettings>(
+    key: K,
+    value: ConnectionSettings[K],
+  ) => setSettings(s => ({...s, [key]: value}));
+
+  return (
+    <View style={styles.container}>
+      <AppBar title="Connection settings" onBack={onBack} />
+
+      <ScrollView contentContainerStyle={styles.form}>
+        <Text style={styles.device}>
+          {`Vendor ${hex4(info.usbVendorId)}  ·  Product ${hex4(
+            info.usbProductId,
+          )}`}
+        </Text>
+
+        <Dropdown
+          label="Baud rate"
+          value={String(settings.baudRate)}
+          onPress={() => setOpen('baudRate')}
+        />
+        <Dropdown
+          label="Data bits"
+          value={String(settings.dataBits)}
+          onPress={() => setOpen('dataBits')}
+        />
+        <Dropdown
+          label="Stop bits"
+          value={String(settings.stopBits)}
+          onPress={() => setOpen('stopBits')}
+        />
+        <Dropdown
+          label="Parity"
+          value={settings.parity}
+          onPress={() => setOpen('parity')}
+        />
+        <Dropdown
+          label="Flow control"
+          value={FLOW_CONTROL_LABELS[settings.flowControl]}
+          onPress={() => setOpen('flowControl')}
+        />
+
+        <TouchableOpacity
+          style={styles.connectBtn}
+          onPress={() => onConnect(settings)}>
+          <Text style={styles.connectText}>Connect</Text>
+        </TouchableOpacity>
+      </ScrollView>
+
+      <SingleChoiceDialog
+        visible={open === 'baudRate'}
+        title="Baud rate"
+        options={BAUD_RATES.map(b => ({label: String(b), value: b}))}
+        selected={settings.baudRate}
+        onSelect={v => set('baudRate', v)}
+        onClose={() => setOpen(null)}
+      />
+      <SingleChoiceDialog
+        visible={open === 'dataBits'}
+        title="Data bits"
+        options={DATA_BITS.map(b => ({label: String(b), value: b}))}
+        selected={settings.dataBits}
+        onSelect={v => set('dataBits', v as ConnectionSettings['dataBits'])}
+        onClose={() => setOpen(null)}
+      />
+      <SingleChoiceDialog
+        visible={open === 'stopBits'}
+        title="Stop bits"
+        options={STOP_BITS.map(b => ({label: String(b), value: b}))}
+        selected={settings.stopBits}
+        onSelect={v => set('stopBits', v as ConnectionSettings['stopBits'])}
+        onClose={() => setOpen(null)}
+      />
+      <SingleChoiceDialog
+        visible={open === 'parity'}
+        title="Parity"
+        options={PARITIES.map(p => ({label: p, value: p})) as Choice<string>[]}
+        selected={settings.parity}
+        onSelect={v => set('parity', v as ConnectionSettings['parity'])}
+        onClose={() => setOpen(null)}
+      />
+      <SingleChoiceDialog
+        visible={open === 'flowControl'}
+        title="Flow control"
+        options={
+          FLOW_CONTROLS.map(f => ({
+            label: FLOW_CONTROL_LABELS[f],
+            value: f,
+          })) as Choice<string>[]
+        }
+        selected={settings.flowControl}
+        onSelect={v =>
+          set('flowControl', v as ConnectionSettings['flowControl'])
+        }
+        onClose={() => setOpen(null)}
+      />
+    </View>
+  );
+}
+
+function Dropdown({
+  label,
+  value,
+  onPress,
+}: {
+  label: string;
+  value: string;
+  onPress: () => void;
+}) {
+  return (
+    <TouchableOpacity style={styles.row} onPress={onPress}>
+      <Text style={styles.rowLabel}>{label}</Text>
+      <View style={styles.rowValueWrap}>
+        <Text style={styles.rowValue}>{value}</Text>
+        <Text style={styles.caret}>▾</Text>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {flex: 1, backgroundColor: colors.background},
+  form: {padding: 16},
+  device: {
+    fontSize: 13,
+    color: colors.textSecondary,
+    marginBottom: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.divider,
+  },
+  rowLabel: {fontSize: 16, color: colors.text},
+  rowValueWrap: {flexDirection: 'row', alignItems: 'center'},
+  rowValue: {fontSize: 16, color: colors.primary, fontWeight: '600'},
+  caret: {fontSize: 14, color: colors.primary, marginLeft: 8},
+  connectBtn: {
+    marginTop: 28,
+    backgroundColor: colors.primary,
+    borderRadius: 6,
+    paddingVertical: 14,
+    alignItems: 'center',
+  },
+  connectText: {color: colors.onPrimary, fontSize: 16, fontWeight: '600'},
+});

package/example/src/screens/DevicesScreen.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import {FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import type {SerialPort} from 'react-native-web-serial-api';
+import {serial} from 'react-native-web-serial-api';
+import {AppBar} from '../components/AppBar';
+import {colors} from '../theme';
+
+type Props = {
+  onSelect: (port: SerialPort) => void;
+};
+
+function hex4(n: number | undefined): string {
+  return (n ?? 0).toString(16).toUpperCase().padStart(4, '0');
+}
+
+// The Web Serial API only exposes VID/PID (not the driver/chip class), so we
+// derive a best-effort label from known USB-serial vendor IDs.
+function chipLabel(vendorId: number | undefined): string {
+  switch (vendorId) {
+    case 0x0403:
+      return 'FTDI';
+    case 0x10c4:
+      return 'CP210x';
+    case 0x1a86:
+      return 'CH34x';
+    case 0x067b:
+      return 'Prolific';
+    default:
+      return 'USB serial';
+  }
+}
+
+export function DevicesScreen({onSelect}: Props) {
+  const [ports, setPorts] = React.useState<SerialPort[]>([]);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const refresh = React.useCallback(async () => {
+    setError(null);
+    try {
+      if (!serial) {
+        setError('Web Serial API is not available on this platform.');
+        return;
+      }
+      setPorts(await serial.getPorts());
+    } catch (e: any) {
+      setError(e?.message ?? String(e));
+    }
+  }, []);
+
+  React.useEffect(() => {
+    refresh();
+    if (!serial) {
+      return;
+    }
+    // Auto-refresh the list when a USB device is attached or detached, so the
+    // user doesn't have to hit "Refresh Devices" manually.
+    serial.addEventListener('connect', refresh);
+    serial.addEventListener('disconnect', refresh);
+    return () => {
+      serial.removeEventListener('connect', refresh);
+      serial.removeEventListener('disconnect', refresh);
+    };
+  }, [refresh]);
+
+  const requestNew = React.useCallback(async () => {
+    setError(null);
+    try {
+      const port = await serial.requestPort();
+      onSelect(port);
+    } catch (e: any) {
+      // user cancelled the picker, or no device
+      setError(e?.message ?? String(e));
+    }
+  }, [onSelect]);
+
+  return (
+    <View style={styles.container}>
+      <AppBar
+        title="Simple USB Terminal"
+        menu={[
+          {key: 'refresh', title: 'Refresh Devices', onPress: refresh},
+          {key: 'request', title: 'Connect new device…', onPress: requestNew},
+        ]}
+      />
+
+      <View style={styles.header}>
+        <Text style={styles.headerText}>USB Devices</Text>
+      </View>
+
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+
+      <FlatList
+        data={ports}
+        keyExtractor={(_, i) => String(i)}
+        ListEmptyComponent={
+          <Text style={styles.empty}>{'<no USB devices found>'}</Text>
+        }
+        renderItem={({item}) => {
+          const info = item.getInfo();
+          return (
+            <TouchableOpacity
+              style={styles.item}
+              onPress={() => onSelect(item)}>
+              <Text style={styles.text1}>{chipLabel(info.usbVendorId)}</Text>
+              <Text style={styles.text2}>
+                {`Vendor ${hex4(info.usbVendorId)}, Product ${hex4(
+                  info.usbProductId,
+                )}`}
+              </Text>
+            </TouchableOpacity>
+          );
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {flex: 1, backgroundColor: colors.background},
+  header: {
+    backgroundColor: colors.divider,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  headerText: {fontSize: 16, color: colors.text},
+  error: {color: '#c62828', padding: 12},
+  empty: {
+    fontSize: 18,
+    textAlign: 'center',
+    color: colors.textSecondary,
+    marginTop: 24,
+  },
+  item: {paddingVertical: 8, paddingHorizontal: 12},
+  text1: {fontSize: 16, color: colors.text, marginTop: 4, marginHorizontal: 12},
+  text2: {
+    fontSize: 13,
+    color: colors.textSecondary,
+    marginHorizontal: 20,
+    marginBottom: 4,
+  },
+});