Current workaround for Compose's ModalNavigationDrawer (M3)

[malliaridis]

I was recently implementing a navigation drawer in Compose with Material 3, which was previously part of the Scaffold but now there is a separate composable with a special state (DrawerState).

I tried to find a solution to combine Decompose's component state with the ModalNavigationDrawer, but I was only able to implement a workaround (see below). If you have any improvement suggestions I would appreciate if you can share them. :)

// the composable with navigation drawer and pages
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DrawerExample(
    component: RootComponent,
) {
    val model by component.model.collectAsState()

    // Internal composable state
    val drawerState = rememberDrawerState(
        initialValue = DrawerValue.Closed,
        confirmStateChange = {
            // Update component's state
            component.onDrawerStateChanged(it == DrawerValue.Open)
            return@rememberDrawerState true
        }
    )

    val scope = rememberCoroutineScope()
    scope.launch {
        if (model.isDrawerOpen) drawerState.open()
        else drawerState.close()
    }

    ModalNavigationDrawer(
        drawerState = drawerState,
        // logic for disabling gestures on sub-pages
        gesturesEnabled = component.childStack.items.size == 1,
        drawerContent = { NavigationDrawer(/* optional drawer component */) },
        content = {
            Children(stack = component.childStack) {
                when (val child = it.instance) {
                    /* Load child pages like before */
                }
            }
        }
    )
}

interface RootComponent {
    
    val childStack: ChildStack<*, Child>

    val model: StateFlow<Model>

    fun onDrawerStateChanged(isOpen: Boolean)

    data class Model(
        val isDrawerOpen: Boolean = false,
    )
}

class DefaultRootComponent(
    componentContext: ComponentContext,
) : RootComponent, ComponentContext by componentContext {

    private val navigation = StackNavigation<Configuration>()

    // initialization of store / state
    
    override val model: StateFlow<Model> = /* store's state */

    private val _childStack =
        childStack(
            source = navigation,
            initialConfiguration = Configuration.StartingConfig,
            handleBackButton = true,
            childFactory = ::createChild,
        )

    override val childStack: Value<ChildStack<*, Child>> = _childStack

    override fun onDrawerStateChanged(isOpen: Boolean) {
        // Update store state, e.g. store.accept(Intent.UpdateDrawerState(isOpen)))
        // Call this function for programmatic opening / closing drawer
    }

    private fun createChild(
        config: Configuration,
        componentContext: ComponentContext,
    ): Child = when (config) {
        // the typical child creation logic
    }
    
    // Other functions

    private sealed interface Configuration : Parcelable {
        // The typical configurations here 
    }
}

I started to migrate the Children composable and stack animations from Decompose's extensions library to work with ChildSlot and allow a "drawer-like" behavior, but I messed up the animations and I still have to integrate swipe gestures. It is a bit time-consuming, but if I manage to finish something before someone else does, I will share it (or even create a PR).

[malliaridis]

I guess I found an even cleaner approach:

/**
 * @param drawerContent content inside this drawer
 * @param modifier the [Modifier] to be applied to this drawer
 * @param slot The child slot to use for the navigation drawer.
 * @param onDrawerStateChange Optional callback invoked to confirm or veto a pending drawer state
 * change.
 * @param gesturesEnabled whether or not the drawer can be interacted by gestures
 * @param scrimColor color of the scrim that obscures content when the drawer is open
 * @param content content of the rest of the UI
 */
@Composable
@ExperimentalMaterial3Api
fun <C : Any, T : Any> ChildSlotModalNavigationDrawer(
    drawerContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    slot: Value<ChildSlot<C, T>>,
    onDrawerStateChange: (Boolean) -> Unit,
    gesturesEnabled: Boolean = true,
    scrimColor: Color = DrawerDefaults.scrimColor,
    content: @Composable () -> Unit
) {

    val slotState by slot.subscribeAsState()

    val drawerState = rememberDrawerState(
        initialValue = if (slotState.child != null) DrawerValue.Open else DrawerValue.Closed,
        confirmStateChange = {
            onDrawerStateChange(it == DrawerValue.Open)
            // Always return false, since the state is updated only by the child slot
            false
        },
    )

    val scope = rememberCoroutineScope()
    scope.launch {
        if (slotState.child?.instance != null) drawerState.open()
        else drawerState.close()
    }

    ModalNavigationDrawer(
        drawerState = drawerState,
        modifier = modifier,
        gesturesEnabled = gesturesEnabled,
        drawerContent = drawerContent,
        scrimColor = scrimColor,
        content = content,
    )
}

That way ChildSlot can be implemented as normal, and onDrawerStateChange is the callback function for toggling the drawer open state.

The component implemention would look something like this:

class DefaultRootComponent(
    componentContext: ComponentContext,
) : RootComponent, ComponentContext by componentContext {

    private val drawerNavigation = SlotNavigation<DrawerConfig>()

    private val _drawer =
        childSlot(
            source = drawerNavigation,
            handleBackButton = true,
        ) { config, componentContext ->
            DefaultDrawerComponent(
                componentContext = componentContext,
                onDismissed = drawerNavigation::dismiss,
            )
        }

    override val drawer: Value<ChildSlot<*, DrawerComponent>> = _drawer

    override fun onDrawerStateChange(isOpen: Boolean) {
        if (isOpen) drawerNavigation.activate(DrawerConfig.Default)
        else drawerNavigation.dismiss()
    }

    sealed interface DrawerConfig : Parcelable {

        @Parcelize
        object Default : DrawerConfig
    }
}

This just wraps the workaround from before in a Composable function and looks much cleaner. The DismissibleNavigationDrawer can be implemented in a similar way.

[arkivanov]

If you want to also control the lifecycle of the drawer component, here is another example.

interface RootComponent {
    val drawer: DrawerComponent

    fun onDrawerOpened()
    fun onDrawerClosed()
}

class DefaultRootComponent(componentContext: ComponentContext) : RootComponent, ComponentContext by componentContext {
    private val drawerLifecycle = LifecycleRegistry(initialState = Lifecycle.State.CREATED) // Never destroy this lifecycle!
    override val drawer: DrawerComponent = DefaultDrawerComponent(childContext(key = "drawer", lifecycle = drawerLifecycle))

    override fun onDrawerOpened() {
        drawerLifecycle.resume()
    }

    override fun onDrawerClosed() {
        drawerLifecycle.stop()
    }
}

@Composable
fun RootContent(component: RootComponent) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    DisposableEffect(drawerState.isOpen) {
        if (drawerState.isOpen) {
            component.onDrawerOpened()
        } else {
            component.onDrawerClosed()
        }
        onDispose {}
    }

    ModalNavigationDrawer(
        drawerContent = { DrawerContent(component = component.drawer) },
        modifier = Modifier.fillMaxSize(),
        drawerState = drawerState,
    ) {
        Button(
            onClick = {
                scope.launch {
                    drawerState.open()
                }
            },
        ) {
            Text(text = "Open")
        }
    }
}

[malliaridis]

So not using slot navigation would in this case make more sense, as the solution you provided would contain less logic and a Compose-native way to handling the navigation drawer. I think I start understanding the way DisposableEffect works, but I definitely have to look up the details in the docs.

I haven't tested the last example, but it seems that the navigation drawer state would not be controlled anymore by the components' state, and back navigation handling would complicate things even more (if the user wants to close the drawer for example by the system's back button). I think it would require additional logic with a custom back handler, as described in the Decompose documentation. Have you tested back-navigation in your example @arkivanov yet?

[arkivanov]

Oh, the back button! A simplest solution would be as follows.

Define the following function:

@Composable
fun BackHandler(
    backHandler: BackHandler,
    onBack: () -> Unit,
) {
    val callback = remember { BackCallback(onBack = onBack) }

    DisposableEffect(backHandler, callback) {
        backHandler.register(callback)
        onDispose { backHandler.unregister(callback) }
    }
}

Then add BackHandlerOwner interface to your RootComponent (or whatever component you want).

interface RootComponent : BackHandlerOwner {
    val drawer: DrawerComponent

    fun onDrawerOpened()
    fun onDrawerClosed()
}

class DefaultRootComponent(componentContext: ComponentContext) : RootComponent, ComponentContext by componentContext {
    // BackHandlerOwner interface is already implemented by ComponentContext

    // The rest of the code
}

Now basically handle the back button.

@Composable
fun RootContent(component: RootComponent) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    if (drawerState.isOpen) {
        BackHandler(backHandler = component.backHandler) {
            scope.launch { drawerState.close() }
        }
    }

    // The rest of the code
}

[arkivanov]

If you want to actually control the drawer state from your component, then Generic Navigation to the rescue! You can define your own navigation API specifically for navigation drawer.

Step 1: Define the navigation API in a separate file.

data class ChildDrawer<out T : Any>(
    val instance: T,
    val isOpen: Boolean,
)

fun <T : Any> ComponentContext.childDrawer(
    source: NavigationSource<Boolean>,
    key: String = "drawer",
    childFactory: (ComponentContext) -> T,
): Value<ChildDrawer<T>> =
    children(
        source = source,
        key = key,
        initialState = { DrawerNavState(isOpen = false) },
        saveState = { null },
        restoreState = { null },
        navTransformer = { state, event -> state.copy(isOpen = event) },
        stateMapper = { state, children ->
            ChildDrawer(
                instance = requireNotNull(children.single().instance),
                isOpen = state.isOpen,
            )
        },
        backTransformer = { state ->
            if (state.isOpen) {
                { state.copy(isOpen = false) }
            } else {
                null
            }
        },
        childFactory = { _, componentContext -> childFactory(componentContext) },
    )

private data class DrawerNavState(
    val isOpen: Boolean,
) : NavState<Unit> {
    override val children: List<ChildNavState<Unit>> =
        listOf(
            SimpleChildNavState(
                configuration = Unit,
                status = if (isOpen) ChildNavState.Status.ACTIVE else ChildNavState.Status.INACTIVE,
            ),
        )
}

Step 2: Define the Compose drawer API.

interface NavigationDrawerState<out T> {
    val drawerState: DrawerState
    val instance: T
}

@Composable
fun <T : Any> rememberNavigationDrawerState(
    drawer: Value<ChildDrawer<T>>,
    onStateChanged: (isOpen: Boolean) -> Unit,
): NavigationDrawerState<T> {
    val childDrawer by drawer.subscribeAsState()
    val drawerState = rememberDrawerState(initialValue = if (childDrawer.isOpen) DrawerValue.Open else DrawerValue.Closed)

    DisposableEffect(drawerState.isOpen) {
        onStateChanged(drawerState.isOpen)
        onDispose {}
    }

    LaunchedEffect(childDrawer.isOpen) {
        if (childDrawer.isOpen) {
            drawerState.open()
        } else {
            drawerState.close()
        }
    }

    return object : NavigationDrawerState<T> {
        override val drawerState: DrawerState get() = drawerState
        override val instance: T get() = childDrawer.instance
    }
}

Step 3: Use the navigation API in your component.

interface RootComponent {
    val drawer: Value<ChildDrawer<DrawerComponent>>

    fun setDrawerState(isOpen: Boolean)
}

class DefaultRootComponent(componentContext: ComponentContext) : RootComponent, ComponentContext by componentContext {
    private val drawerNavigation = SimpleNavigation<Boolean>()

    override val drawer: Value<ChildDrawer<DrawerComponent>> =
        childDrawer(
            source = drawerNavigation,
            childFactory = ::DefaultDrawerComponent,
        )

    override fun setDrawerState(isOpen: Boolean) {
        drawerNavigation.navigate(isOpen)
    }
}

Step 4: Use the Compose drawer API.

@Composable
fun RootContent(component: RootComponent) {
    val scope = rememberCoroutineScope()

    val drawerState =
        rememberNavigationDrawerState(
            drawer = component.drawer,
            onStateChanged = component::setDrawerState,
        )

    ModalNavigationDrawer(
        drawerContent = { DrawerContent(component = drawerState.instance) },
        modifier = Modifier.fillMaxSize(),
        drawerState = drawerState.drawerState,
    ) {
        Button(
            onClick = { component.setDrawerState(isOpen = true) },
        ) {
            Text(text = "Open")
        }
    }
}

[malliaridis]

I love how you are prepared for everything. 😄 I have crossed these parts in the documentation multiple times, but haven't thought that it could be that simple, especially the part with the back button. But I should have known, since I have already used it a few times. 😆

Thanks a lot for the code snippets and information.

[arkivanov]

Linked this discussion here: #336 (comment).