jetc.dev Newsletter Issue #192

Published: 2023-11-28

This week, we peek at the latest Compose Multiplatform release and wonder why Column() seems to behave oddly. We look closely at a molecule, explore the Modifier.Node docs and discussion around those docs, and work with bottom nav bars. Plus, we see libraries for reordering list contents and another KSP-based Navigation for Compose wrapper.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

JetBrains released Compose Multiplatform 1.5.11, with support for Kotlin 1.9.21 and 2.0.0-Beta 1, along with a few iOS and desktop bug fixes.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Is `Column()` So Weird?

Technically, this question is about parent composables being recomposed, apparently unnecessarily. In reality, it’s another case where a developer got caught by Column() (and Row()) being inline functions, which breaks our assumptions regarding recomposition rules. Google’s Chuck Jazdzewski explains more in this week’s highlighted Stack Overflow question.

Where Are These Big Numbers From?

An error message like MutableState containing (2131755159, 17039370) cannot be saved using the current SaveableStateRegistry makes things difficult to debug. Kirill Grouchnikov recommended converting those values to hexadecimal and seeing if there was a matching resource ID… which eventually uncovered the problem, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Video: Exploring Molecule and Beyond with Jake Wharton

CashApp’s Jake Wharton joined the Code with the Italians team to discuss Molecule, a library for generating flows from composables.

Exploring the Modifier.Node Documentation

Google recently published updated documentation on creating custom modifiers using Modifier.Node. Saket Narayan has been updating Telephoto and had questions and concerns about the instructions. That led to substantial Mastodon thread, to go along with a noteworthy Kotlinlang #compose Slack thread on the documentation and its recommendations.

Vyom Singh walks us through the step to use Navigation for Compose with a bottom navigation bar, from setting up the project to defining the navigation graph and tying that to navigation bar items.

Android Jetpack Compose - Saving BottomBar Tabs

Continuing on the subject of bottom navigation and Navigation for Compose, by default Navigation will “reset” each bottom nav item. If the user does work in some tab, switches to another tab, then returns to the first tab, their work is lost. Patryk Połeć explores how to work around this limitation for those tabs that need to be more stateful.

Madona Wambua delivered a presentation for DevFest NYC 2023 covering Navigation for Compose, from the basics through passing arguments and creating navigation graphs.

Medium: Compose previews in Android views

Myroslav Kolodii demonstrates using @Preview and AndroidView() to show previews of custom views. This is an interesting trick, letting you preview custom views without porting them over to Compose UI itself.

Medium: Implement a Lottie Animation in the Android App with Jetpack Compose

The Coding Montana walks us through every step to apply a Lottie animation in a Compose UI app, from app creation and adding the lottie-compose dependency through loading a Lottie file and rendering it using the LottieAnimation() composable.

Resource Roundup

100% pure code!

GitHub: Calvin-LL / Reorderable

Calvin Liang brings us drag-and-drop support for children of Column(), Row(), LazyColumn(), and LazyRow().

GitHub: brianwernick / Annores

Brian Wernick created an annotatedStringResource() top-level function that returns an AnnotatedString from an HTML-formatted string resource.

GitHub: FunkyMuse / foSho

FunkyMuse created another KSP-based wrapper for Navigation for Compose, inspired in part by compose-destinations. It offers type-safe navigation arguments, nested navigation support, screen transitions, and more. See this blog post to learn more about the library and the reasons for creating it!