Skip to content

poc(expo-ui): drive native toolbar from LazyColumn - #31

Draft
AmatoGiulio wants to merge 14 commits into
mainfrom
poc/expo-ui-lazycolumn-interop
Draft

poc(expo-ui): drive native toolbar from LazyColumn#31
AmatoGiulio wants to merge 14 commits into
mainfrom
poc/expo-ui-lazycolumn-interop

Conversation

@AmatoGiulio

Copy link
Copy Markdown
Owner

Explores Expo UI LazyColumn as a real Compose-owned scroll source for react-native-scroll-interop.

POC scope:

  • keep Expo UI LazyColumn as the scroll owner
  • bridge Compose nested scroll into the Android View nested-scroll chain with rememberNestedScrollInteropConnection()
  • accept the hosting ComposeView as a generic nested-scroll transaction source without adding a compile-time Compose dependency to the core
  • drive the existing Material 3 FloatingToolbar from that transaction
  • intentionally leave TopAppBar scroll-away geometry out of scope for this first proof, because its current adapter uses RN-specific scroll-away padding

The example carries a temporary SDK 57 patch script that registers a nestedScrollInterop Expo UI modifier. The intended upstream Expo API is a generic modifier, independent of this library.

Local validation target:

  1. install examples/expo dependencies (refreshes its lockfile with direct @expo/ui@57.0.12)
  2. prebuild/run Android so the temporary Expo UI Kotlin patch is compiled
  3. open Expo UI LazyColumn POC
  4. verify touch scroll and fling both hide/restore the native FloatingToolbar without moving the source outside Compose

This is deliberately a draft POC and should not merge as-is; the node_modules patch is evidence for the upstream Expo change, not a shipping integration.

Copy link
Copy Markdown
Owner Author

Upstream Expo UI proposal

The POC needs only a generic Expo UI modifier; no react-native-scroll-interop knowledge belongs upstream.

Android

In packages/expo-ui/android/src/main/java/expo/modules/ui/ModifierRegistry.kt:

import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.rememberNestedScrollInteropConnection

and in registerBuiltInModifiers():

register("nestedScrollInterop") { _, _, _, _ ->
  Modifier.nestedScroll(rememberNestedScrollInteropConnection())
}

JS API

In packages/expo-ui/src/jetpack-compose/modifiers/index.ts:

/**
 * Connects a Compose nested-scroll chain to a cooperating Android View
 * `NestedScrollingParent3` ancestor.
 *
 * This wraps Compose's `rememberNestedScrollInteropConnection()` and is useful
 * when an Expo UI scrollable is hosted inside an Android View hierarchy that
 * participates in AndroidX nested scrolling.
 */
export const nestedScrollInterop = () => createModifier('nestedScrollInterop');

Usage:

<LazyColumn modifiers={[fillMaxSize(), nestedScrollInterop()]}>
  {...}
</LazyColumn>

This is intentionally a generic Compose/View interop primitive. The local POC's node_modules patch mirrors this proposed upstream implementation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant