I have a ScrollView like this:

const CustomComp=React.memo(({props...})=>{
 return(<ScrollView horizontal={true}>
   {content...}
 </ScrollView>);
});

and when I scroll to the right and then re render, the x position of the Scroll stays the same

how do I get it to go back to x=0 every time it re renders?

CodePudding user response：

You can use useEffect hook and ScrollView's scrollTo method.

Here is a snack to test it: https://snack.expo.dev/@truetiem/scroll-to-top-when-re-rendered

First create a ref for scroll view.

const scrollRef = useRef();

<ScrollView ref={scrollRef} horizontal>

And scroll to top when useEffect triggered.

useEffect(() => {
  scrollRef.current?.scrollTo({ x: 0, y: 0, animated: true });
});