CODEWITHSUNDEEP
javascriptreact-native
Tanmoy Sarker
Tanmoy Sarker

Reputation: 45

Custom pagination with ScrollView in React Native

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.

Upvotes: 3

Views: 701

Answers (1)

MahmutCan
MahmutCan

Reputation: 31

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

Upvotes: 2

Related Questions