Understanding NavLink in SwiftUI

hello everyone and welcome to azam sharp weekly and in this video we're going to look at the navigation link in civ ui and how can we use navigation link to perform basic navigation unwinding segways and different kinds of unwinding segways using a list using a button control and so on so let's go ahead and get started now if you want to perform navigation in your ios application using surf ui you have to use something called a navigation link a navigation link comes with many different flavors you can see you can pass in the destination where you want to go a tag is active and many other things so let's start with the very basic what about if i just want to go to a particular view which is in this case text view and we'll just say destination the label dictates that how your navigation link will appear so if you want the navigation link to be simply a text saying go to destination you can do that there we go now one of the things that you see over here is that on the right hand side you can see the preview and in the preview it is showing you that it is all faded i mean i can't really click on it so if i go ahead and run the application it doesn't really do anything it doesn't take me anywhere it should take me to a new view which will be of type text but it doesn't and the reason is that whenever you're trying to use a navigation link you have to embed everything inside a navigation view this navigation view is going to give you access to the navigation controller and now you can see that your navigation link is appearing blue which means it is clickable and we can click on it and go to the destination and you can see that it is showing us a destination view now the destination view over here can be anything so right now i'm using a pre-built view which is called a text view but it can be anything so this means that i can go ahead and construct a brand new view so i can simply copy that and i can call it detail view and in the detail view i can simply say detail view so this is a completely separate view that i have created called detail view and what i want to do is when i click on the destination it should take me to the detail view so i will simply substitute the text with a detail view let's go ahead and run it again and there we go so we can go back and forth really easily using our navigation link so that's the primary use of the navigation link to go from one screen one page to the other screen other page of the review that is how it works now sometimes you want to activate a navigation view this means that maybe you only want to go to the navigation view or perform the navigation when a certain condition is met one other thing that you will note over here is that we are currently using the navigation link just like the basic implementation but it does come with many different flavors as i mentioned earlier one of them is tag and one of them is active now is active1 is a condition based so let's go ahead and try to use that one basically we want to perform navigation when a certain element certain property is turned on or off now you can see the navigation link over here takes in is active which is a binding boolean so we need to pass in a binding property i'm just going to pass in is active the remaining part is same you have the you know the destination so detail view is perfectly fine over here and you have a label that you want to go now one thing that will be interesting to see is what will happen if i simply put the label as text and i say go to destination now it is obviously complaining that there is no such thing as is active so let's go ahead and declare that property as a state property boolean false so at least it should compile now all right correctly it should be okay now there we go so over here we're saying that if it is active then we should go to the detail view and else we shouldn't go to the detail view but keep in mind that we are displaying a text view over here a text view is simply saying go to destination now if i go ahead and run this and click on it then even though the detailed view or the is active is false it still goes to the detail view alright so that's the important thing to remember now if i replace the text with a button view and i say go to detail since button is clickable i can go ahead and run the app and now if i say go to detail view nothing really happens and the reason nothing is happening is that the only time when you click a button the only time the navigation link is going to take you to the detail view is when the is active is marked to be true but we haven't done that so in order to do that i can go ahead and say that is active is true and now you can see that we are able to go to the destination so this can be really useful when you are performing some sort of a login or registration and after performing a login or registration you want to take the user to a detail view or a dashboard view or some sort of a view so this technique can be used over there now one other thing that we need to talk about is how do we go from one link or one page to the other page when we are displaying some sort of a list all right so let's go ahead and first display a list and i'm going to quickly build a list of 1 through 20 elements i'll get access to the index and in the end i'll just display the value of the index which can be 1 2 and 3 and all that stuff you can see that that index is getting displayed now what i want to do is when i click on this row this element it should take me to a detail view all right so how can we make that how can we make it happen so one thing that we can do is we can use a navigation link in this case we're not going to use is active and the reason is that we are simply trying to perform the navigation when you click on a particular cell or a row so we can simply say destination where do you want to go and we can say that we want to go to the detail view and what should appear as a navigation link well the text should appear so i can simply go ahead and copy this text now just as you will embed a detail view or navigation link inside a list you will start seeing these detailed disclosures automatically being added which is pretty cool which is basically saying that if you click on one it you will go to the detail view and basically you're going to a detailed view no matter where you click or no matter which row are you tapping but what if we wanted to pass the value also if i click or tap on one i want to pass the value one to the detail view so how can i do that well your detail view is currently not taking any values so let's go ahead and say that it does take a value which is index this means that in order to call detail view we need to pass in the index and that's it and now we can go ahead and display the value in the detail view so it becomes pretty simple to do these kind of things that you can simply pass detail view one detail view seven you can see right there seven so whichever element that i'm clicking or tapping we are passing that value so this is how you can create a master detail kind of a screen where there's a list of elements and you tap on one of the elements and the value is passed to the detail view or the destination so these are a couple of different things that you can do with the navigation link now one of the very common things sometimes you want to do is you want to go from let me draw it out over here you want to go from view a to view b to view c but something happens with view c that you want to jump back to the voa all right so view a to view b to view c and from view c you want to go back to the view a this is called an unwind segue so how can we perform this unwinding segway when we are using surf ui so let's go ahead and see the first thing we're going to do is we're going to create a very basic kind of architecture for our views the quickest way i can think of is simply using a navigation link all right and we can create a destination in this case so the destination is second view which we don't have we will create that and this will allow us to go to second view all right there is no such thing as second view so we will create these smaller views i will simply go ahead and call it second view we're not going to pass in anything over here for starters and i'm just going to call this this will be a second view and just like second view we are also going to have a third view third view third view okay so now on our screen we should see a navigation link that will hopefully take us to the second view from the second view we should be able to go to the third view which is not implemented so let's go ahead and implement that let's go back over here and we will take it take the person to the third view and from the third view we will have to somehow go back to the main view let's see which is our i believe it is called content view and i will say go back to content view okay so this is our application let's go ahead and run this the first thing we will see is our content view this is a content view i can go ahead and click on second view it does take us to the second view you know it would be a much better idea if i have some sort of a navigation also telling you that what kind of a navigate what kind of a view it is so this is the second view let's see if it actually appears over there so we can add these things so that we will know that you know what kind of a view we're talking about content view and for the third view we will go ahead and say navigation title third view so that we know which view we are on okay so we're on the content view we go to the second view we're on the second view we go to the third view we're on third view we go to the uh that's not correct right i mean we kind of like added the content view back again to the view hierarchy and that's not what we wanted we want when we are on the third view when we click on this go back to the content view it should just jump back to the first view so remember the diagram that i created we are on view a which is our content view vub and then view c from view c we should be able to jump back to the view a but what we are doing right now is not this what we are doing is we are just going moving forward to view a and that's not what we wanted so this is called an unwind segue navigation from view c or the third view we want to go back to the content view the first view so how can we do that right that's the difficult part how can we do this thing well one of the ways that you can do it is by using the is active overload of the navigation link so maybe we can use that approach navigation link is active now in is active we are simply going to pass in is active which is a state property defined on line number 12. the destination will remain the same which is second view and the label will also remain the same which will simply say second view so i'm just going to go ahead and delete this portion we don't need that okay so we're back where we kind of started the only difference is that we have we're now passing is active but what we really want to do is if we are performing not this one this one if we are performing this navigation we should pass in is active to b so is active will somehow be passed to b and then the evactive will be passed to c and somehow c which is our third view is active will make sure that this property will somehow changes it to true and when is active turns to true then the actual navigation portion will be shown all right so let's go ahead and see how we can do that so in order to pass the value and also giving the opportunity for the second view or the third view to change these values we need to make sure that we are able to pass a binding property is active and you can obviously change the name of its active to anything you want that's perfectly fine and now i'm going to go ahead and pass it is active okay so we're creating this as a binding property wrapper or is active inside the second view is a bindable property or with the property wrapper binding which means that if the second view changes is active it will also change or trigger an update for the content view but we don't really want to do anything in the second view the second view is simply going to pass a property down to the third view because it is the third view that is going to change the property from true to false from false to two basically so you can see that when we are using the binding and we want to pass it down further on we just pass it in the overload function or in the initializer so now the property hopefully reaches is active on the third view and inside the label over here instead of this i can go ahead and create a button go to content view and mark is active to true keeping in mind that this is the same is active that you have passed from the content view which is the root view so it's just passing down to second view second view pass it down to the third view and so on and hopefully when we change this property it's active to true then this one becomes true and we should be able to hopefully see our navigation view or the content view okay so let's go to the second view third view content view so you can see that it is still not working so something is not right all right so what do you think is wrong with our implementation over here what is something that we are missing all right so this is the interesting part that why is this not working well one of the things that you will note is when you are in the content view and you can see that we are not really changing is active right i mean it's false and you will assume that it will be false but what's going on is that the navigation link when you click on the text it will make it is active to be true automatically and if you don't believe me you can always go to the second view or the third view and try to print out the value is active it will always be true and if it's true then the root is active right so what we want to do is don't make it active we will have to make sure that we are making it inactive and that's it so now if i go ahead and run the application i'm on the content view i can go to the second view i can go to the third view and now when i click on the go to content view it takes me back to the content view the root view so we go from a to b to c and we jump from c to a this is great this is called the unwinding segue and that's actually one of the most important things when you're performing navigation in large applications that you want to simply jump from view c view d view a do something else all right so this is great it looks like it's working correctly but how will it behave if we want to do the same thing but using a list control so what if we don't have any of this and instead of that we have a list control that we have already created and in the list control we want to do the same exact thing so we will take the user from a navigation link and i'll rewrite this navigation link so the only difference is that now we have a list that's it is active destination the destination in this case we will do go to the second view we will pass in the is active and we will simply print out the numbers over here i guess okay so everything remains the same the only thing that we have done is now we are using a list control instead of a simple navigation link with a text view all right and you can see that the list is actually being displayed so let's go to the second view okay we are on the second view let's go to the third view we're on the third view let's go to the content view and looks like we can go so our same stuff that we were doing it also works for a list you can go to the third view go to the content view perfect right now this is all fine but the main pain point that you might see over here is passing the is active from here down to the second view from second view to the third view to the fourth view to the fifth view to the sixth and so on so that becomes a very repetitive step that you will have to do because you need to access the is active property or root is active property or whatever the property that you're sending in and you also want it to be changed when the third view down the road in the navigation wants to go back to the content view so instead of passing these values again and again maybe we can use a different approach maybe we can go ahead and create something that will allow us to perform navigation but not pass these values again and again down the road one of the things that we can use are the environmental keys so let's go ahead how and see how we can create those things now you have may have already seen these kind of keys remember whenever you type environment and you simply pass in some sort of a key over here like manage object context or there's a content key you know you can also pass it like a presentation mode i believe right the presentation mode so all of these keys are created by the swift ui automatically i mean there's a long list of keys that you can access but nothing is stopping you from creating your own keys so let's go ahead and create our own key the first thing i'm going to do is i'm going to create a type alias i'll call it root presentation mode and we will call this a boolean because root presentation mode in this case is simply true or false just like is active now in order to create our keys we need to create a structure and this can be anything i'm just going to call it root presentation mode key which will be an environment key we will have to create one property which is called default value it will be a bindable property of root presentation mode which is simply a type alias in other words sinclair boolean and we need to provide it some sort of a value so i'm just going to go ahead and pass it false because the boolean i can pass in true or false i'm just going to go with false in the main main one now we can perform an extension on environment values and we will return the root presentation mode that's the property that we're creating which will be a bindable root presentation mode which is boolean and we need to provide the getter and the setters and that's it so for the getter we will simply pass in the root presentation mode key dot self and for the setter and set is in itself with the kind of like a dictionary so we can simply go ahead and say root presentation mode key again dot self equals to new value so whatever the new value that you're setting that is perfectly fine the one other thing that we want to do is to create an extension [Music] on our root presentation mode which is boolean and that will allow us to dismiss so we will simply go ahead and create a function called dismiss and we will say self equals to nil well in this case self equals to false are true all right so we'll have to make sure that we are setting it to true and that's it now we can go ahead and try to use this all right so let's go ahead and see that how we can use it so instead of passing the value to the second view like this we don't really want to do that anymore i mean if we are creating our environment values that we are doing we have no intention of actually passing is active again and again down the tree so i'm just going to remove this part and the same thing will happen for the third view we don't really want to do that anymore that's the whole point that we are creating our environment values that we don't have to pass it down the road again okay now in order to inject the environment values we will use environment and the keypad so just like the other keypads that you have used you can use root presentation mode the one that we just created and we should pass in some sort of a value so in that case the value will be kind of like is active whatever the value of the vector is all right going down the road we can skip second view because second view is not really doing anything to go back to the first view it's the third view where we actually want to get access to the value and now we can actually just get access to the value by using the environment variables and we can access root presentation mode var root presentation mode and now we can say root presentation mode dot wrap value dot dismiss all right let's go ahead and run this and see if that works or not so we're going to go ahead and give it a try we'll go to third view and now you can see it's not working kind of weird right because we did everything that we were doing before let's go ahead and run the application and we will see something hopefully in the console okay so if ui encountered an issue when pushing to navigation so let's go ahead and see what's going on let's go to the third view back to the content view you can see that it's not even going to the content view so it's kind of like stuck at this point and i think the problem right now is uh well first of all it's not actually going that's the big problem let's go ahead and make this to be true although that should be [Music] should be false sorry i think i made the mistake of setting it to true okay so maybe that was the issue let's go ahead and run it all right third view content view you can see that still it is not really working and it's not really working because it is inside our list and what's going on is that you are trying to change the value of is active and there are a lot of different views that are inside your list and at one given point only one view can be activated so now the question becomes okay how do we fix this kind of a problem because if we try to do this if we tried the same approach but without the list will it work or not so that's our second thing that we should try it out that if we are trying this out without the list will it work or will it not work so let's go ahead and try it out dot environment and root presentation mode is active so what we have done is we have simply removed the list and we are using a plane second view third view and okay so it's still not working so there's something wrong that we need to fix all right so looking at the code one thing that we realized is that we are putting this environment object or environment values to the navigation link we should probably put this at a little bit more higher scope like the parent of the navigation link which is the navigation view so let's go ahead and put it there so that it can be transferred to all the elements that are inside the navigation view and all the elements will be inside that navigation view because we're just pushing controllers and views one and each other so go to the content view and now you can see it is working so we go to the second view third view and back to the content view perfect so it looks like our simple approach is working but let's go ahead and try it out what will happen if we are using a list like this so i'll go ahead and run it and immediately we get a problem with this does work but you can also see that there are some issues right right over here you can see it is telling us that there are some issues going on and i think the issues are going on is that whenever you're using a list control you shouldn't use is active and the reason you shouldn't use is active is that list has a lot of different items or rows being displayed and at one point only one thing can be active but now since it's a list and it is activated um all the things inside the list gets activated so that's not a good approach so how can we make sure to fix that problem now one of the things that you can do when you're using a navigation view with a list is not to use a navigation list a navigation link with a is active but with a tag so there is another thing that you can use which is navigation link with a tag a tag simply means that when the selection is equal to the tag then it will perform the navigation all right so for the tag i'm just going to pass in the index which is hashable and for the selection i'm just going to go ahead and create another one which is called selected index the destination will remain the same which is second view and the label will also remain the same which is just displaying the numbers in a text view we do need to create a selected index so let's go ahead and create that we will call it selected index which will be integer and initially nothing is selected so this has to be optional optional all right now if we go down over here the root presentation mode we can't really pass in is active because we're not really setting it anymore so we will simply go ahead and make sure this is selected index but obviously the root presentation mode value has to be boolean so we need to update that also so over here we will say integer optional initial value will be nil and finally whenever we are assigning it we are resetting it we will simply set it to nil there we go okay so that should be it one last thing we need to do is right over here okay so that's that is done let's go ahead and run it again and now we are performing the navigation you can see that right over here it's not really giving us those kind of errors hopefully let's go ahead and see no not those kind of errors so some something else which is related to slip ui and you can see that everything is working perfectly fine now all right so we didn't really end up using the is active portion for our list we created a tag or we use a navigation link with a tag and a selection whenever the selected index is matching the tag then it performs the navigation and whenever the selected index uh in this case or is null then it just goes back all right wow so we learn a lot about navigation link and hopefully you have you're now more comfortable with navigation link that how to perform navigations and uh segway navigation unwinding segways uh tags selections is active true and false and so on and hopefully this will help you perform your or add create your next new surf ui application so thank you so much if you like this video and want to support my channel then the best way would be to check out my udemy courses i have a lot of different courses on civ ui ios development combine core data and much much more so definitely check out my courses it's available and check out the link in the youtube description to get the best deals i also have the best-selling course on async and await it's a new feature that is included or added to the ios frameworks if you're learning about core data then check out my course on the core data and so on thank you so much for your continuous support and hope you will enjoy my courses

Channel: azamsharp

Views: 631

Keywords: swiftui, ios development, swift language

Id: _eAj91rGqsk

Length: 35min 56sec (2156 seconds)

Published: Wed Nov 03 2021