First Screen

The catalog composes the pieces: Scaffold supplies the top-bar slot and window insets, Shelf groups the books, BookCard draws each one, and the whole screen is a function of one list.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CatalogScreen(books: List<Book>) {
  val (inStock, soldOut) = books.partition { it.inStock }
  Scaffold(topBar = { TopAppBar(title = { Text("BookNest") }) }) { inner ->
    Column(
      Modifier.padding(inner).verticalScroll(rememberScrollState()).padding(16.dp),
      verticalArrangement = Arrangement.spacedBy(20.dp),
    ) {
      Shelf("In stock", action = { Text("${inStock.size} titles") }) {
        inStock.forEach { BookCard(it) }
      }
      Shelf("Sold out") {
        soldOut.forEach { BookCard(it) }
      }
    }
  }
}

MainActivity parses assets/books.json (Project Anatomy) and calls CatalogScreen(books) inside setContent { MaterialTheme { ... } }; a stage extra (am start ... --es stage interop) selects the interop demo instead. Installed and launched as in Project Anatomy, the stages look like this:

Against React Native's React Native 36,878 catalog, the books and card are the same, but there is no JavaScript bundle, no Hermes 11,328 and no Metro server. The forEach in a scrolling Column composes every card at once, fine for six books and wasteful for six thousand: Lists with LazyColumn swaps in LazyColumn, and State and Recomposition adds state.