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

disable highlight on carousel card when tapping to scroll? #824

Open RMCollins175 opened 3 years ago

RMCollins175 commented 3 years ago

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

Question:

How can you disable the highlighting effect when tapping to scroll?

Take the default carousel layout <Carousel layout={'default'} /> demonstrated here: https://github.com/meliorence/react-native-snap-carousel#layouts-and-custom-interpolations

As the user scrolls left and right, tapping each carousel item to scroll reduces opacity to create a highlight press effect. How can I disable this? The idea is not to confuse the user with scrolling vs selecting an item (and onto another screen)

Hope that was clear enough. Thanks for reading.

ringcoa commented 3 years ago

<Carousel inactiveSlideOpacity={1} inactiveSlideScale={1}

RMCollins175 commented 3 years ago

@ringcoa unfortunately it doesn't make any difference.

univers3 commented 3 years ago

@ringcoa unfortunately it doesn't make any difference.

It's late for sure, but maybe someone will be in need.

This behaviour is caused not by the carousel itself, but by the item we are rendering inside of it. Most of the time we are rendering a touchableOpacity component for each item and this will capture the touch too. Adding delayPressIn={ 50 } as a prop of the touchableOpacity should fix this problem.

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