scrollPosition

scrollPosition(state, options)

Binds the leading scroll target of a scrollable container to an observable native state.

Reading state.value returns the id of the leading scroll target. Writing to it scrolls the container to the matching view. Pair with scrollTargetLayout() on the content container and id() on each target. Works on ScrollView, LazyVStack, LazyHStack, and other scrollable containers.

On iOS below 17.0, the modifier is a no-op.

Returns: ModifierConfig

See: Official SwiftUI documentation.

Example

const activeID = useNativeState<string | null>(null);

<ScrollView
  modifiers={[
    scrollPosition(activeID, {
      anchor: 'center',
      onChange: (newID) => console.log('leading target:', newID),
    }),
  ]}>
  <VStack modifiers={[scrollTargetLayout()]}>
    {items.map((item) => (
      <Text key={item.id} modifiers={[id(item.id)]}>{item.text}</Text>
    ))}
  </VStack>
</ScrollView>

Works with

Sources

The original Expo docs for this page:

• scrollPosition (Modifiers) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/modifiers.md)