11

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)
}
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
david CHOLLEZ
  • 127
  • 1
  • 6

3 Answers3

26

You don't have to make it nullable and pass null to it. You just need to pass this: rememberNavController()

@Preview
@Composable
fun Preview() {
    HomeView(rememberNavController())
}
Community
  • 1
  • 1
Alireza Nezami
  • 515
  • 4
  • 12
4

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)
        },
    )
}
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
  • Thanks for your help. My problem is to display a preview of a screen which take as parameter a NavController. Because my screen is in another file, I don't know how to deal with it. But your answer help me to understand the purpose of PreviewParameter. best regard – david CHOLLEZ Nov 29 '21 at 07:54
0

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)
}
david CHOLLEZ
  • 127
  • 1
  • 6