Open navigation drawer from right to left with ModalDrawer in Jetpack compose

Question

I have been trying to implement navigation drawer in Jetpack compose. The following code shows a simple way to do it:

@Composable
fun ModalDrawerSample() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalDrawer(
        drawerState = drawerState,
        drawerContent = {
            Column {
                Text("Text in Drawer")
                Button(onClick = {
                    scope.launch {
                        drawerState.close()
                    }
                }) {
                    Text("Close Drawer")
                }
            }
        },
        content = {
            Column {
                Text("Text in Bodycontext")
                Button(onClick = {

                    scope.launch {
                        drawerState.open()
                    }

                }) {
                    Text("Click to open")
                }
            }
        }
    )
}

But how do I make navigation drawer open from right to left?

Spadework

Answer 1

You can use LocalLayoutDirection providing a LayoutDirection.Rtl value.

Something like:

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl ) {
    ModalDrawer(
        drawerState = drawerState,
        drawerContent = { /* ...*/ },
        content = { /* ..*/ }
    )
}

Beefsteak

doing that caused my layout to get inverted right to left, too. – Spadework

Solved it by additionally using "CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr)" inside content parameter. – Spadework

How to implement two drawer from left and right – Bloodstream

@Gabriele Mariotti Thanks a lot. You saved my day :) Is there may a more idiomatic way of doing this in 2022? – Symploce

Based on this reply, I made a crude copy of the Scaffold function specifically to allow the drawer to come in from the right (assumes default LTR layout with a requirement to have the drawer come in from the right) --> gist.github.com/doc2dev/a308d580984df6529132388e153762de – Pomiculture

I combined Gabriele and Sparsh's posts and found that I needed to wrap the drawerContent with a Column first, since the Rtl was applied to the Column that is used under the hood. I created a gist with what I have so far, including a screenshot: gist.github.com/free2bcreative/7c9befbeaf0b6155b3b83d43af968b01 – Naresh

This is rather a hack than an actual solution. – Knopp