Meet Voyager: A Kotlin Compose Multiplatform Navigation Solution

in this video you will learn how you can integrate a navigation system in your compos multiplatform app hi guys my name is anik I hope you're doing well and I welcome you to a new video when creating mobile apps some building blocks are essential for almost any app the one we want to talk about in this video is the proper navigation system with system bound native toolkits we can access libraries like the Android X navigation Library for Jetpack compost on the Android side and the regular navigation View and navigation link components with swift UI for IOS as of today with compos multiplatform an official direct navigation library is still missing fortunately there are already some multiplatform compatible libraries out there that do an excellent job on this task such as decompose precompose and Voyager there's no right or wrong library to choose however in this video we will focus on Voyager because I think it is a very good solution that is very easy to implement allows type safe navigation and at the same time covers most of the use cases that you would want to implement in the curse of developing a mobile app the library is supported on Android iOS as well as desktop and web it comes with a rich set of functionalities such as types safe regular linear navigation and Nest navigation with multiple back Stacks Additionally the Voyager framework supports State Management and Integrations for various other Frameworks like the coin dependency injection framework which we will talk about in a later point in this video series but enough of the talk let's see how the library Works in practice we will cover linear navigation and how to pass arguments from one Des destination to another tab navigation by implementing a classical bottom navigation bar as well as nested navigation with multiple back Stacks if you're interested in those topics stay tuned because we will get right into it if you followed along my compos multiplatform introduction video you should end up with this compos multiplatform template project and here the first thing we need to do to use the Voyager library is to introduce some dependencies so let's go into the shareed module here and then in the build graded kts file in that file scroll down to the source head sections and here as you can see we need to introduce three dependencies one is the Voyager Navigator artifact which contains most of the regular Navigator stuff then we also have the tap Navigator and as you can see we also include the transitions artifact which is responsible for animations now that we have that in place let's start with linear navigation so navigation from screen a to screen B for that let's head back to the um project overview here and we create a new class and call it screen a and with voyager with each screen we need to implement the screen interface so let's do that and if we go inside you can see that we have an expecting actual contract here so we need to provide a Content composable so let's quickly implement members here then we need to add The composable annotation and let's say for screen a we want to have a text and also button to navigate to screen B so let's quickly do that by using a column and now we can add an text composable that says screen a and we also want to have a button and here we can use the onclick parameter and as you know it from Android jetpack compos you can also add a button label here so let's say navigate to screen B import and now we can go back to the project overview and let's create screen B so simply duplicate it here and then inside screen B let's simply remove the button adapt the text it to screen B and we're done for that part next let's go back to screen a and now we can implement the on click function here so we want to navigate to screen B with voyager we can access a so-called Navigator so let's say Here Local Navigator do current or throw if in this local composition we have Navigator it will assign the variable here otherwise it will throw an exception so we need to make sure later that we also provides Navigator now I can simply call here Navigator do push and because you want to go to screen B let's initialize screen B here okay fine now we have set up all both screens but how can we actually show them for that we need to go back to our app KT file here and if you haven't changed anything yet let's just remove all this stuff here from the template project and then we can also optimize the Imports here and now as we already discussed we need to provide a navigator let's say here Navigator which comes also from the Voyager library and as an input parameter we can say um we want to have here screen a at first so let's see how that looks in practice the app is running and as you can see we have here screen a when I now click on navigate to screen B screen B appears and if I use the back navigation you can see we go back to screen a great that worked but something is missing because if I click on the button as you can see the screen be just pops up where is the transition animation for that we use the Voyer transitions artifact and Voyer provides some pre-built transition animations for us like the slight transition but of course you can also imp ment your own transition animations to use the slide transition for example let's go back to our Navigator here and now we can also you say navigator and now let's simply call slide transition input Navigator and we can try it out back at our app let's go to screen B and as you can see we have our slide transition okay but what if I also went to wrap some other components around this transition here for this case let's say we want to have a uh top app bar therefore let's say scaffold and we introduce that top bar top app bar and now let's simply say text uh Voyager navigation import and now we simply need to add the slce from position inside this conton here or as the conton parameter we can also use the in our padding here and add it as a modifier to the animation so let's do that quickly and if we rerun the build you can see that the topper is above the content here okay nice that also worked but what if we have another common use case in which we want to pass an argument from screen a to screen B that is also quite simple we just need to go to screen B for example and let's quickly um adapt this from class to data class and let's say we have here a text Arc so a simple string and let also dis play it so we say a text and implement or add the text Arc here and of course now if we want to go to the screen we also need to pass in that argument or parameter so let's say here we come from screen a let's reun and if I now once again click on the button you can see that here is now we come from screen a and that is how you can pass in a types way arguments to your next screen great we now have a linear navigation we saw we can use arguments and also wrap all the stuff in yeah some alter layout but what if we want to implement a common bottom navigation for this part we can use the tabs artifact so let's say we have an tab a and a tab B we want to display for that let's head back here to the project overview and we create a new object in this case and let's say tab a because we only want to have one single instance and this time we don't implement this screen interface but the tab interface which on the other hand also implements the screen interface and if we go inside as we already used it from Android development many deprecations but we also see that we need to provide um not only the content from the screen interface but also options variable or tab options here so let's go back and Implement those uh two things once again we need to add the um Co composable annotation here above the get and let's say for this content here we simply use the box and say um t a so we know where we are and now we come to the interesting part because the tab options here is essentially the metadata about this tab so we have an icon we have a title and we also have an index we need to provide for this tab options here so let's do that can say icon and then we use a simple material icon let's say we use the home icon and we have a title which is in this case tab a and we can also use an index which needs to be a u short so for the first tab tab a we say here um Zer U and then we can initialize tab options instance and simply provide all those three variables let's go back to the project overview and here we simply duplicate tab a with tab B let's adapt that really quick to tab B and we also want to adapt the index to one and also let's replace the home icon here with a settings icon for example okay now we have set up our tabs but once again we also want to display them so let's go back to the abkt file so let's start by removing the top bar and replacing it with a bottom bar and here we use the bottom navigation from Material library and as you can see we we have here a row scope inside and we can now use a simple hper extension function on that row scope to help us to initialize the tap items so let's say on the row scope we want to have a tap item and as an input parameter we use the tap interface and then what we need is once again a navigator but this time the tap Navigator so we say here tap Navigator and we can receive it in the same way so local tab Navigator current and now here we can access the um bottom navigation item as you might already know it from Android development and now we want to implement the first variable which is when is the tab selected in this case if the tab Navigator do current so the current visible tab is equal to the tab which we um put into the tab item composable the next thing is an on click function we need to provide because when we click on a tab we want to display it of course so let's say here on click and then we can access the tab Navigator say current equals to Tab and as the last part we also need to provide an icon so let's say here icon and we can now access the metadata we earlier provided inside the um tab declaration so we say here options icon and as you can see it's nullable so we use a let and say your painter so if it's available we can show an icon and then we use the yeah regular icon composable also need to provide a Content description and here we can also access the tab options so we can use the title here for the description so now let's head back to the top and we can now simply um use this extension function because we are inside the Ros scope Say tap item and first we use the tab a and then also tab B now here is still the Navigator provided we need to of course replace it with the tab Navigator and also here we introduce the tab a as an input can remove the navigator from here and here instead of the slide transition we say current tab so the current tab it's shown okay let's rerun and here we have now our botton navigation so let's click on the settings icon here and as you can see the tab switches from A to B okay now we saw how we can implement the tab navigation but what if we have some deeper navigation inside of those tabs so each of those tabs also has an independent back stack that means if I on Tab a and I go a little bit deeper inside this um hierarchy and I go to tab B switch back to tab a I'm still on that same screen with voyager that's quite easy because here we can use our linear navigation example and only need to provide an custom navigator for each of those tabs in this case let's simply intr use a navigator to tab B so go back to tab B and here instead of the Box let's say we provide a navigator and here we have once again the screen a input and for showcase purpose let's also use the slide transition once again and now back in the app let's go to the settings tab so tab B and you can see we have here our linear navigation example I click on the button and we go to screen B and I can also um navigate back here and if I now go to screen B and switch to tab a go back to tab B you can see we're still on screen B and with that I think we covered most simple use cases you will face when implementing an app with compos multiplatform however there are some more functionalities one is the um multi modu navigation which is also possible and of course the screen model but that is a part for another video so as always I hope you had some takeaways like the video subscribe to my YouTube channel activate the notification Bell and I hope to see you soon

Channel: Yanneck Reiß

Views: 7,957

Keywords: Kotlin, Compose Multiplatform, Voyager Library, Mobile App Development, Navigation Solutions, Kotlin Programming, Multiplatform Mobile, Kotlin Tutorials, Compose Navigation, App Development Guide, Software Development, Cross Platform, Voyager Navigation, Kotlin Multiplatform Mobile, KMM, Compose Framework, Voyager for Kotlin, Kotlin Jetpack Compose, Mobile Software Development, Kotlin App Navigation, Kotlin Compose App, iOS Development, Android Development

Id: Aww-h7ygo2k

Length: 14min 40sec (880 seconds)

Published: Mon Nov 27 2023