CODEWITHSUNDEEP
javascriptreactjsreact-nativeexpo
AnatuGreen
AnatuGreen

Reputation: 895

How To Make An Image Carousel that Supports Tap Gestures in React Native?

enter image description here

I am wondering if there is a React-Native module or way to create the kind of photos and videos carousel seen in Tinder dating app. It recognizes tapping on the left or right sides of the images to go to the previous or next images/videos respectively.

The closest I have seen is this module: https://openbase.com/js/react-native-slideshow.

PS: In the image I have attached here, I circled the pagination indicators with red as it is on Tinder also. I am developing using Expo.

Upvotes: 1

Views: 839

Answers (1)

Ushan Fernando
Ushan Fernando

Reputation: 782

You can use the following package to achieve this result.

https://www.npmjs.com/package/react-native-stories-view

To programatically enable or disable the progress you can pass boolean value to enableProgress & to change the position of progress you can use progressIndex prop along with duration prop to control the motion.

<StoryContainer
   visible={true}
   enableProgress={true}
   images={images}
   duration={20}  
   onComplete={() => alert("onComplete")}
   containerStyle={{
       width: '100%',
       height: '100%',
   }}/>

Upvotes: 1

Related Questions