Turbo Native bridge for mobile hybrid apps

Jordan Lee Jan 2026

3 tabs

class ApplicationController < ActionController::Base
  helper_method :turbo_native_app?

  private

  def turbo_native_app?
    request.user_agent.to_s.match?(/Turbo Native/)
  end

  def set_turbo_native_headers
    return unless turbo_native_app?

    # Tell the app which navigation style to use
    response.headers["Turbo-Visit-Action"] = "advance"

    # Custom headers for native features
    response.headers["X-Navbar-Title"] = @page_title if @page_title
  end
end

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || 'MyApp' %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

    <% if turbo_native_app? %>
      <meta name="turbo-native-app" content="true">
    <% end %>
  </head>
  <body>
    <% unless turbo_native_app? %>
      <%= render "shared/navbar" %>
    <% end %>

    <main class="<%= turbo_native_app? ? 'pt-0' : 'pt-16' %>">
      <%= yield %>
    </main>

    <% unless turbo_native_app? %>
      <%= render "shared/footer" %>
    <% end %>
  </body>
</html>

<% content_for :title, @post.title %>

<article class="post">
  <h1><%= @post.title %></h1>
  <%= simple_format @post.body %>

  <% if turbo_native_app? %>
    <!-- Native app: use bridge to share -->
    <%= link_to "Share", "#",
        class: "btn btn-primary",
        data: {
          bridge: "share",
          bridge_title: @post.title,
          bridge_url: post_url(@post)
        } %>
  <% else %>
    <!-- Web: use Web Share API or fallback -->
    <%= link_to "Share", "#",
        class: "btn btn-primary",
        data: {
          controller: "share",
          action: "click->share#trigger"
        } %>
  <% end %>
</article>

3 files · ruby, erb Explain with highlit

Turbo Native allows building iOS and Android apps using Rails server-rendered HTML with native navigation chrome. The web views communicate with native code via a JavaScript bridge for features like push notifications, camera access, or native UI patterns. I mark certain paths as non-turbo using data-turbo='false' to open them in native browsers or external modals. The server detects Turbo Native requests via user agent and can customize responses—hiding web-only UI, adjusting layouts, or returning native-friendly data. This approach delivers the development speed of web apps with the polish of native apps. For apps with limited custom UI needs, it's a compelling alternative to React Native.