search

meliorence / react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
BSD 3-Clause "New" or "Revised" License
10.36k stars 2.29k forks source link

How to make the carousel items touchable ? #462

Open zabojad opened 5 years ago

zabojad commented 5 years ago

Is this a bug report, a feature request, or a question?

Question

Question details

I'd like to make the items clickable/touchable so that when touching one of them, the carousel snaps to that item.

I've tried to put a TouchableOpacity in each of my items. It works on Android but not on iOS. On iOS, the touchable "zones" are not located on their corresponding items.

I've also tried to make the entire carousel touchable but that prevents swiping within the carousel...

Note that in my case, I have a horizontal carousel with very few items, in loop mode and displaying alsways 3 items at once with the one in the middle being the active item.

maxto024 commented 5 years ago

You can wrap the Carousel item TouchableOpacity and add snapToitem function onPress 

  <TouchableOpacity 
           onPress={ () => { 
                this._carousel.snapToItem(index+1, true);
              }}
      >
       // Carousel Item 
      </TouchableOpacity>

don't forget ref 

       <Carousel

          ref={ (c) => { this._carousel = c; } }
          ....    
        />
zabojad commented 5 years ago

@maxto024 That do not work on iOS. That does work on Android only...

maxto024 commented 5 years ago

@zabojad I tried on Ios and its working

check out this Example

dohooo commented 3 years ago

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2