Nested Scroll with Jetpack Compose
Article Summary
Syntia from Blibli.com tackles one of Jetpack Compose's most frustrating gotchas: the dreaded nested scroll crash. If you've ever hit that 'infinity maximum height constraints' error, this one's for you.
Nested scrolling in Jetpack Compose isn't as straightforward as it was in XML views. Syntia breaks down why wrapping LazyColumn inside Column causes IllegalStateException errors and demonstrates the proper architecture pattern using a real-world Instagram-style feed example.
Key Takeaways
- LazyColumn inside Column triggers infinity height constraint errors
- Solution: wrap all composables directly in parent LazyColumn (like ConcatAdapter)
- Horizontal LazyRow works seamlessly within vertical LazyColumn structure
- Pattern enables Instagram-style feeds with story rows and post lists
Skip the nested scroll container trap by composing everything directly inside a single parent LazyColumn instead of wrapping lazy composables in regular Column/Row.
About This Article
When you nest a LazyColumn inside a Column with verticalScroll, Compose throws an IllegalStateException. This happens because Compose won't let scrollable components be measured with infinity as the maximum height constraint. It's the same issue you'd run into with RecyclerView inside NestedScrollView in XML layouts.
Syntia suggests using the ConcatAdapter pattern instead. Put all your items directly in a single LazyColumn using the item() API. This removes the nested scroll container hierarchy that causes the constraint violations.
With this approach, you can scroll smoothly in multiple directions for complex feeds like Instagram. You can nest a horizontal LazyRow for stories inside a vertical LazyColumn for posts without performance problems or crashes.
