Auto-scroll

When a step’s target lives inside a ScrollView and may be scrolled off-screen, tell Guideway about the scroll container. It will scroll the target into view, wait for the scroll to settle, then measure and spotlight it.

Pass the scroll container

Give useTourTarget the scroll container’s ref via the scrollRef option. The ref it returns still goes on the target view.

import { useRef } from 'react';
import { ScrollView, View, Text } from 'react-native';
import { useTourTarget } from 'guideway';

function SettingsScreen() {
  const scrollRef = useRef<ScrollView>(null);
  const dangerZone = useTourTarget('danger-zone', { scrollRef });

  return (
    <ScrollView ref={scrollRef}>
      {/* lots of content above the fold */}
      <View ref={dangerZone}>
        <Text>Delete account</Text>
      </View>
    </ScrollView>
  );
}

When the danger-zone step starts, Guideway scrolls the container, lets it settle, then highlights the view - in either direction, whether the target is below or above the current position.

One scrollRef per in-scroll target

Each target inside a scroll view needs its own scrollRef. This is what lets Back scroll to an earlier target too, not just forward. Targets that are always on screen do not need a scrollRef.

For virtualized lists where the target row may not be rendered yet, see FlatList and lists.