Code Monkey home page Code Monkey logo

Comments (7)

MaxMichel2 avatar MaxMichel2 commented on May 12, 2024 1

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.

MaxMichel2 avatar MaxMichel2 commented on May 12, 2024 1

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.

raamcosta avatar raamcosta commented on May 12, 2024 1

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.

raamcosta avatar raamcosta commented on May 12, 2024

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.

raamcosta avatar raamcosta commented on May 12, 2024

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.

raamcosta avatar raamcosta commented on May 12, 2024

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.

raamcosta avatar raamcosta commented on May 12, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.