Transcript
Hello, France. So previously we had a look at tfi native iOS repository. We ran that demo application in the X code and uh, by click and John, we emulated the application on the, and the iPhone. And we had a look at how different behaviors work. And after this we installed the, well, we kind of updated the URL that we use in, uh, our demo application to be a real URL or to be our local host, 3000 where we're running our rails application locally. And we installed the, uh, bridge components and, uh, bridge components inside our Rails application. So we basically made our existing Rails application work with, uh, native. And now we are going to add new behaviors to our, uh, iOS application. First of all, we're going to add the, uh, tab bar. So if you're building a ribbon rails application, it's very likely that you will want to have a few tabs on the bottom for different navigation. Let's try adding a few tabs, uh, uh, to our app. So actually I'm going to code up the whole solution. I've already done it and I'm just, uh, going to speed things up and copy it and go through the code. So first of all, we're going to add this tab by controller to our application. I'm going to see in controller, and on the bottom of everything, I can add this tab by controller. And I'm saying that we're going to have, uh, uh, three tabs. The first will have the default title home, then post, then playlists. Uh, because in the super ails here, the main, uh, pages are the homepage, the, uh, lessons or the posts and playlists. I could also add tags, but uh, it's, uh, for another time. So, uh, then I also added the default icons house, play circle, and list the number. Where did I get these, uh, icon, uh, names from? So there is this app sf, uh, symbols with a lot of, uh, uh, icons that, uh, are available by default out of the box in iOS. So you don't need to input your own icons, you can just use these icons. So for Play circle, I just found it here, here we have this play circle. There are different options with the just play circle. Okay, so here we have, uh, we say that we are going to have, uh, these three tabs with these names and these icons. Next, uh, I'm going to, uh, add these navigators. So here on top we have navigator, and we're going to also add these, uh, navigators. Okay? Uh, next I need to add the, uh, URLs. So we have navigated root here, uh, no, not here. Navigator route. Okay, here in the syn controller. So we basically say that the redirect to the root URL and root URL is defined, uh, in our, uh, initially in our demo. So root URL is set. Uh, here it is demo current. Uh, demo current is remote. So it is this URL. And I'm going to say that, uh, the first URL is going to be root url. So it's going to be this UL and, uh, the other two tabs are going to be slash post and slash playlists. So it's going to be whatever the URL they have here or here slash post or slash playlists. Okay, let me add these. Uh, removing this one. And now we need to say that we're going to use tabs instead of, uh, just the root view controller. So instead of, uh, uh, kind of this, we are going to use, uh, tabs. So, uh, where is it? Uh, navigator root view controller. Instead of, uh, this, we're going to use the tabs. Okay, now I'm going to refresh our application. It is launching, let's wait a bit. And here, uh, we have our, uh, tabs on the bottom so I can scroll. Uh, we are on the homepage. Let me go to another URL. So going here, you see navigation is stacked. I go down to slash posts. These two pages do not work because, uh, slash posts and slash uh, place list do not exist in the demo application. So again, actually change this URLs to something that exists in the demo application where I know that we have slash one and slash two. Let's, uh, refresh once again. Okay, so we have have our home Now while we have, uh, the text hot native demo, but not the text, uh, home because, uh, if, uh, the page has a title, then the title overrides whatever text you put here. So you should, uh, be cautious about the titles that you're set in. Anyway, let's try navigate. And so I'm going to navigate another page inside this tab. Then I go to post and you see, uh, yeah, I will try. Okay, maybe we don't have slash one and slash uh two in this, uh, demo application. Let's, uh, have a look. Okay, it actually should, uh, exist. Let's go back. Maybe I can try just one and just two replace. Okay, so now it works. Now, uh, when I had slash one and slash two, it didn't work because here we already have a slash so we had a double slash, so we should be cautious with having the same, uh, kind of, uh, slashes in local and, uh, remote not to have, uh, this kind of this narrow vac something that works in one environment with one URL, but doesn't work in another one. Anyway, here I'm navigating to this tab, navigating to the other tab. I'm navigating within this tab. And, uh, you see navigation is stacked within this tab. So I'm going back here, let's try navigate. And you see here I'm where I was. Before I click once again, I go to the homepage of this tab. I go here, I'm in the same place I was. Before I click again, I go to the homepage of this tab. So think, uh, of, uh, this bottom tabs as, uh, separate browser tabs with, uh, their own, uh, browsing history. This is, uh, really, really cool. Okay, so we have added this bottom tabs and they kind of look awful. They are, uh, above the content of our application. Now, interestingly, you see if I'm scrolling, uh, down, also there is content scrolling above, uh, the title above all the native elements of the phone. So I don't want this, uh, content be scrolling up. Also, interestingly, if I open, uh, a native view, this is a native view that is, uh, present here. Here we have our numbers view controller, and here we have this numbers, uh, swift file. So see in the native view we have, uh, a background here and we don't, uh, overflow on the top. So we don't want, uh, to overflow on the bottom and on the top in our, uh, native, uh, web views. So to do this, I'm going to again, copy some code. Here is the example for UI tab bar. So the UI tab bar is this bottom navigation element. Again, I'm going to copy it and paste it in the bottom of our scene controller. And here I'm saying that the, I can update the background color. I can use some default system colors, but I can also use, uh, my own, uh, colors. Now these, uh, swift or iOS colors are a bit veered. So, uh, I actually found the call that I wanted and I use this website UI color io to turn a hex into a Swift UI color. And, uh, that's why I got this specific color. Okay, so I'm going to add this, uh, UI tab bar, and now I need to, uh, add it inside my application. So in the example I added above the bar controller where we define the window root view controller. So, um, here I'm going to add this UI tab bar replace now launching the application. And you see, uh, we have the color of our choice in this, uh, bottom tabs. So looks good. And there is no overflow. Now we're going to do the same for our Neva or header of our application so that we don't, uh, overflow like this. So, uh, to do this again, I'm going to talk over with this UI navigation bar extension. I gonna put it on the bottom of this file. Again, it is not the best practice to like put everything in one file. Possibly you could, uh, have that tabs in, uh, advanced Swift file. You could have this in the, uh, style or design or appear, uh, separate file. And yes. So, uh, I'm going to again say that I'm going to have, uh, a background color of my choice. I'm going to also update the, uh, title color to be white. So I will also add this, uh, where was it here? So I will say UI navigation bar configure with, uh, our background colors. Now let's restart the application. Okay, let's, uh, see, I'm scrolling around and you see we have the color of the text in the top bar of our choice. We have the color of the background of our choice. Let's try opening the foam example. And here you see the other elements are shown as, uh, they should be shown. Okay, uh, let's also fix one more thin. So, uh, what if I click, make a long click on the one of the links. I make a long click, and you see it tries to open a preview in an, in a browser. And this doesn't look really like a behavior of a real mobile application. You would want to possibly disable this, uh, uh, kind of click for a long time to open a preview. So to disable this, we can again, uh, add the an extension. Now, the thin that forces this long click to open the preview. It's called, uh, allow link previews by default. It is true, and we're going to sell it to false, and we're going to, uh, do it in an extension of hot wire config. Now, if we have a look at the hot wire code base, here is the code base itself. And inside the hot wire file, we have this, uh, hot wire config make custom web view. And, uh, it also says here that, uh, we can, uh, use it to customize our, uh, web view. So we are going to cope with this. I will put it, uh, I don't remember where the best place is. I think, uh, after configure bridge, before configuring the root view controller. And, uh, let's save. Okay. Uh, this will not work with debug. Uh, we are missing an argument. Let's see which argument we're missing. Um, frame. So frame do zero. Okay. And, uh, here we will say web view, allow link preview equals false. Okay, now I will, uh, restart the application again. Okay, let's now, uh, make a long click on this link. And you see it doesn't open up in your tab. Uh, it, uh, acts kind of if you were clicking on a button, uh, for a long time. So, yeah, looks good. That's, uh, it for the episode. So in just a few lines of, uh, code, we added the, uh, tab, tab navigation. We added the, uh, our custom, uh, background on the nav bar and on the footer, and we disabled the link reviews. Thanks for being with me and see you in the next one.
8