Expo (React Native) app with BlockNote: native toolbar + WebSocket bridge

[Movm]

BlockNote in a native Expo app with native formatting toolbar

We built a full Expo (React Native) app that runs BlockNote inside a DOM WebView with a native formatting toolbar and real-time Hocuspocus collaboration via a WebSocket bridge.

This pattern is production-tested in Grünerator — our collaborative document editor running on iOS and Android with real-time Hocuspocus sync, native formatting toolbar, and chat sidebar. The standalone example repo below is extracted from this production app.

Example repo: Movm/blocknote-app (freshly extracted — not yet independently tested, but the underlying code runs in production)

---

Architecture

BlockNote runs inside an Expo use dom component (web code in a native WebView). The native app and DOM editor communicate via a Zustand bridge store:

┌─────────────────────┐   onActiveStylesChange    ┌──────────────────┐
│   DOM WebView        │ ─────────────────────────▶│  Zustand Bridge   │
│   (BlockNoteEditor)  │                           │  Store            │
│                      │◀─────────────────────────│                    │
│   format-action      │   pendingAction + counter │                    │
│   CustomEvent        │                           └────────┬─────────┘
└─────────────────────┘                                     │
                                                             ▼
                                                ┌──────────────────────┐
                                                │  Native Formatting   │
                                                │  Toolbar (RN)        │
                                                └──────────────────────┘

1. DOM → Native: active styles reporting

Inside the BlockNote editor (DOM), we subscribe to selection changes and report active styles back to native:

useEffect(() => {
  if (!editor || !onActiveStylesChange) return;

  const unsubscribe = editor.onSelectionChange(() => {
    const styles = editor.getActiveStyles();
    const cursor = editor.getTextCursorPosition();
    const selectedText = editor.getSelectedText();
    onActiveStylesChange(JSON.stringify({
      hasSelection: selectedText.length > 0,
      ...styles,
      blockType: cursor?.block?.type || "paragraph",
      blockProps: cursor?.block?.props || {},
    }));
  });

  return unsubscribe;
}, [editor]);

2. Native → DOM: formatting commands

The native toolbar dispatches actions through the bridge store, which flow as props to the DOM component and get dispatched as CustomEvents:

// Native side: bridge store dispatch
const toggleStyle = (style) => dispatchAction({ type: "format", style });
const setBlockType = (blockType, props) =>
  dispatchAction({ type: "setBlockType", blockType, props });

// DOM side: receives pendingAction as prop, dispatches CustomEvent
if (pendingAction.type === "format") {
  window.dispatchEvent(
    new CustomEvent("format-action", {
      detail: { action: "toggleStyle", style: pendingAction.style }
    })
  );
}

The editor listens for these events and applies formatting:

useEffect(() => {
  if (!editor) return;

  const handleFormatAction = (e) => {
    const { action, style, blockType, props, alignment } = e.detail;
    if (action === "toggleStyle") {
      editor.toggleStyles({ [style]: true });
    } else if (action === "setBlockType") {
      const block = editor.getTextCursorPosition()?.block;
      if (block) editor.updateBlock(block, { type: blockType, props });
    } else if (action === "setAlignment") {
      const block = editor.getTextCursorPosition()?.block;
      if (block) editor.updateBlock(block, { props: { textAlignment: alignment } });
    }
  };

  window.addEventListener("format-action", handleFormatAction);
  return () => window.removeEventListener("format-action", handleFormatAction);
}, [editor]);

3. Native formatting toolbar

Pure React Native — ScrollView with Pressable buttons reading from the bridge store:

export const FormattingToolbar = memo(function FormattingToolbar() {
  const activeFormatting = useEditorBridgeStore((s) => s.activeFormatting);
  const dispatchAction = useEditorBridgeStore((s) => s.dispatchAction);

  if (!activeFormatting.hasSelection) return null;

  const items = [
    { id: "bold", label: "B", action: () => toggleStyle("bold"), isActive: !!activeFormatting.bold },
    { id: "italic", label: "I", action: () => toggleStyle("italic"), isActive: !!activeFormatting.italic },
    // ... H1-H3, lists, alignment
  ];

  return (
    <View style={styles.container}>
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        {items.map((item) => (
          <Pressable
            key={item.id}
            onPress={item.action}
            style={[styles.button, item.isActive && styles.active]}
          >
            <Text>{item.label}</Text>
          </Pressable>
        ))}
      </ScrollView>
    </View>
  );
});

4. WebSocket bridge for Hocuspocus

Expo DOM components can not open WebSockets directly, so we proxy them through native async props:

// DOM side: BridgedWebSocket class uses async prop functions
class BridgedWebSocket {
  constructor(url, protocols) {
    this.bridge.wsOpen(url, protocols).then(() => {
      this.readyState = BridgedWebSocket.OPEN;
      this.emit("open", new Event("open"));
      this.receiveLoop();
    });
  }

  async receiveLoop() {
    while (!this.closed) {
      const b64 = await this.bridge.wsReceive();
      if (b64 === "__close__") break;
      const data = b64.startsWith("str:")
        ? decodeURIComponent(escape(atob(b64.slice(4))))
        : base64ToArrayBuffer(b64);
      this.emit("message", { data });
    }
  }

  send(data) {
    const b64 = typeof data === "string"
      ? "str:" + btoa(unescape(encodeURIComponent(data)))
      : arrayBufferToBase64(data);
    this.bridge.wsSend(b64);
  }
}

// Native side: manages real WebSocket, queues messages
const handleWsOpen = async (url, protocols) => {
  const ws = new WebSocket(url, protocols);
  ws.binaryType = "arraybuffer";
  ws.onmessage = (e) => {
    const b64 = e.data instanceof ArrayBuffer
      ? arrayBufferToBase64(e.data)
      : "str:" + btoa(unescape(encodeURIComponent(e.data)));
    const resolver = resolvers.shift();
    if (resolver) resolver(b64);
    else messageQueue.push(b64);
  };
};

Why native toolbar over web toolbar on mobile

• No keyboard positioning needed — React Native handles toolbar layout automatically
• Native scroll momentum on toolbar buttons (no web scroll jank)
• Always responsive even if the WebView is busy rendering
• Platform-consistent look and feel

Related

• Our CSS-based approach for web mobile toolbar: Flicker-free mobile formatting toolbar: CSS variables + VirtualKeyboard API #2616 / PR fix: flicker-free mobile formatting toolbar via CSS custom properties #2617
• Production app: Grünerator — collaborative document editor for the German Green Party, running this exact pattern on iOS and Android