diff --git a/app/javascript/controllers/bridge/insets_controller.js b/app/javascript/controllers/bridge/insets_controller.js
new file mode 100644
index 000000000..6f63a9550
--- /dev/null
+++ b/app/javascript/controllers/bridge/insets_controller.js
@@ -0,0 +1,31 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+
+// Bridge component to control custom safe-area insets from native apps.
+// Sets CSS variables --injected-safe-inset-(top|right|bottom|left).
+export default class extends BridgeComponent {
+  static component = "insets"
+
+  connect() {
+    super.connect()
+    this.notifyBridgeOfConnect()
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.send("disconnect")
+  }
+
+  notifyBridgeOfConnect() {
+    this.send("connect", {}, message => {
+      this.setInsets(message.data)
+    })
+  }
+
+  setInsets({ top, right, bottom, left }) {
+    const root = document.documentElement.style
+    root.setProperty("--injected-safe-inset-top", `${top}px`)
+    root.setProperty("--injected-safe-inset-right", `${right}px`)
+    root.setProperty("--injected-safe-inset-bottom", `${bottom}px`)
+    root.setProperty("--injected-safe-inset-left", `${left}px`)
+  }
+}