How can I mix LazyVerticalGrid with a LazyColumn v...

# compose

[Alexander Black]

How can I mix LazyVerticalGrid with a LazyColumn view? I’m trying to have image Carousels and then a grid view below, but I get this error message if I try to mix the two:

java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like LazyColumn and Column(Modifier.verticalScroll()) is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items().

here’s my code so far:

Column {
        SearchViewSearchBarInactive({})
        LazyColumn {
            item { Carousel(books, "New York Times Best Sellers") } // this is a lazy row with images in it
            item { Carousel(books, "Award Winning") }
            item { Carousel(books, "Note Worthy Performances") }
            item { Carousel(books, "Trending") }
            item {
                Text("Categories",
                    style = MaterialTheme.typography.h3,
                    modifier = Modifier.padding(start = 8.dp, top = 32.dp, bottom = 10.dp),
                    color = MyAppTheme.colors.textPrimary)
            }
            item { CategoryView() } // this is my grid view
        }
    }

[Luis]

I think the issue might be your CategoryView vertical scroll being in the same direction has the LazyColumn

[Luis]

Try to implement the CategoryView using the LazyColumn items() method, instead of being its own composable

[Alexander Black]

Thanks @Luis I’ll give it a shot. 🙂