how to alter ScrollView scrollTo scrolling speed?

Question

I've been working with Scrollview which contains a list view containing page indicators as numbers. When I click on them, I want them to scroll so that the selected number is in the center

like

4 5 6 [7] 8 9

7 is selected number here , when I click on 9 here

the scrollview scrolls left so that view comes as

7 8 [9] 10 11

I'm using scrollTo(x : calculated , y : 0 , animated : true) however the scroll is too slow. I want the scroll to be fast or controllable by a parameter, I've tried duration in scrollTo but that doesn't work.

Answer 1

This is currently not possible. A call of scrollTo results in a call of scrollResponderScrollTo, which then calls either the ios implementation or the android implementation. This would be the points where one would have to implement the scroll speed.

Answer 2

This is a pretty neat solution that uses the scrollview's content height to scroll an entire view (on mount). However, the same trick can be used (add a listener to an animated value) to create a scroll function that can be triggered by some event at any given moment (to any given value).

import { useEffect, useRef, useState } from 'react'
import { Animated, Easing, ScrollView } from 'react-native'

const SlowAutoScroller = ({ children }) => {
  const scrollRef = useRef()
  const scrollAnimation = useRef(new Animated.Value(0))
  const [contentHeight, setContentHeight] = useState(0)

  useEffect(() => {
    scrollAnimation.current.addListener((animation) => {
      scrollRef.current &&
        scrollRef.current.scrollTo({
          y: animation.value,
          animated: false,
        })
    })

    if (contentHeight) {
      Animated.timing(scrollAnimation.current, {
        toValue: contentHeight,
        duration: contentHeight * 100,
        useNativeDriver: true,
        easing: Easing.linear,
      }).start()
    }
    return () => scrollAnimation.current.removeAllListeners()
  }, [contentHeight])

  return (
    <Animated.ScrollView
      ref={scrollRef}
      onContentSizeChange={(width, height) => {
        setContentHeight(height)
      }}
      onScrollBeginDrag={() => scrollAnimation.current.stopAnimation()}
    >
      {children}
    </Animated.ScrollView>
  )
}