Voyager: Navigation Solution for Compose Multiplatform - iOS and Android | Complete Guide

🏆 My Online Courses
stevdza-san.com
☕ Let's get a coffee. You're paying! :)
ko-fi.com/stevdza_san
💻 Github
github.com/stevdza-san
📸 Instagram
/ stevdza_san
Voyager (Github): github.com/adrielcafe/voyager
Voyager (Website): voyager.adriel.cafe/
⌚Timestamps
0:00 - Introduction
1:04 - Create a basic KMP Template
2:26 - Basic Two-Screen + Arg Navigation
7:09 - Transition Animations
7:48 - Bottom Bar with Tabs
11:23 - Nested Navigation

[@siarheisudakou4455]

Excellent helpful video! Thanks a lot!

[@legato0]

Thanks for showing how the new navigation library works. For me it is very helpful! 👍

[@StevdzaSan]

I'm glad to hear that! 🙏

[@HambaAllah-cd9im]

I hope you create a complex course on multiplatform compose and voyager/decompose sir 🔥

[@AdrianMaenzanise]

Great video. Very helpful.

[@user-tz4fx7dw3p]

That's great!
thanks for that content.
would like to hear you opinion about Circuit, from navigation and MVI perspective:)

[@eugenewainaina5626]

Nice
A video on the ScreenModel would be great 👍

[@2space23]

Amazing video.

[@muckalica96]

Awesome video, thanks! I'm also wondering is it possible to send parameters from the App to a Screen and if so, how? Best regards!

[@goooozy]

I have used to using voyager navigation for 1.5 years

[@troopell]

If you're using bottom navigation with a home and settings tab, how do you navigate back to the home screen if you're on the setting screen while hiding the bottom navigation bar on the settings screen?

[@AbdallahMehiz]

it is a pretty good library

[@dleonardo3238]

Doesn't passing data from screen to screen when navigating break the single source of truth principle? Isn't using shared viewmodel better to share data from screen to screen?

[@NoPainInLife]

does it work for web also ? Bcs when i used it to that the was some errors in the web page

[@troopell]

If you're using a bottom navigation bar with two tabs, home and settings, how do you navigate back to the home screen if you're on the settings screen, but the bottom nav bar is hidden while on the setting screen? I know that in the docs it says that tabs are siblings so TabNavigator doesn't support back handling, but I kinda need a workaround. Would this be a case for nested navigation?

[@aditya3n]

I'm facing same issue, has anyone managed to do this?

[@user-sl2ev5jj3p]

Hello, the author wants you to publish a cross-platform tutorial of Jetpack Compose PC.

[@mi_coder8637]

How can we get the current destination

[@codewithluca]

Hello, in the examples you do not have a viewmodel. What should be the proper way to pass the arguments to the viewmodel when the viewmodel is initialized and you are using voyager?
Thx for the tutorial!

[@StevdzaSan]

Good question. There are quite a few different solutions for KMP ViewModel, one of them is this one: voyager.adriel.cafe/screenmodel

[@ramtin4842]

Can you provide instructions on how to preview Voyager tabs that are using view models and need custom data?

[@harryg6843]

By the way, I have this kinda problem:
I have 5 tabs: TabA, TabB. TabC, TabD, TabE and in each of them there is a possibility to navigate, i.e. I have inserted Navigator inside and can open screens there. The user clicked the button on TabA and went to Screen1. I need to be able to move Screen1 from any Tab by clicking a button to TabB, not the current stack of Tabs. Pardon me if this is a strange question, but I need help with this! I tried navigating through the tabs and after opening the screen but it didn't work.
Thanks for reading.

[@myexperience8630]

I have got an scenario here! For example, In Screen A I called an API and fetched list, and when clicked on item of the list, i pushed to Screen B. when i come back from B to A, the API is called once again in Screen A, which i don't want. What i want here is that, it should save the previous instance of Screen A, just like in Activities. Anyone could hep me here?

[@StevdzaSan]

Initialize a ViewModel inside the Screen A, and trigger that api function from there.

[@frankyjunior6005]

Compare to decompose, what do you think about it?

[@StevdzaSan]

It's pretty decent to me. 👌

[@kamelkiko7742]

Perfect video ❤🎉
But how can i hide my bottom navigation in my nested navigation

[@StevdzaSan]

Create the state on the top of the hierarchy and observe and update it accordingly.

[@kaustuvmahanti5209]

@StevdzaSan can you give an example?

[@Shreyas-fs3dp]

Please also cover dependency injection in compose multiplatform.

[@StevdzaSan]

Thanks for the suggestion!

[@efeegbevwie9467]

Voyager also works for compose desktop.

[@frankyjunior6005]

How to pop to screen A with data passing from B to A in voyager?

[@StevdzaSan]

Watch the video.

[@frankyjunior6005]

In your video just pop from B to A without passing data to A again. What i asked is pop back with result.

[@codeMasterSerbia]

I would also like to see example to pop with result

[@_hudeifa23]

what if i want somescreens not to have bottombar

[@StevdzaSan]

Then you detect the current screen and hide the bottom bar. :)

[@_hudeifa23]

@@StevdzaSan how to do it i searched and did not get much info about voyager

[@chax255]

I would say easier than decompose.

[@harryg6843]

Try to leave app and go back - you'll get IOException writing serializable object (name = quran.navigation.quran.MainScreen) exception. How could that be fixed?

[@StevdzaSan]

Could you write the exact reproduction steps? Have you used a basic Home/Details navigation or Nested navigation with BottomBar/Tabs?

[@harryg6843]

@@StevdzaSan thanks for answering. I fixed it. Problem was because I was sending inside of a contractor non-serializable parameter. Thank you for the good stuff (I meant videos)!