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

scrollPosition is made for these components. On other components it has no effect.

Sources

The original Expo docs for this page:

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