How to scroll to image[x] in ScrollView
at the first time component load?
I want when we open this screen, ScrollView
will scroll to the 4th image.
This is my demo
export default function App() {
const scrollX = useRef(new Animated.Value(0));
const imageRef = createRef(scrollX);
useEffect(() => {
imageRef.current?.scrollTo(new Animated.Value(3));
}, []);
return (
<SafeAreaView style={styles.container}>
<View style={styles.scrollContainer}>
<ScrollView
ref={imageRef}
horizontal={true}
pagingEnabled
showsHorizontalScrollIndicator={false}
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: {
x: scrollX.current,
},
},
},
],
{ useNativeDriver: false }
)}
scrollEventThrottle={1}
>
{children}
</ScrollView>
</View>
</SafeAreaView>
);
}
scrollTo accept separate compoenents. You don't need to use animated component and the onScroll method for react scrollview. Just enter {x: value, animated: true} in scrollTo as it accepts object
Here is the code updated from snack: