[pull] main from expo:main

apps/native-component-list/src/screens/UI/ScrollViewSharedPositionScreen.ios.tsx

@@ -0,0 +1,46 @@
+import { Button, Host, ScrollView, Text, VStack, useNativeState } from '@expo/ui/swift-ui';
+import { id, padding, scrollPosition, scrollTargetLayout } from '@expo/ui/swift-ui/modifiers';
+import { scheduleOnUI } from 'react-native-worklets';
+
+export default function ScrollViewSharedPositionScreen() {
+  const activeID = useNativeState<string | null>(null);
+
+  const scrollToID = (target: string) => {
+    scheduleOnUI(() => {
+      'worklet';
+      activeID.value = target;
+    });
+  };
+
+  return (
+    <Host style={{ flex: 1 }}>
+      <VStack spacing={12}>
+        <ScrollView
+          modifiers={[
+            scrollPosition(activeID, {
+              onChange: (newID) => {
+                console.log('[JS thread] leading target:', newID);
+              },
+            }),
+          ]}>
+          <VStack modifiers={[scrollTargetLayout()]}>
+            {Array.from({ length: 40 }, (_, i) => (
+              <Text
+                key={`item-${i}`}
+                modifiers={[id(`item-${i}`), padding({ horizontal: 16, vertical: 12 })]}>
+                {`Item ${i}`}
+              </Text>
+            ))}
+          </VStack>
+        </ScrollView>
+        <Button label="Scroll to first item" onPress={() => scrollToID('item-0')} />
+        <Button label="Scroll to item 20" onPress={() => scrollToID('item-20')} />
+        <Button label="Scroll to last item" onPress={() => scrollToID('item-39')} />
+      </VStack>
+    </Host>
+  );
+}
+
+ScrollViewSharedPositionScreen.navigationOptions = {
+  title: 'ScrollView shared position',
+};

apps/native-component-list/src/screens/UI/UIScreen.ios.tsx

@@ -258,6 +258,14 @@ export const UIScreens = [
       return optionalRequire(() => require('./ScrollViewScreen'));
     },
   },
+  {
+    name: 'ScrollView shared position',
+    route: 'ui/scrollview-shared-position',
+    options: {},
+    getComponent() {
+      return optionalRequire(() => require('./ScrollViewSharedPositionScreen'));
+    },
+  },
   {
     name: 'Shapes',
     route: 'ui/shapes',

docs/pages/versions/unversioned/sdk/ui/swift-ui/scrollview.mdx

@@ -94,6 +94,60 @@ export default function ScrollViewHiddenIndicatorsExample() {
 }
 ```
 
+### Shared scroll position
+
+> **info** Requires iOS 17 or later. On older versions, the modifier is a no-op.
+
+Track the leading scroll target id from JavaScript and scroll to a target by writing to the state. Mark each scroll target with the `id` modifier, wrap the content container in `scrollTargetLayout`, and apply the `scrollPosition` modifier to the `ScrollView`. The optional `onChange` callback fires on the JS thread when the leading target changes.
+
+The `scrollPosition` modifier also works on other scrollable containers like `LazyVStack` and `LazyHStack`.
+
+> **warning** Writes to `state.value` must run on the UI runtime. Wrap the write in `scheduleOnUI` from `react-native-worklets`, or call them from inside a `'worklet'` function. Writes from the JS runtime trip Main Thread Checker, Xcode's runtime tool that flags UIKit calls made from a background thread.
+
+```tsx ScrollViewSharedPositionExample.tsx
+import { Button, Host, ScrollView, Text, VStack, useNativeState } from '@expo/ui/swift-ui';
+import { id, padding, scrollPosition, scrollTargetLayout } from '@expo/ui/swift-ui/modifiers';
+import { scheduleOnUI } from 'react-native-worklets';
+
+export default function ScrollViewSharedPositionExample() {
+  const activeID = useNativeState<string | null>(null);
+
+  return (
+    <Host style={{ flex: 1 }}>
+      <VStack spacing={12}>
+        <ScrollView
+          modifiers={[
+            scrollPosition(activeID, {
+              onChange: newID => {
+                console.log('[JS thread] leading target:', newID);
+              },
+            }),
+          ]}>
+          <VStack modifiers={[scrollTargetLayout()]}>
+            {Array.from({ length: 30 }, (_, i) => (
+              <Text
+                key={`item-${i}`}
+                modifiers={[id(`item-${i}`), padding({ horizontal: 16, vertical: 12 })]}>
+                {`Item ${i}`}
+              </Text>
+            ))}
+          </VStack>
+        </ScrollView>
+        <Button
+          label="Scroll to item 10 from worklet"
+          onPress={() => {
+            scheduleOnUI(() => {
+              'worklet';
+              activeID.value = 'item-10';
+            });
+          }}
+        />
+      </VStack>
+    </Host>
+  );
+}
+```
+
 ## API
 
 ```tsx

packages/expo-ui/CHANGELOG.md

@@ -53,6 +53,7 @@
 - [iOS] Add `ObservableState` shared object and `useNativeState` hook for controlling native SwiftUI state from JS. ([#44214](https://github.com/expo/expo/pull/44214) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Add shared object worklet support with `.value` property API for `ObservableState`. ([#44215](https://github.com/expo/expo/pull/44215) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Add `WorkletCallback` shared object for synchronous UI thread callbacks. ([#44216](https://github.com/expo/expo/pull/44216) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Added `scrollPosition` and `id` modifiers for tracking and scrolling to view-aligned targets in `ScrollView` and other scrollable containers (iOS 17+). ([#44652](https://github.com/expo/expo/pull/44652) by [@ramonclaudio](https://github.com/ramonclaudio))
 - [android] Added `TooltipBox`, `PlainTooltip`, and `RichTooltip` components matching native Compose Tooltip API. Supports plain and rich tooltips with slot-based content, programmatic show/dismiss via ref, and `isPersistent`, `hasAction`, `enableUserInput`, `focusable` props. ([#44373](https://github.com/expo/expo/pull/44373) by [@nishan](https://github.com/intergalacticspacehighway))
 - [android] Added `Badge` and `BadgedBox` components wrapping Jetpack Compose's Badge API for status indicators and count overlays. ([#44139](https://github.com/expo/expo/pull/44139) by [@benjaminkomen](https://github.com/benjaminkomen))
 - [android] Added `shape`, `border`, `selected`, `checked`, `onClick`, and `onCheckedChange` props to `Surface`, supporting clickable, selectable, and toggleable variants. ([#44079](https://github.com/expo/expo/pull/44079) by [@nishan](https://github.com/intergalacticspacehighway))

packages/expo-ui/ios/Modifiers/IDModifier.swift

@@ -0,0 +1,12 @@
+// Copyright 2026-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+import SwiftUI
+
+internal struct IDModifier: ViewModifier, Record {
+  @Field var id: String = ""
+
+  func body(content: Content) -> some View {
+    content.id(id)
+  }
+}

packages/expo-ui/ios/Modifiers/ScrollPositionModifier.swift

@@ -0,0 +1,52 @@
+// Copyright 2026-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+import SwiftUI
+
+internal struct ScrollPositionModifier: ViewModifier, Record {
+  @Field var id: ObservableState?
+  @Field var anchor: UnitPointOptions?
+  var eventDispatcher: EventDispatcher?
+
+  init() {}
+
+  init(from params: Dict, appContext: AppContext, eventDispatcher: EventDispatcher) throws {
+    try self = .init(from: params, appContext: appContext)
+    self.eventDispatcher = eventDispatcher
+  }
+
+  func body(content: Content) -> some View {
+    if #available(iOS 17.0, tvOS 17.0, macOS 14.0, *), let id {
+      ScrollPositionWrapper(
+        state: id,
+        anchor: anchor,
+        eventDispatcher: eventDispatcher
+      ) {
+        content
+      }
+    } else {
+      content
+    }
+  }
+}
+
+@available(iOS 17.0, tvOS 17.0, macOS 14.0, *)
+private struct ScrollPositionWrapper<C: View>: View {
+  @ObservedObject var state: ObservableState
+  let anchor: UnitPointOptions?
+  let eventDispatcher: EventDispatcher?
+  @ViewBuilder let content: () -> C
+
+  var body: some View {
+    let activeID = Binding<String?>(
+      get: { state.value as? String },
+      set: { state.value = $0 }
+    )
+    content()
+      .scrollPosition(id: activeID, anchor: anchor?.toUnitPoint)
+      .onChange(of: state.value as? String) { _, newValue in
+        let id: Any = newValue ?? NSNull()
+        eventDispatcher?(["scrollPosition": ["id": id]])
+      }
+  }
+}