CopilotStep Position Not Updating After Scrolling FlatList on Next Step

[grkemtneri]

I'm using Copilot inside a FlatList. When a CopilotStep item is not currently visible (e.g. near the bottom of the list) and I call next() to move to the next step, the FlatList scrolls to bring the step into view — but the CopilotStep does not update its position.

As a result, the tooltip appears at the old location, not aligned with the actual step.

It seems like the position of the CopilotStep is not recalculated after the FlatList has finished scrolling. Is there a way to force Copilot to re-measure the step’s position after the scroll completes?

  useEffect(() => {
    const listener = (step) => {
      setTimeout(() => {
        if (step?.wrapperRef?.current && screenRef.current) {
          step.wrapperRef.current.measure((x, y, width, height, pageX, pageY) => {
            setTimeout(() => {
              if (step.name === COPILOT_STEPS.PromotionMenu) {
                screenRef.current.scrollTo(pageX - 16, true)
              }
            }, 300)
          })
        }
      }, 300)
    }

    copilotEvents.on('stepChange', listener)

    return () => {
      copilotEvents.off('stepChange', listener)
    }
  }, [])

can you help me ? @mohebifar

[ssachtleben]

I'm experiencing the same issue. I’d like to control the scroll manually during the stepChange event. I can’t pass the ScrollView ref into the start function because the tour spans multiple tabs, and the ScrollView hasn't been mounted yet.

@mohebifar would it be possible to make the setTimeout delay at this line configurable via context? I believe just exposing that 0 as a customizable value could solve the issue.