0

In my react app, I have used Swipeable from react native gesture handler. I am showing two buttons when the user swipes left. My code is this

 <Swipeable
    ref={updateRef}
    friction={2}
    leftThreshold={80}
    rightThreshold={41}
    renderRightActions={renderRightActions}>children </Swipeable>

const renderRightAction = (text: string, color: string, x: number, progress: any, imageUrl: string, dragX: any) => {
    
    const pressHandler = () => {
      close();
      console.log(text);
    };
    return (
      <Animated.View style={{ flex: 1, transform: [{ translateX: 0 }] }}>
        <RectButton
          style={[styles.rightAction, { backgroundColor: color }]}
          onPress={pressHandler}>
          <SvgXml xml={imageUrl} width={wp(16)} height={wp(16)} />
          <Text style={styles.actionText}>{text}</Text>
        </RectButton>
      </Animated.View>
    );
  };
 

     const renderRightActions = (progress: any, dragX: any) => (
        <View style={styles.renderRightActionsContainer}>
          {renderRightAction('Favoritt', Colors.lightBeige, 84, progress, Images.Favourite, dragX)}
          {renderRightAction('Skjul', Colors.primaryBackground, 84, progress, Images.CloseEye, dragX)}
        </View>
      );

It is working, what I am not able to achieve is that if the user keeps swiping I want the one of the button (delete) to take full width and then delete the item from the rows.

mohsinali1317
  • 4,255
  • 9
  • 46
  • 85

1 Answers1

1

You can use onSwipeableOpen(()=>pressHandler()).

https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/swipeable#onswipeableopen

My advice please use key to your Swipeable. This will prevent the problem of not closing the renderRightActions.

<Swipeable
  key={someUniqueKey}
  ...
>
  ...
</Swipeable>

if you come across with not closing problem please check: Delete on swipe is not closing the Swipeable React native

Aras Cglzn
  • 254
  • 2
  • 10