Comments (7)
I'd generally add code but I think that in this case, code would be a little difficult to interpret correctly so I'll attempt a diagram 😄
First of all, we can agree that initially, a compose application starts with the MainActivity. Inside this activity, I usually have what I call my ComposeApp.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
// General setup
lifecycleScope.launch {
setContent {
// More setup
MyComposeApp(
currentRoute = "start"
)
}
}
}
}
Within the MyComposeApp
I have the following setup (again, this is a general use, most people may not do things this way)
fun MyComposeApp(currentRoute: String) {
MyComposeTheme {
ProvideWindowInsets {
Scaffold(
// Scaffold setup
) { innerPadding ->
MainNavGraph(
modifier = Modifier.padding(innerPadding),
navController = navController,
startDestination = navBackStackEntry?.destination?.route ?: currentRoute
)
}
}
}
}
The complexity arrives at this moment. Inside my MainNavGraph
, I initialize a NavHost
as per the Android docs and this contains all my composable navigation objects as well as nested graphs if need be. Generally, I will have a Welcome screen which will lead to either a Login or a Register screen (or screens) which will in turn, navigate to a Home screen.
It is in this Home screen that I add a Scaffold with a bottomBar parameter which therefore has its own NavHost
which links (via navigation functions) to the MainNavGraph
.
You will notice that in this setup I have a NavGraph (and more specifically a NavHost) in the MyComposeApp
as well as in the Home screen.
This may or may not be best practice but it does allow me to only have the bottomBar where I want it (within the Home sections of my app) and not elsewhere.
The question finally!!!
In this case where I have two NavHost components in my app, is the library capable of handling navigation between the two NavHosts and if so, would a nestedNavigationGraph combining composable navigation objects between both NavHosts be easy to integrate or not ?
For a quick example of what I would have, here is a small version of my MainNavGraph
, BottomBarNavGraph
and homeDashboardNavGraph
:
MainNavGraph
@Composable
fun MainNavGraph(
modifier: Modifier = Modifier,
navController: NavHostController,
startDestination: String
) {
NavHost(
modifier = modifier,
navController = navController,
startDestination = startDestination
) {
composable(
route = "login"
) {
LoginScreen(
// Parameters
)
}
// Other destinations
homeDashboardNavGraph(navController = navController)
}
}
BottomBarNavGraph - Note that the bottomBarNavController is what I use in the bottomBar parameter of the Scaffold and the navController is the one associated with the MainNavGraph
@Composable
fun BottomBarNavGraph(
modifier: Modifier = Modifier,
bottomBarNavController: NavHostController,
navController: NavHostController,
) {
NavHost(
bottomBarNavController,
startDestination = "home",
modifier
) {
composable(
route = "dashboard"
) {
navController.navigate("home_dashboard_graph")
}
// Other destinations
}
homeDashboardNavGraph
fun NavGraphBuilder.homeDashboardNavGraph(navController: NavHostController) {
navigation(
startDestination = "home_dashboard",
route = "home_dashboard_graph"
) {
composable(
route = "home_dashboard"
) {
// Home dashboard screen
}
// Other destinations
}
}
from compose-destinations.
Hey @raamcosta !
Thanks for the very quick reply ! Yes this does help me and I should also add that I tested some things with the default compose navigation which fixed some issues I was having but I do have to admit that this library feels much more familiar to XML navigation and cleaner !
I'm really hoping Google hops onto this and thinks about adapting the current system to work more closely to this (I think I speak for every dev when I say that writing less code is a pleasure!)
Thanks a lot for your help and I'll keep my eye out for future updates and information !
from compose-destinations.
If you find something that you don't know how to do with this library please let me know.
I really want to make sure everything you can do with normal jetpack compose navigation is also possible with this library!
from compose-destinations.
Hi @MaxMichel2 ! 👋
Thanks for opening an issue.
I'm not sure I understand exactly what you mean 🤔
What exactly do you want to achieve from the perspective of the user of your app? Do you have examples of code using Jetpack's compose navigation that I can take a look at?
Without these, it will be very hard for me to help you.
Thank you in advance!
from compose-destinations.
hey again @MaxMichel2 !
Ok so if I understand this correctly, yes you can easily do this with Compose Destinations.
First of all, read this section of the wikis:
https://github.com/raamcosta/compose-destinations/wiki/Defining-your-navigation-graphs#manually-defining-navigation-graphs
You'll need to do that: disable the automatic generation of NavGraphs object and create it yourself basically. This way you can have multiple top-level NavGraphs in there and then you can pass one to your main DestinationsNavHost
and one to your home DestinationsNavHost
.
You may also want to check this issue: #21
And particularly the PR I opened on @BVantur sample repo:
BVantur/ComposeNestedGraph#2
(some minor things in the PR might be outdated, but the general idea is the same since they had a very similar case)
Let me know if this makes sense to you and if there is something I can make clearer!
from compose-destinations.
Gonna close this as this will not require any change, but please post in a comment below if that helped you! I will pay attention to it :)
from compose-destinations.
And thanks for the kind words about Compose Destinations! I really also do believe it improves the experience greatly 😊
from compose-destinations.
Related Issues (20)
- Deeplink pattern
- Nested Graph Problem HOT 5
- popUpTo will not pop up Destination inside NavGraph
- [Security] Repository is vulnerable to MavenGate
- Generated code isn't internal
- Best way to implement / sample code with master-detail for tablets?
- Nested Destination NavGraph with default one being the "deeper HOT 4
- Forbid navigation into subgraphs from other than start destinations of the subgraph
- Compose to Fragment Navigation
- Update to compose navigation 1.7.0-alpha02 HOT 2
- WearOS: Disable swipe-to-dismiss gesture on a destination. HOT 4
- KSP throws error when creating new NavGraphs HOT 1
- Destination for multi module project. HOT 1
- Preserve top-level screens for bottom bar HOT 2
- Crash Caused by android.os.RemoteException while calling navController?.navigate(PipOverlayScreenDestination) HOT 1
- Bottom Sheet Navigation Different Behavior Requirement HOT 1
- Using ModalBottomSheetLayout always fallsback to startdestination when configuration changes HOT 2
- BottomSheet onDismiss callback possible? HOT 1
- Combine Destination annotations HOT 7
- Lifecycle for screens that then shows a dialog HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from compose-destinations.