dohooo / react-native-reanimated-carousel

🎠 React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)
https://react-native-reanimated-carousel.vercel.app
MIT License
2.86k stars 329 forks source link

How to disable press child Item on scrolling in Ios #567

Open minkgkyaw9899 opened 8 months ago

minkgkyaw9899 commented 8 months ago

In carousel render item, each item can pressable but on scrolling item it should not be press item and on android don't press on scrolling meaning work correctly but in ios press the item in scrolling and how to disable pressing item in scrolling

here is my code


<Carousel
                autoPlay={false}
                loop={false}
                width={DEVICE_WIDTH * 0.85}
                style={{
                  width: '100%',
                }}
                height={160}
                data={accounts}
                scrollAnimationDuration={300}
                vertical={false}
                renderItem={({item}) => {
                  return (
                    <AccountCard
                      {...item}
                      onPress={() => {
                        console.log('press')
                       // on ios it log 'press' on scrolling 
                      // other code ....
                      }}
                    />
                  )
                }}
                onSnapToItem={index => {
                  setCurrentIndex(index)
                }}
              />
```jsx
<!---
Any problem that does not include an accurate reproduction step is likely to be closed 
-->
**Describe the bug**
A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!

**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

**Expected behavior**
A clear and concise description of what you expected to happen.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Versions (please complete the following information):**
 - react: v^18.2.0
 - react-native: v^0.72.4
 - react-native-reanimated: v^3.3.0
 - react-native-reanimated-carousel: ^3.5.1
 - react-native-gesture-handler: ^2.12.0

**Smartphone (please complete the following information):**
 - Device: all Iphone
 - OS: 
 - Browser [e.g. stock browser, safari]
 - Version [e.g. 22]

**Additional context**
Add any other context about the problem here.
rtorrente commented 7 months ago

@minkgkyaw9899 Have you found a solution to this problem?

I'm facing the same problem

EDIT : I am able to avoid this problem using the Touchable element from react-native-gesture-handler insted of react-native

andresouza-maple commented 2 months ago

@minkgkyaw9899 Have you found a solution to this problem?

I'm facing the same problem

EDIT : I am able to avoid this problem using the Touchable element from react-native-gesture-handler insted of react-native

@rtorrente Your solution works on the Web app, not just iOS and Android. Thank you! Just to be more specific, this is the solution that worked for me:

import { TouchableOpacity } from 'react-native-gesture-handler';