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>

Below this i have two buttons.I have created two different fuctions for those. Here's what it's like now:

  <View>
    <Button
      title="Prev"
      color="#841584"
      onPress={handleClickBackward}
    />
</View>
<View>
  <Button
    title="Next"
    color="#841584"
    onPress={handleClickForward}
  />
</View>

How can i manipulate with my list array so that the custom pagination works. I have tried array slice method on next but it removes the first images and i don't find those after pressing prev button.

MahmutCan · Accepted Answer · 2020-12-31 14:45:46Z

2

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>
            );

answered Dec 31, 2020 at 14:45

MahmutCan

312 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tanmoy Sarker Over a year ago

const scrollRef = useRef<ScrollView>(); This is throwing unexpected token for some reason @MahmutCan

MahmutCan Over a year ago

If you dont use react use. Can you try to ref with constructor(props) { super(props); this.myRef = React.createRef(); }

Tanmoy Sarker Over a year ago

I am using functional component. What can i do in functional component? @MahmutCan

Collectives™ on Stack Overflow

Custom pagination with ScrollView in React Native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related