javascript - Custom pagination with ScrollView in React Native

Question

In my app i'm using ScrollView for showing images. Below my ScrollViewcomponent i have two buttons like prev and next. I want to add custom pagination with the buttons. Also my images are coming from an array in a loop. I want 4 images to show at a time. So, the next button should show next 4 images if there are any and prev button should take 4 previous images if there are any. My ScrollView is currently like this:

    <View>
      <View style={{width:width,paddingHorizontal:10,paddingVertical:20}}>
        <ScrollView 
          horizontal={true}
          showsHorizontalScrollIndicator={false} >
 {list.map((item, i)=>( 
    <Image key={i} source={{uri: item}} 
           style={{width: 80, height: 80,marginLeft:5}} />
    )
 )}

      </ScrollView>
    </View>
  </View>

Answer 1

you can use onNextPress function and add ref in scrolview

   const scrollRef = useRef<ScrollView>();
        
            const onNextPress = () => {
                scrollRef.current?.scrollTo({
                    y : 0,//you must  increase x or y 
                    animated : true
                });
            }
        
            return (
               <View style={{width:width,paddingHorizontal:10,paddingVertical:20}}>
                <ScrollView 
                  ref={scrollRef}//ref
                  horizontal={true}
                  showsHorizontalScrollIndicator={false} >
         {list.map((item, i)=>( 
            <Image key={i} source={{uri: item}} 
                   style={{width: 80, height: 80,marginLeft:5}} />
            )
         )}
        
              </ScrollView>
            </View>
            );