SwipeRow - onLongPress?

[t1gor]

Hello,

First of all - great job with the lib, thanks a lot for all your efforts!

I would like to add an onLongPress handler for SwipeRow. I could not find any API within the lib so far, maybe I'm missing something?

What would be the way to achieve it?

My sample row code:

<SwipeRow
    disableRightSwipe={isTeamChannel}
    disableLeftSwipe={isTeamChannel}
    onRowPress={() => onSelectedHandler()}
    leftOpenValue={150}
    rightOpenValue={-150}
    ref={rowRef}
>
    <SwipeHiddenItem
        isArchived={isArchived}
        isPinned={isPinned}
        isMuted={isMuted}
        markChannelFavorite={markChannelFavorite}
        markChannelArchived={markChannelArchived}
        markChannelAnswered={markChannelAnswered}
        closeRow={() => rowRef.current?.closeRow()}
    />

    <Box width="100%" flexDirection="row" justifyContent="space-between">
        <HStack justifyContent="space-between"
                alignItems="stretch"
                flex={1}
                space={3}
                paddingLeft={2}
                paddingRight={4}
        >
            <Avatar avatar={avatar} />
            <Stack flex={1} paddingTop={2} paddingBottom={2} justifyContent="center" space={2}>
                <HStack space={1}>
                    <HStack flex={3} space={1}>
                        <Text noOfLines={1} ellipsizeMode="tail">{username}</Text>
                        <FavoriteIcon isFavorite={isFavorite} />
                    </HStack>
                    <Timer time={lastInteractionDate} />
                </HStack>
                {showActions && (
                    <HStack space={2}>
                        <PreviewAndActionsComponent />
                    </HStack>
                )}
            </Stack>
        </HStack>
    </Box>
</SwipeRow>

[jemise111]

Hey @t1gor this is definitely possible. You just need to pass a Touchable as the top level component for visible content of the SwipeRow. Currently the top level component is a Box. I believe something like this should work:

<SwipeRow
    disableRightSwipe={isTeamChannel}
    disableLeftSwipe={isTeamChannel}
    onRowPress={() => onSelectedHandler()}
    leftOpenValue={150}
    rightOpenValue={-150}
    ref={rowRef}
>
    <SwipeHiddenItem
        isArchived={isArchived}
        isPinned={isPinned}
        isMuted={isMuted}
        markChannelFavorite={markChannelFavorite}
        markChannelArchived={markChannelArchived}
        markChannelAnswered={markChannelAnswered}
        closeRow={() => rowRef.current?.closeRow()}
    />

        <TouchableHighlight onLongPress={() => onLongPress()}>                        <===== ADD TOUCHABLE HERE
        <Box width="100%" flexDirection="row" justifyContent="space-between">
        <HStack justifyContent="space-between"
                alignItems="stretch"

[jemise111]

I just tested this myself and it is working, but if it is not for you please reopen this issue, thanks!

[t1gor]

Thanks for the hint, @jemise111. My problem was that I was using TouchableOpacity instead of TouchableHighlight and it was producing weird effect - I could see the swipe actions while doing the long press on the item :) Probably worth mentioning in the docs for newbies, like myself ;)

[jemise111]

Gotcha, glad you got it sorted. I'll try to add that but PRs are always welcome, especially for docs :)