# Gem Hotwire Native Rails - convert your Rails app into Native VERY FAST | SupeRails #219

- URL: https://superails.com/posts/gem-hotwire-native-rails-convert-your-rails-app-into-native-very-fast-superails-219
- Published: 2025-08-29
- Duration: 55:42
- Access: free
- Topics: bridge (Strada), hotwire native
- Playlists: Hotwire Native

# Quick recap

Yaro discussed the use of Hotwire Native, a tool for wrapping web applications into mobile applications, and demonstrated how to use the Hotwire Native Rails gem to add helpers, routes, and controllers to a Rails application. He also explored the implementation of native tabs, user registration, path configuration, and the functionality of a mobile app. Lastly, Yaro showcased various features of a Rails application enhanced with the Turbo Native iOS gem, which enables creating mobile apps from web apps.

# Next steps
Meeting attendees to try using Hotwire Native for converting their Rails applications into mobile apps.
Developers to explore the Hotwire Native Rails gem for additional helpers and components when building mobile-friendly Rails apps.
Developers to consider using Yaro's fork of the Hotwire Native iOS demo application for additional out-of-the-box behaviors.
Rails developers to implement proper navigation patterns, such as using turbo-action replace, when converting web apps to mobile.
Developers to utilize bridge components like Button, Form, and Overflow Menu for native-like interactions in mobile apps.
Rails developers to use the device format concern for rendering different templates for mobile and web versions of their apps.
Developers to explore and implement the Review Prompt controller for requesting app store reviews from users.

# Summary

## Exploring Hotwire Native for Rails
Yaro discussed the use of Hotwire Native, a tool for wrapping web applications into mobile applications. He shared his experience with the tool, including tips from various talks and articles. Yaro also introduced the Hotwire Native Rails gem, which adds helpers, routes, and controllers to a Rails application for easier conversion into a native application. He demonstrated how to use the gem by running a Rails application locally and rendering it in Hotwire Native. Yaro also mentioned the need for additional behaviors and improvements, such as tab navigation and handling links within the app. He ended the conversation by running the application on his branch, which included additional bridge components and tab navigation.

## Implementing Native Tabs in iOS App
Yaro discussed the implementation of native tabs in an application. He explained that the tabs are defined in the iOS application's scene controller and can lead to different paths. He demonstrated how to update the paths of the tabs without repackaging the iOS application, allowing for changes to be made without going through review rules. Yaro also mentioned the ability to change the system name for icons using SF Symbols and the potential to open the app to find icons. He concluded by highlighting the advantage of having tabs with the context of the current user.

## Mobile App User Registration and Path
Yaro discussed the functionality of a mobile app, focusing on user registration and path configuration. He demonstrated how to redirect users to edit user registration paths and how to handle confirmation models. Yaro also explained how to configure the app's path, including which behaviors should open as a model and which pages can be refreshed. He highlighted the importance of not stacking navigation from a signed-in page to another signed-in page, and demonstrated how to replace the default navigation with a custom one. Yaro also mentioned the need to generate device views for using device in Rails.

## Hotwire Native Rails Implementation
Yaro discussed the implementation of hotwire native rails in their application. He explained how to replace turbo actions only on mobile and not on the web, using the'replace_if_native' helper provided by the hotwire native rails gem. Yaro also demonstrated how to hide certain views in mobile and have them visible in the web, using the 'turbo_native_app' helper. He emphasized the need for different UI elements on mobile compared to the web, such as the native tab bar and header. Yaro concluded by stating that the 'turbo_native_*' helpers would not be deprecated.

## Setting Page Titles for Application
Yaro discussed the importance of having different page titles for various pages in their application. He explained that the page title should reflect the organization name, not the application name. Yaro demonstrated how to set the page title in the controller and in the view using content for hotwire native title. He also noted that the page title currently only works with the native app and suggested adding it to the web app as well. Yaro concluded by emphasizing the need to set titles for each view of the application.

## Implementing New Feature and Components
Yaro discussed the implementation of a new feature in their system, focusing on the use of native components and the integration of Hotwire Native Rails. He explained how to add a new organization button to the native navigation bar, and how to hide certain elements on the web version but not on the mobile version. Yaro also demonstrated how to use the Bridge Form com

## Transcript

So, uh, as I mentioned, native is, uh, a way to easily wrap your, uh, web application into a mobile rep. And, uh, you can kind of launch this, uh, uh, app on the app store. And, uh, there have been quite a lot of, uh, talks about Native. So, uh, notably that was like a Talk on Rails World by Joe Otti, where he also gave a lot of, uh, tips that the rail specific on how to, uh, make, uh, your Rails app work well with the native. So different like rules that you would need to add or helpers that you would need to add. Also, there was nice talk by John Pollard on where he shared lots of tips about how they turned the Buzz Sprout, uh, this application, uh, from just a web app into a mobile app and the launch on the app store. Uh, so there were lots of tips there. I myself gave a couple of talks, but I also shared different, uh, other tips on, uh, uh, different helpers, different routes, uh, different, uh, navigation patterns that you would want to have in your Rails app, uh, so that folks smoothly as a native app. And, uh, there's like a lot of information online, uh, except of, uh, what has been talked about in the written form. Like, for example, a recent article by Joe 10 Tips from 10 years on Hot Via Native, uh, va. He has lots of like, uh, uh, things you'd want to add into your Rails app to make it work smoothly with Hot Hai native. And I myself wrote a bunch of articles about, uh, uh, hot v native and, uh, there's like so much knowledge all around and, um, I, uh, tried to turn it all all into the Gem Hot Hai Native Rails. It's a gem adds a bunch of helpers, a bunch of route and controllers into your Rails application so that you, you can more easily turn it into a native application. Um, let's start with having a quick look at Hot Native, uh, itself. So, uh, hot Native, there's like the website and, uh, uh, it is actually two repositories. It's, uh, the repository for Hot five native iOS, and then there's a separate repository for Hot five native Android. Now we are going to focus on Hot five native iOS. So, uh, it's, uh, like a library that you install into a new Swift application. So, uh, to work for that, you will need to have Xcode installed in Xcode. You can like create a new app and, uh, you would want to add Hot Native as a package, and, uh, you would be able to start creating, um, uh, hot Native App from Zero, but you don't want to go from zero. You want to have some kind of fundamentals like, uh, when you create a new Rails app, you can run Rails, generate new app, and, uh, as an example, they have, uh, this demo application. So, uh, here I ran, uh, I cloned hot fire native iOS on my local machine. I opened, uh, that demo application, uh, uh, in Xcode. Uh, I did it by navigating to, uh, hot Fire Native iOS. Uh, I went to demo, then I typed open and open Demo Xcode project. So it opens the demo app in Xcode, and then I click on launch button and it, uh, uh, launches the application in the virtual iPhone. Now here, as you see, it's launching just and run the web app. Uh, if we go into this demo file, we see that it is, uh, rendering the, uh, content from this URL. So, uh, here's this, uh, app, the way it looks on the web and here is the same app wrapped in a mobile app. So you see this like header is actually mobile, and in this example app there are a lot of different interactions you can play around with, like load. Uh, page model is, so click on it and you see it opens a native iOS model. It has also a native, like done button that would, uh, dismiss the model. And there are lots of other behaviors like, uh, a form, uh, component that, uh, hides the, uh, H TM L submit button that you would have. Uh, here. So here we have the H TM L submit button, and here we don't have the H TM L submit button, but instead we have the native submit button that, uh, submits, uh, the hidden, uh, H TM L submit button. So, uh, bridge components or previously started components is a way to add additional native behaviors to your web app, uh, that is rendered in a hot wire native wrapper. There's another example of a menu. I click to open the menu here, and it opens an action sheet. Uh, another example of, uh, overflow plus menu here. So you see the high end HTML menu. I click on the button in the top right, and it opens the action sheet for different actions. So, uh, here is the example website for native, and, uh, we don't want to run it just on the example website. We want to run it on our Rails application. So what I would do, I would, uh, uh, use the local URL, so it would be a local host, uh, three a thousand. And I would, uh, said, you're out to be not remote, but local. And now I would rebuild the application, but, uh, before doing this, I need to run some kind of rails application locally. Now, um, I'm going to do it as an example on, uh, uh, boil plate application that I recently created. It is mangon and multitenancy boilerplate app. So I cloned the, the Mangon application. I opened it, uh, locally. I ran bundle, created the database run bin Dev to run the Rails app. And here I have the rails, uh, app running and, uh, it's like just a basic Rails application where you can, uh, register as a user. You can create, uh, multiple organizations. Uh, you can, uh, invite other users to be a member in the one of your organizations. Users can be invited as admins or as members. And, uh, everything is scoped to an organization. So an organization can have projects, can have tasks within it. So here has a basic application. It kind of looks okay-ish, uh, on a small screen. So let's try rendering this app. Uh, in Hot Via native, I, uh, again, set the local URL. So we're going to try to render local host in this, uh, hot Via native wrapper. Uh, clicking on run, Let's, uh, see. So the app is launching and it should be making request to our, uh, server. So here I have the app, uh, running. Let's just see our server. Here's the app. So I navigate a different pages, I refresh, and you still have, uh, uh, stuff happening in our Rails console. So our, uh, rails app is rendering as a hot fire, uh, native application. So it already kind of works outta the box, but there is a lot of, uh, stuff that we can do to make it, uh, uh, better. So, uh, first of all, I'm going to install the Gem Hot Ative rails. Uh, where is it here? So Hot Ated Rails. In my Rails application, I will run bundle at Hawaiian native rails, And I will run Rails generate AYA native, and it'll generate a bunch of different files. So let's have a quick look at what it has, uh, generated going to the mannequin group repository. So we've added the G to the GEM file. It, uh, added the hot wire bridge to our, uh, JavaScript. So if you're using, uh, uh, yes build, it'll work if you're working with the input maps, uh, it is going to pin the hot wire native bridge to input maps. Then we added a bunch of tests to test, uh, native interactions. And, uh, let's have a look. So in the GEM file, it also injected the gem browser. The gem browser let's us have, uh, a variant for H TM L templates that will work only on mobile. We have also, uh, controller for native tabs, uh, controller to manage different other interactions, uh, that will be available on the Onfi and Native, a bunch of bridge components, um, updating some things in our application layout, uh, and so on. But we're going to go through all of these, uh, step by step. So we've added all these files. Let's just try running the tests in our, uh, repository. Is adding this, uh, code break any tests? Uh, yes, it is. So, uh, actually know what it is. Basically in the application, H tml, ERB, uh, we have, uh, the head outsourced to another file. And, uh, it was actually trying to change the title and view port. So I'm going to cope with this. Uh, here. I'm just going to have like the regular, uh, title, viewpoint and so on, that you would have in any rails up. I will run the generator once again. And, uh, you see it changed the title. So title is dynamic. You have this page title that is defined in, uh, uh, our native helper, and we have this view put meta tag also defined in native helper. So now I can, uh, I deliver it here or move it, uh, back to our, uh, abstracted head partial. So, uh, uh, now I've kind of run the generator and we have all the files, uh, added to our, uh, rails app. Let's, uh, save our changes. So at Jam put via native rails, I'll just save all these changes. Let's just double check that. The test app passing this time. Okay, yeah, that person. So let's, uh, add the files and, uh, let's have a look. So going in the read, there is, uh, also a recommendation to use my folk of, uh, this, uh, native iOS demo application. So the demo application like gives you a bunch of default behaviors, but, uh, there are some things that don't work, uh, so well. For example, you would most likely want to have a tab navigation on the bottom. And, uh, the default application doesn't provide it. Then, uh, in the default application, if you, uh, click, if you press on a link for the loan, it tries to open it, uh, uh, not inside your app, but uh, uh, in a popup browser as a preview. And, uh, this kind of breaks the experience of using a native application if you can open a link, uh, uh, inside a native application in the browser. So, uh, uh, if, uh, you kind of launched demo application based on my fork, uh, it is, uh, the visit. So I will click here based on my fork. Then, uh, you will have a lot of additional behaviors outta the box. So I'm just going to do it. I have hot five native, IS my fork, and I'm going to, uh, open the branch Super rails extensions. So, uh, again, ov native iOS, uh, and here I have this, uh, uh, branch. I'm not planning to merge this branch. The code is just going to leave for now as a branch so that we can, uh, easily track changes versus the main hot fire native demo application. And, uh, let me run the same app, but based on my branch. So here we have a bunch of additional bridge components here. If we go to the scene controller, we have tab navigation. Uh, let's try running the app. Okay, it says, uh, build failed, missing package by native. Let me try, uh, restarting. Um, I will open demo export project, and I will try running it once again. Now call, start in, uh, uh, what project can take, uh, some time. It can be like one or two minutes, so we'll have to wait. No, like him, it looks like it might be a bit faster. And so it's going to try to launch, uh, our local host, URL. Let's see if it is making any request to our, to our app yet. Uh, actually our app was not running, so it might, uh, not work. I will, uh, restart once again because the web app wasn't running. So the mobile app actually doesn't have anything to render. Okay, I see Jose and, and, uh, Jose joined. Hey, guys, nice to have you here. Okay, so, uh, I run the application, uh, on my branch, and you see out of the box I have this, uh, uh, tabs on the folder of the application. And, uh, we also have like a, a dark color of, uh, the nav bar and the footer. So, uh, everything else looks more as before, but we have our native tabs. Let's try clicking a few tabs. And, uh, at the moment, they're all leading to our root path. Now let's have a look at how the tabs work. So in the iOS application, I will go to C controller and here have the tabs defined. So here are the URLs of the three tabs. We have three tabs, and you can have maximum five tabs. Uh, the first is linked to root url. The second is linked to the web apps slash hot native slash tab one slash native slash tab two. And, uh, that tab titles are defined here. So when we just cold booted the app, uh, it was set both here and playlist, but then we actually visited them. The titles have been updated to, uh, Mon Gun Mongan because the H TM L title of the application is mangan. But we're going to change it for each of the tabs. And we also have the system name for the icons. You can change the system name for the icons using sf uh, symbols, uh, uh, app to find the icons that you want. So, um, you'll be able to open this app and the copy name of an icon that you like and, uh, paste it here, uh, then restart the application and the icon would be updated. But anyway, so, uh, let's get back. We have three tabs and we want, uh, three tab to delete different pages. Let's, uh, keep the first, uh, page leading to the root TRL and the second will lead to organizations path. And the third will lead to, uh, edit my profile. So, uh, root path, uh, list of organizations, and edit my profile. Let's, uh, go to our web app. And, uh, yeah, just going back here, we have, so this path slash by native slash tab one by native slash tab two. So these path are defined in our roots. If you go to our roots have, have this new, uh, file for roots hot via native. So in our roots we have draw hot via native. And, uh, inside our, um, config, we have a new folder roots, and we have all the roots for hot via native in a separate file, uh, hot via native roots. So here we define the rules for the tabs, tab one and tab two. And, uh, we can open the, uh, tabs controller. Now that was also generated by the hot native rails jam. So tabs controller, you have tab zero that is, uh, route path by default, and we're not going to override it. And we're going to update tab one and tab two. So we're going to update the path of this two, uh, tabs. This will lead to organization spot. And this one will lead to edit user registration path. So, uh, if I refresh, or actually maybe I don't even need to refresh, uh, I go, here is the root path here. It's organizations. Here it is, uh, it should be, uh, the path to edit my page. Yeah, it is. I just had to refresh 'cause maybe that was ced. So you see, we updated the native, uh, uh, tabs without actually having to, uh, repackage our iOS application. So I can make th the third tab work, uh, by going to organization spot, I will, uh, try to refresh. So see, uh, I don't have to like resubmit the tab to review, uh, the rules, the new version of the iOS app. And I, I change the location of the tabs. And another good thing is that, um, if you just hot coded the tabs, uh, in the iOS, you would not have the context of like current user or current organization. But here, you can, uh, uh, have tabs with the context of current user. If, uh, there is a current user, for example, uh, uh, if, uh, a user signed in redirect to added user registration, path else, redirect to root path or to new user registration path, let's, uh, try signing out and see if, uh, this works. So I will log out and you see, uh, the confirmation model, the kind of confirmation model you would have on the web works out of the box, uh, in the mobile, you just need to have, uh, uh, data tobo confirm. So data tobo confirm. And you see, I click on logout, it works. So now I will click on this, uh, link. Okay, maybe I need to refresh. Hmm. Now I wonder why this doesn't work. Uh, let's try another pot, the pricing. Maybe this doesn't work. Maybe like the path needs to be, uh, maybe the path was cashed or something. Okay. Anyway, let's leave just, uh, one path now. So edit user registration path. Let's, uh, sign back in. So now let's, uh, see all the other helpers, uh, provided by the gem. So we have the tabs, and let's have a look at the, the heart of the, uh, configuration of, uh, mobile apps, the path configuration. So here we have the path configuration file. And, uh, here we can, for example, uh, define which, uh, behaviors should open as a model, which pages can be refreshed or not. So here, for example, I can refresh the organization's page. If I click the organization, you see outta the box, it opens as a model. Uh, why it, so, because in the rules we say that all the paths that are slash new slash edit by default will be opened as a model. Uh, and here separately, I explicitly said that the, uh, edit user registration path. So this path shouldn't be opened as a model. And, uh, you can also like set whether page can be, uh, refreshed by pulling the, the screen up. So maybe if, uh, there's a page where user can manually draw something, you wouldn't want him to be able to pull down while join and refresh the page and have his progress gone. So let's say I want to, uh, open this added user, uh, page in a model, I would, uh, just command this, uh, out. Then I would, uh, uh, just make sure that the changes are reflected, the straight, uh, away I will restart the, uh, application. And now I expect when I go here that the app should be open, the, oh, yeah, I need to send you in the again, And used all the set to remember me in the, uh, mobile. Okay, so see, the app has opened it in a model. So now whenever you click on this, uh, tab, it would, uh, kind of try to open in the A model. Now see, we have this very weird navigation. I'm kind of already sent in, but, uh, I can, uh, navigate back and, uh, I see the sign in page. So this is a strange behavior and uh, we don't want to have it. And, uh, how this can be solved is, uh, okay, let me just undo this. So, uh, whenever you sign in, you don't want to be able to navigate back to a page where you're not sent in yet. So I'm going to, uh, replace the navigation. Now, let's, uh, have a look again, I will just copy the password. So this is, uh, an important navigation pattern that I'm going to show you. Now, log in. So see I'm logged in, but if I click back in the navigation history, I'm not logged in anymore. So it feels kind of weird and have all this where the interactions. So I'm going to add the, the turbo action replace, but default, we advanced navigation. So the navigation gets stacked like in a browser. You go to the next page and you have the previous page in the history. And we don't want to stack it here from an under sent in page to ascend in page. So, uh, they're going to, uh, say that data tur action should be replaced. Let's generate a device views. We're using device here. Um, rails generate device views. I've run bin Dev once again. Let me just, uh, save the device views. Okay, and now in device, uh, sessions new here, we're going to say Data turbo Action. Replace data turbo Action, uh, replace. So now if I, uh, log in, let me try logging out. And now I will, uh, log in. Let, lemme just, uh, be sure that the, uh, H TM L has updated. I will refresh so that the cache is, uh, updated. Now I'm, uh, logging in and the expectation is that the, uh, the previous page, this one is not saved in the, the browsing history. So log in and you see, if I go back, the send in page is not available and the, I see only the pages with the context of a current user. So, uh, uh, there will be many pages in your application, uh, especially the ones that open in a model where you would want to replace navigation instead of, uh, advancing it advance, uh, uh, data term action advance is the default. You don't usually type it in, you would want to replace it, but here's a catch. Often you would want to, uh, have this turbo actions replaced only on mobile and not on the web. So, uh, hot via native, uh, helper provides you with this, uh, uh, helper. Where is it? Um, replace if native. And, uh, here you would just say not to action replace, you would say just turbo actions replace if native, and it would, uh, replace the navigation if native or advance. So the default behavior, if it is, uh, not, uh, native, and, uh, that's, uh, one of the helpers provided by the native, uh, rails gem. And you would want to use this kind of behavior in all the device forms, definitely maybe in other forms in your application. Now let's have a look at, uh, some more stuff. So I will go to a page in the app. Um, now the tabs don't seem to be working well. Let's look at the tabs. So tab bunch direct to organization's path, and, uh, it doesn't seem to be working. Why is that? Maybe we need to restart the mobile app. Okay, restarted. So let's try to create a new organization here. We have this, uh, model pop up and, uh, there's, uh, a lot of stuff that we don't want and we want. So first of all, we don't want to show the header, especially in the, uh, model views. Also don't want to show like all this foot navigation in the, uh, mobile views. Uh, then maybe we would want not to have this great organization button, uh, in the html, maybe we want have the native submit button on the top right of the screen. So lot of things that we can, uh, improve here. And, uh, again, the titles, the titles don't make sense here. You would want to have the title new organization or create organization and you don't want maybe to show the title here. So all of things that you would want to have different for a native screen, let's do it step by step. Um, first of all, let's, uh, start with hiding some views in the mobile and having them visible in the web. So you see for the web, we have like a couple of, uh, HT ML uh, links in an HTML footer. We want to hide them in the, uh, the native application. There are a couple of ways to do it. So if I go to our application, HTML have, have the footer and foot enough. So, uh, the easiest way is to hire them if it is, uh, a native application. So we have this helper, uh, by default, uh, UN unless TUR native app, you can use either TUR native app or hot fire native app. They are equivalent. So, uh, we will display the footer if it is not an hot, hot by Native app. And same with the footer navigation. Let's, uh, refresh and you see the footers are gone. We can also, if we won't hide the, uh, head navigation, let's try doing that. We can, uh, hide it with the, unless less ative app. Let's, uh, refresh. And now the screen looks much cleaner on the mobile, but if we go on the, the web, actually nothing has changed. So you see we have some specific, uh, UI elements on mobile different than on the web because, uh, like mobile, they have the native tab bar and native header. And, uh, in the web they have to add them both with the HDMO. So, uh, hiding elements for the, uh, the turbine native app patient mode that turns either true false helper. Now let's go next. Uh, we have, uh, the page titles. So here, uh, here we want to have a different titles on all the pages. Like I go to the organization page, I want to say the organization name in the title, not uh, uh, the name of the application. So, uh, if go to Hot native Helper, there is this page title helper. And in the application layout, we have the title sub dynamically, the page title, and, uh, that's all this conditions. So by default, try to render the hot file native title or try to render the, uh, title from the, uh, HTML or from the controller or the application name. And it is a bit simpler for the web applications. So let's try updating the title of a page. Let's first try doing it on the, um, native just by setting the page title in the controller. So for example, on the organization show page, I will have the title be the organization name. I will go to organizations controller. And here in show I will say page title equals organization name, refreshing. And here you see the name of the organization is the title looks, uh, uh, better. Uh, it is one day of setting the title. Another way is, uh, with, uh, uh, content four or native title sign in, or whatever you want. Let's try doing that one. So for the same organization, I will try setting the title in the view using content for I will go to organization show template. And here I will say Content for native title, uh, organization. And, uh, at organization.name, refreshing. And you see the title from the HTML defined. The HTML overrides the title, uh, if there is one set in the controller. And now if we go to the same organization on the web here, you see we have the title, that is the application name. I will go to open one organization, uh, ref Refresh. And, uh, the title is Still Money Gun. Why? Because, uh, uh, we have this page title that folks at the moment only with the, the native app. So maybe we want to actually add this page title to also work for the, um, web app. Let's refresh. Okay. And you see the title has been dated, and we can also manually set a title, uh, in the HTML for the web. So, uh, there'll be one title for the native application and a different title if you want one for the web application, web organization. Refreshing. Here we have web organization, but in the native application we still have a different title. So usually on the web you would maybe be able to have longer titles. And, uh, ideally in native, you'd want to have a short title that would fit on your narrow screen. Okay, so like this, you'd want to set titles to each view of your application so that it displays nicely here. And, uh, let's go further. So here we have the list of the organizations and, uh, here we have organizations, organizations. We don't want to display this organization's, uh, thing here. And in fact, what if we move this, uh, a new organization button to the, uh, native, uh, n bar. We can put it right here. And for this we're going to use a bridge component. And um, it'll be called button component or button controller. So we are going to put a button to create a new organization. Uh, here is the example of the stimulus controller. And, uh, a few examples of how you can render a button. So we are going to use an icon button, just an icon, um, and I would open our organization index. And, uh, let's see. So we want to update this LinkedIn new organization. We are going to add data. Uh, controller will be bridge bottom, uh, pay attention. So all the bridge stimulus controllers are in additional folder. So to files in this additional folder, you would need to have not just dash, but dash, dash and, uh, uh, bridge, uh, title new organization and, uh, uh, bridge iOS image. Uh, uh, let's start with Play Circle and then we can change it. Okay, so, uh, let's try refreshing our page. And you have a native button show up, I click it and it opens the model to create in organization, isn't it? Cool? Let's just, uh, uh, change this play circle to plus circle. I think there exists as a button. Okay, wonderful. So we have this plus button, we click it and it opens up a model to add any organization. Now we can hide this, uh, element completely, um, but we don't want to use, uh, uh, unless turbo native app because it is going to completely, uh, not render the component. And we want to render the component. We just, uh, um, don't want to, to display it, because if we don't render this component, then it is, uh, not going to show up here. There's nothing to render. So, uh, I will actually, uh, I can actually just say, uh, tur native hidden, I think it's turbo dash native or Hot five dash native. Let's see, in tailwind config js. So again, another thing that was added by the Gem Hot native rails. If you're using tail wind, it is going to add the plugins for variance Hot five native and not hot five native. So you can apply different styles only for hot five native or only for hot five native applications. So I will say hot five native, hidden, refreshing. And you see it's hiding the H TM L new button, but it is displaying the, uh, mobile, uh, version of this, uh, button. And we also don't want to show this organization's, uh, title here. So we can, uh, uh, go to that page component where it is defined, And, uh, the whole element with actions and the title, we can say, uh, native hidden, and then we don't need to manually hide it here, but let's leave it. So refreshing. And you see the screen is much cleaner now because we removed everything that is not needed on native, but we do still need it all on the web. So going to our list of organizations here, here is how it looks, uh, in the web. Here is how it looks on mobile. You see, uh, there are differences. Um, yeah. So let's, uh, go to the next, uh, step. We have cleaned up our ui. We understood how to use, uh, native titles. Uh, let's go to the form. So here we have the form and uh, we have the H TM L submit button. And, uh, we want to hide this HTML submit button and put it here. Uh, um, for the submit of the forms, we're going to use a different component. It is, uh, the form, uh, component, so we have it here. And, uh, you would need to manually apply like data, uh, controller bridge form. You would have to add the, uh, target on the submit button and so on. So, uh, there is an easier way. The Gho vantive, uh, uh, rails provides, uh, uh, helper named bridge form width that is going to automatically apply the form controller on any form. You just replace form width to bridge form width. So they have organization slash form. They're going to replace form width with bridge form width, and it should show, uh, native, uh, submit button here. Let's, uh, refresh. It does not work. Now this is a big catch. This is really important. I struggled with this a lot myself. So you need to have, uh, the title of the button defined. Uh, otherwise it won't work. Uh, it'll not work with like the magic lookups that are done by Rails. You need to have a title of, uh, button defined. So let's try once again. And here you see I have the save text. I can put, uh, something else. I can update the text. I will dismiss the model. Go in here again. You see the text has been updated. Okay, so let's try, uh, click and save. And you see we have the, like validation errors. And, uh, you see it also automatically hit the submit button so I don't have to manually say that I want to hide the submit button. It was done, uh, automatically by the bridge form builder. It added the, uh, class native hidden. Okay, so we can submit a form, let's, uh, create a new organization, save it. You saw the interaction, it closed the model, and then it navigated to another page. And, uh, it didn't look like a very nice, uh, interaction. Uh, so we can maybe improve it. Uh, the way to improve it would be the same as we did with the sessions new. We added this data to action replace if native. So it's something you would usually want in all your models, uh, most likely. Uh, here I would additionally say data turbo action replace if native. Now let's create a new organization. And, uh, uh, I don't think it was smoother, But nevermind. We can have a look at this later. Another problem I see now I just navigate to the organization and I don't see any action buttons. It is because, uh, uh, in the page component, I said native hidden, uh, everywhere. I will just do it, uh, not everywhere. I will do it on the title of the page. And, uh, so, so the action buttons can still be visible. Uh, so like here, the manual hit the action button to, uh, add new organization, but, uh, we are not hiding this buttons anywhere. So, uh, the font displayed. Okay, uh, actually thinking about these buttons, let's try adding another bridge, uh, component. Uh, the action sheet, that would be like a menu from the bottom or a UI menu. That would be add dropdown from the top. We could use either of them. Let's, uh, try. So, um, let's have a look at our catalog of, uh, bridge components that they have. Let's try adding the, um, overflow menu, uh, controller. I will just go with this, uh, um, HTML example, paste it in the organization's show. And, uh, let's see. So we are going to, uh, have most of everything the same, but, uh, on each of these, uh, uh, links, we are going to say, uh, data bridge menu target item. Okay? And, uh, we're going to add, uh, this wrapper around the links. Uh, okay. Uh, so we have the bridge menu, we have the bridge overflow menu button to open the menu. And, uh, each of these, uh, links and buttons should open up as an action sheet. So now if I refresh here, you see I have this button pop up. All these links are hidden now because they have this hot fire native hidden, uh, given to us by the example that we copied. Um, yeah, in the example we had hot fire native hidden. So the buttons are hidden, and we have the native action sheet. Wonderful. So if we have organization open, we can have all the real organization data here. Let's open like organization show. Here. We are going to have the content of organization like the an image or like, uh, all the post tags, whatever you have inside an organization. So the content. But we have the native menu of actions, so we can open the model to edit the organization. Uh, we can, uh, transfer the organization. We can, uh, destroy the organization. Let's try to destroy the organization. Okay, you see, we related back to all the organizations. So see we use the another which component that is, uh, overflow menu. That gives us, uh, n button to open an action sheet. Okay, let's, uh, go further. Uh, what are the helpers have we got here in the Hot Definitive Helper? So, uh, if you put metatag, it, uh, ensures that a user cannot zoom, uh, the screen with, uh, his fingers. You don't need to do anything with it. Then I mentioned previously you should update the page titles for all the pages that users can navigate to. So the title is set correctly, um, uh, replace if native, uh, to replace the current screen, especially models, and not be able to navigate to the page. It was like, uh, before the model. Then, uh, I override the link too because if you, let's say, try to put Target blank on an internal link. Let's just try putting a target blank on an internal link in our application. I will go to Organization Index and, uh, on a single organization link, I will add Target blank. So try to open it in a new tab, target blank. Okay? Now I'll try to open it in a new tab. And you see it tries to open a link in our application in, uh, in, in app browser. This looks horrible. We don't want this. Uh, but in some cases in the web, you want this, uh, target blank to be set on internal links. So by having, uh, this, uh, way of overriding link to default behavior, now I'm going to refresh and, uh, it's kind of supposed maybe like, uh, I have some changes discussed or something, but, uh, it's supposed to not open, uh, uh, internal URLs in, uh, uh, and in a browser it's supposed to open them, uh, normally, so without trying to open the, in a browser. So it would kind of set target blank only if it's not a native app. Okay? Then we have the bridge form width that, uh, adds the native submit button and hides the H TM L submit button. Uh, couple of helpers that we don't really need. Uh, let's see what else was added by the jam? So we have, uh, yeah, we have device format. Okay, this one is a very interesting one. So let's open device format. So we can have a new template variant that is mobile. And, uh, it would, uh, uh, if you are opening in a webpage from a mobile, uh, browser or from a native, uh, app, then it would be able to render different templates. For example, let's go to organization index. So you have the organization index, and what if you want a completely different table, uh, template for, uh, mobile, I would just go with this. I would have index html plus plus mobile, and, uh, I would just say, uh, this is mobile. Now, uh, let's go back. I will refresh. And here you see it is rendering a different template. It is rendering the template with plus mobile, uh, on mobile. But if we go to the web, it is rendering the old template. So if you have like really big differences, uh, in the, the way you want to render on mobile, uh, on native on web, then you can use, uh, this, uh, device format concern. Again, you can have like a different, uh, variant for mobile browser and for native, uh, app. It could have like a request variant, mobile request variant native if TUR native app, and, uh, variant mobile. If, uh, the browser is a mobile browser. So let's, uh, say this is going to be plus native refresh. It works. Uh, let's just copy what we had before. Okay, so we have like this additional text, this mobile plus the, uh, general layout of our page. Uh, let's see what else was added by the gem. So we have device format. We have the tabs controller that you can set the tabs. Um, path configuration, uh, mostly like the most used thing. It will be defining which pages should open up in a model and which pages you want to refresh on. The, uh, pulling down alternative help, we had to look button component. We added the button here, form component, the added the bottom here menu and the overflow menu. Uh, we have it here. Let's actually try something different. Let's try, uh, nav, uh, component. Here's another component is, uh, provided by the Hot Bay native, uh, uh, rails starter. We have this n co controller. And, uh, the idea is that instead of, um, opening this action sheet, it's actually going to open a dropdown from the, uh, right here. So let's try adding this kind of dropdown. I will, uh, maybe try adding to another page. Like, uh, for example, on the homepage, I will have, uh, a button to, uh, sign out and a user icon. Let's try adding this. So I'll go to Static Index, the homepage, this one, and here I will have this, uh, uh, link to I know organizations, uh, or link to edit, uh, my account. Uh, edit, uh, user. What's the path? Edit, user registration path. It's going to be use a circle and a link to sign out. Uh, and this is going to be Destroy User Session Path. Uh, data, uh, we will say, uh, turbo Action should be, uh, delete data, uh, turbo Action. Do we have Turbo Action defined anywhere else? Um, yeah, we use it previously to, uh, uh, advance or replace navigation. And here it's going to be Turbo Action. I think it is, uh, destroy, ah, it should be Turbo Method. Turbo Method. Uh, destroy or delete method. Uh, delete. Okay, let's, uh, refresh. Okay, here I have this, uh, uh, Uh, dropdown. I can go to all, uh, uh, to edit my profile, edit profile, or I can sign out. Let's try again. So here I click edit profile or sign out. And here I've signed out. Uh, so yeah, it works. We've, uh, tried another component. Let's see what else was added by the jam. So another review, prompt controller. So I think you can ask a user to leave a review, uh, three times in a year. So use this one wisely. Uh, best of all, if, uh, a user just had a positive interaction with your application, and, uh, you could add this, uh, metatech anyway in your application. Let's try adding, uh, uh, for example, in, uh, yeah, on the homepage. Let's try adding it and see if it works. I will refresh. So, uh, it doesn't focus because, oh, yeah, here it is here. It's wonderful. So here we asked a user to leave a review for our application. Fantastic. Um, yes, uh, that's, uh, that's basically it. So we went through all the additional features that, uh, the Fin Rails adds, and all the additional, uh, uh, elements that, uh, my for of Fin iOS demo app, uh, apps. And this can really speed up the way you, uh, can make your Rails app, uh, converted into a mobile application and launch on the app store.