Home > Mobile >  Preview a "screen" in android jetpack compose navigation with a PreviewParameter NavContro
Preview a "screen" in android jetpack compose navigation with a PreviewParameter NavContro

Time:11-29

I discovering android Cetpack Compose (and Navigation) and try to display a preview of a view with a navController as parameter.

To achieve, I use the PreviewParameter and I have no error, but nothing displayed in the Preview window.

Anyone know how pass a fake NavController instance to a Composable?

class FakeNavController : PreviewParameterProvider<NavController> {
    override val values: Sequence<NavController>
        get() {}
}

@Preview
@Composable
fun Preview(
    @PreviewParameter(FakeNavController::class) fakeNavController: NavController
) {
    HomeView(fakeNavController)
}

CodePudding user response:

PreviewParameter is used to create multiple previews of the same view with different data. You're expected to return the needed values from values. In your example you return nothing that's why it doesn't work(it doesn't even build in my case).

That won't help you to mock the navigation controller, as you still need to create it somehow to return from values. I think it's impossible.

Instead you can pass a handler, in this case you don't need to mock it:

@Composable
fun HomeView(openOtherScreen: () -> Unit) {
    
}
// your Navigation view
composable(Destinations.Home) { from ->
    HomeView(
        openOtherScreen = {
            navController.navigate(Destinations.Other)
        },
    )
}

CodePudding user response:

Finally, I declare a nullable NavController and it works.

@Composable
fun HomeView(navController: NavController?) {
    Surface {
        Column(
            modifier = Modifier
                .padding(all = 4.dp)
        ) {
            Text(
                text = "Home View",
                style = MaterialTheme.typography.body2
            )

            Spacer(modifier = Modifier.height(8.dp))

            Button(onClick = { navController?.navigate("lineRoute") }) {
                Text(text = "nav to Line view")
            }
        }
    }
}


@Preview
@Composable
fun Preview (){
    HomeView(null)
}
  • Related