Some tips #

In this section, I share some tips to enhance the appearance of the application based on the access platform. For example, on the URLs screen, there are two buttons: one native and one web. To improve usability, the web button can be hidden when the application is accessed via the iOS or Android app.

Hiding Web Elements #

To hide web elements when the Rails application is accessed via a native app, you can use the Rails helper:

hotwire_native_app?

Based on this, you can create a helper in ApplicationHelper to add a Tailwind class, such as hidden, ensuring the web button is displayed only in browsers and hidden in iOS access.

Creating the Helper #

module ApplicationHelper
  def hidden_when_native
    "hidden" if hotwire_native_app?
  end
end

Using in the Markup #

<%= link_to "New url", new_url_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium #{hidden_when_native}", 
  data: { controller: "button", bridge_title: "New Url" } %>

Now, the web button is hidden when the Rails application is accessed via a native platform, but it remains visible in the web version.

Improving the "Back" Button in Stack Navigation #

When navigating to a new screen, the stack navigation displays a < symbol followed by the name of the previous screen. In cases where the screen name is too long, the "Back" button can become visually awkward and disproportionate. To address this, you can configure **Hotwire Native **to display only the < symbol:

Hotwire.config.backButtonDisplayMode = .minimal

Why not take this opportunity to add one more improvement before running the iOS application again?

Adding the "Done" Button to Modals #

Currently, modals require a slide down gesture to close them. Hotwire Native provides a configuration to automatically add a button titled "Done" to all modals. This allows the modal to be closed either by the slide down gesture or by clicking the "Done" button.

Hotwire.config.showDoneButtonOnModals = true

Run the application with Command + R to see how the changes appear on the screens. Pay special attention to the modals, ensuring that the "Done" button has been correctly added and its closing functionality works as expected.

Navigating Without Stack #

If displaying the "Back" button on a specific screen is unnecessary, a simple solution is to add the data-turbo-action: replace attribute in the link_to helper. This configuration prevents navigation from being added to the stack.

<%= link_to "URLs", urls_path, class: "text-white hover:text-purple-200", data: { turbo_action: "replace" } %>

Run the app again with Command + R and see the result.