Improve the base navigation + add BaseScreen composable for Compose Template

[luongvo]

Issue

Regarding what we faced from the recent projects and compared with what we have in the Compose Template, some issues need
to be improved from the template level:

• 1️⃣ The existing app navigation was not designed to have the nested nav graph as default. So, it requires more effort to implement a new navigation for the authentication flow, such as Splash, Login, or Sign Up. Normally, we should have 2 nested graphs: onboarding & main; then, we can easily navigate to the main graph after authenticating.

• 2️⃣ The composable screens in the Compose Template do not yet have a base screen component. So, it's hard to manage a logic that should be implemented from all screens. We can implement that logic on each screen. However, this approach easily leads to missing or inconsistent implementations.
  For example, we want to switch the status bar color between light & dark between screens. Implementing the call to request dark or light status bar on each screen works.

       val systemUiController = rememberSystemUiController()
       systemUiController.setStatusBarColor(
           color = Transparent,
           darkIcons = false/true,
       )
  

  However, having a logic from a base screen component to force requests on all screens makes more sense.

Solution

Some new improvements should be applied to the Compose Template to enhance the project structure & architecture:

• 1️⃣ Define a "MainNavGraph" (and also "OnboardingNavGraph" later) nested graph between AppNavGraph (AppNavigation) and the app screens as default to improve the app navigation logic. The final app navigation structure will look like this:

   AppNavGraph
   ├── OnboardingNavGraph
   │   └── LoginScreen
   └── MainNavGraph
       └── HomeScreen
  

• 2️⃣ Create a BaseScreen composable for all screens, as we did with BaseActivity or BaseFragment. This BaseScreen will contain base parameters to request & base logic in the body to execute for all screens.
  For example,

   @Composable
   fun BaseScreen(
       isDarkStatusBarIcons: Boolean? = null,
       content: @Composable () -> Unit,
   ) {
       if (isDarkStatusBarIcons != null) {
           setStatusBarColor(darkIcons = isDarkStatusBarIcons)
       }
   
       content()
   }
   
   @Composable
   fun HomeScreen(
       navigator: (destination: AppDestination) -> Unit,
       viewModel: HomeViewModel = hiltViewModel(),
   ) = BaseScreen(
       isDarkStatusBarIcons = false
   ) {
       HomeScreenContent(...)
   }
   
   @Composable
   fun setStatusBarColor(darkIcons: Boolean) {
       val systemUiController = rememberSystemUiController()
       LaunchedEffect(key1 = darkIcons) {
           systemUiController.setStatusBarColor(
               color = Transparent,
               darkIcons = darkIcons,
           )
       }
   }
  

Who Benefits?

Developers (of course 😄 )

[luongvo]

Here is the POC PR 👋

• [#552] Improve the base navigation with a "MainNavGraph" #529
• [#553] Define BaseScreen composable for all screens #533

[luongvo]

Tickets created:

• Improve the base navigation with a "MainNavGraph" #552
• Define BaseScreen composable for all screens #553