Android Studio – Jetpack Compose Preview Render Problem when casting LocalContext.current

As I understand

Let’s imagine that your screen is divided into 2 sections, which have 2 subsections, and so on.

First you do this

@Composable
fun MainScreen(viewModel: ...){
    Row {
       LeftSection(viewModel)
       RightSection(viewModel)
    }
}

@Composable
fun LeftSection(viewModel: ...){
    Row {
       LeftSubSection1(viewModel)
       LeftSubSection2(viewModel)
    }
}

RightSection looks similar

But it’s impossible to render preview. So you can do like this (Pass simple stable types as parameters "top-down") if you want render whole screen

@Composable
fun MainScreen(viewModel: ...){
    MainContent(viewModel.prop1, viewmodel.prop2, viewmodel.prop3, viewmodel.someAction, viewmodel.someSubSectionAction, viewmodel.someSubSectionAction2)
}

fun MainContent(prop1: Int, prop2: Int, prop3: Int, onSomeAction: ()-> Unit, onSomeSubsectionAction: ()->Unit, onSomeSubsectionAction2: ()->Unit ){
    Row {
       LeftSection(prop1, prop2, someAction, someSubSectionAction...)
       RightSection(prop2, prop3, someAction, someSubSectionAction2...)
    }
}

@Composable
fun LeftSection(prop1: Int, prop2: Int, onSomeAction: ()-> Unit, onSomeSubsectionAction: ()->Unit ){
    Row {
       LeftSubSection1(prop1, onSomeSubsectionAction, ...)
       LeftSubSection2(prop2, onSomeSubsectionAction, ...)
    }
}

RightSection looks similar

And get a nightmare due to the need to pass a huge number of parameters, some of which are not needed by this composable, but are needed by the nested

So you can pass as parameters everything that can be created in the preview (not only primitive types), but organize it like this

@Composable
fun MainScreen(viewModel: ...) {
    MainContent(
        leftContent = {
            LeftSection(
                prop = viewModel.prop1,
                onSomeAction = { (viewModel.onSomeAction()) },
                subSection1 = { 
                    LeftSubSection1(viewModel.prop2) 
                },
                subSection2 = { 
                    LeftSubSection1(onSomeSubsectionAction = { viewModel.onSomeSubsectionAction() }) 
                }
            )
        },
        rightContent = {
            RightSection(
                prop = viewModel.prop2,
                onSomeAction = { (viewModel.onSomeAction2()) },
                subSection1 = { 
                    RightSubSection1(viewModel.prop2) 
                },
                subSection2 = { 
                    RightSubSection1(onSomeSubsectionAction = { viewModel.onSomeSubsectionAction2() }))
                }
        })
}

@Composable
private fun MainContent(
    leftContent: @Composable () -> Unit,
    rightContent: @Composable () -> Unit,
) {
    Row {
        leftContent()
        rightContent()
    }
}

@Composable
fun LeftSection(
    prop: Int,
    onSomeAction: () -> Unit,
    subSection1: @Composable () -> Unit,
    subSection2: @Composable () -> Unit
) {
    // use prop and onSomeAction
    Row {
        subSection1()
        subSection2()
    }    
}

RightSection looks similar

As you can see, viewmodel is located only in statefull MainScreen, and you can render MainContent and other composable segments