Swipeable renderLeftActions button not firing #3223
Comments
|
Hey! 👋 The issue doesn't seem to contain a minimal reproduction. Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem? |
|
latekvo
added
Platform: Web
Platform: Android
|
Hi, could you clarify the repro you used to test this issue? |
|
@latekvo thanks for your comment, I figured out I pasted the wrong code version, but I already updated it. I used RN's TouchOpacity, also tested it with |
|
I have the same issue, but surprisingly it works in Android, but doesn't work in iOS. |
|
This is likely an issue with |
|
if you are bumped into this issue but need solve it quickly, use the old Swipeable instead as a temporary solution. |
|
+1 |
|
Hey there, I just tested it with v2.21.2 and [email protected] and for me, it's working now. I'll close this bug, although I found another one with ReanimatedSwipeable related to performance in Android devices, but I'll create another issue soon, happy code!. Check video: |
|
The issue still persists for me with the same example: |
|
@lukachi Do you think I should reopen this issue? Could you share more details, setup, devices where you're testing it, code or screenshots? |
|
+1 We are also heaving the same issue |
|
hi @erie-e9 package.json deps: snippet: export default function Chats() {
const insets = useSafeAreaInsets()
const bottomBarOffset = useBottomBarOffset()
const { data: fakeUsers } = useLoading([], () => getFakeUser(24), {
loadOnMount: true,
})
return (
<UiScreenScrollable>
<View
style={{
paddingTop: insets.top,
paddingBottom: bottomBarOffset,
}}
className='flex flex-1'
>
<View className='flex flex-1'>
<FlashList
data={fakeUsers}
estimatedItemSize={75}
renderItem={({ item, index }) => (
// TODO: replace by Reanimated Swipeable once it's stable and fixed left actions
<Swipeable
friction={2}
enableTrackpadTwoFingerGesture
rightThreshold={40}
leftThreshold={40}
renderLeftActions={() => (
<View className='flex h-full flex-row items-center'>
<TouchableOpacity
className='flex min-w-[60] items-center justify-center self-stretch bg-textSecondary'
onPress={() => console.log('delete')}
>
<UiIcon customIcon='message' size={24} className='text-baseWhite' />
</TouchableOpacity>
<TouchableOpacity
className='flex min-w-[60] items-center justify-center self-stretch bg-successDark'
onPress={() => console.log('delete')}
>
<UiIcon
libIcon='FontAwesome'
name='bookmark'
size={24}
className='text-baseWhite'
/>
</TouchableOpacity>
</View>
)}
renderRightActions={() => (
<View className='flex h-full flex-row items-center'>
<TouchableOpacity
className='flex min-w-[60] items-center justify-center self-stretch bg-warningMain'
onPress={() => console.log('delete')}
>
<UiIcon
libIcon='FontAwesome'
name='volume-off'
size={24}
className='text-baseWhite'
/>
</TouchableOpacity>
<TouchableOpacity
className='flex min-w-[60] items-center justify-center self-stretch bg-errorMain'
onPress={() => console.log('delete')}
>
<UiIcon
libIcon='FontAwesome'
name='trash'
size={24}
className='text-baseWhite'
/>
</TouchableOpacity>
<TouchableOpacity
className='flex min-w-[60] items-center justify-center self-stretch bg-textSecondary'
onPress={() => console.log('delete')}
>
<UiIcon
libIcon='FontAwesome'
name='archive'
size={24}
className='text-baseWhite'
/>
</TouchableOpacity>
</View>
)}
>
<ListItem
key={index}
title={item.name.first}
text='lorem ipsum dolor sit amet concestetur'
updatedAt={item.registered.date}
avatarUri={item.picture.thumbnail}
newMsgAmount={index % 2 === 0 ? 1 : undefined}
isRead={index % 2 !== 0}
className={cn(
'bg-backgroundPrimary',
index !== fakeUsers.length - 1 && 'border-b border-borderPrimary',
)}
/>
</Swipeable>
)}
/>
</View>
</View>
</UiScreenScrollable>
)
}so, the current state is - if we use deprecated Swipeable - left action works. |
Description
Trying with simple example, I faced next issue, I can't trigger onPress action on renderLeftActions, only renderRightActions works fine. Even if I momentarily swap the body of both, the problem persists.
This is working fine in v2.20.2, but something crashes in 2.21.0, 2.21.1 and 2.21.2.
Video.
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-18.at.13.35.23.mp4
Steps to reproduce
Snack or a link to a repository
https://snack.expo.io/
Gesture Handler version
2.21.0, 2.21.1 and 2.21.2
React Native version
0.76.2
Platforms
iOS
JavaScript runtime
None
Workflow
React Native (without Expo)
Architecture
Fabric (New Architecture)
Build type
Debug mode
Device
iOS simulator
Device model
iPhone 16 Pro simulator
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: