react-native-reanimated-carousel icon indicating copy to clipboard operation
react-native-reanimated-carousel copied to clipboard

How to disable press child Item on scrolling in Ios

Open minkgkyaw9899 opened this issue 1 year ago • 2 comments

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.

minkgkyaw9899 avatar Mar 13 '24 05:03 minkgkyaw9899

@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 avatar Apr 07 '24 19:04 rtorrente

@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';

andresouza-maple avatar Sep 13 '24 18:09 andresouza-maple