React Native Gesture Handler Swipe

SwipeableItem.tsx

import React, { useCallback, useContext, useEffect, useRef } from "react";
import Swipeable from "react-native-gesture-handler/Swipeable";

import { Colors } from "@assets/theme";
import SwipeButton, {
  SwipeButtonType,
} from "src/components/Swipeables/SwipeButton";
import { SwipeButtonStyles } from "src/components/Swipeables/SwipeButton/style";
import { SwipeContext } from "src/components/Swipeables/SwipeProvider/";

type Props = {
  children: any;
  itemKey: string;
  leftButtons?: SwipeButtonType[];
  onDelete?: Function;
  rightButtons?: SwipeButtonType[];
  styles?: SwipeButtonStyles;
};

const SwipeableItem = ({
  children,
  itemKey,
  leftButtons = [],
  rightButtons = [],
}: Props) => {
  const swipeableRef = useRef<Swipeable | null>(null);
  const { openedItemKey, setOpenedItemKey } = useContext(SwipeContext);

  const close = () => {
    if (swipeableRef.current) {
      swipeableRef.current.close();
    }
  };

  const handleSwipe = () => {
    setOpenedItemKey(itemKey);
  };

  const handlePress = (onPress: Function) => {
    close();
    onPress();
  };

  useEffect(() => {
    // If another item is opened, close this one
    if (openedItemKey && itemKey !== openedItemKey) {
      close();
    }
  }, [itemKey, openedItemKey]);

  const renderButtons = useCallback((buttons: SwipeButtonType[]) => {
    return (
      <>
        {buttons.map(
          ({
            icon,
            iconColor,
            key,
            onPress,
            rbId,
            rbDefaultMessage,
            styles,
            testID,
            theme,
          }) => {
            return (
              <React.Fragment key={key}>
                <SwipeButton
                  icon={icon}
                  iconColor={iconColor}
                  onPress={() => {
                    handlePress(onPress);
                  }}
                  rbId={rbId}
                  rbDefaultMessage={rbDefaultMessage}
                  styles={styles}
                  testID={testID}
                  theme={theme}
                />
              </React.Fragment>
            );
          },
        )}
      </>
    );
  }, []);

  const renderRightButtons = useCallback(() => {
    return renderButtons(rightButtons);
  }, [rightButtons]);

  const renderLeftButtons = useCallback(() => {
    return renderButtons(leftButtons);
  }, [leftButtons]);

  return (
    <Swipeable
      childrenContainerStyle={{
        backgroundColor: Colors.white,
        position: "relative",
      }}
      ref={swipeableRef}
      friction={1.3}
      onSwipeableWillOpen={handleSwipe}
      renderRightActions={renderRightButtons}
      renderLeftActions={renderLeftButtons}
      overshootFriction={20}
    >
      {children}
    </Swipeable>
  );
};

export default SwipeableItem;

SwipeProvider.tsx

import React, { createContext, ReactNode, useMemo, useState } from "react";

type SwipeContextProps = {
  openedItemKey: string;
  setOpenedItemKey: (key: string) => void;
};

type SwipeProviderProps = {
  children: ReactNode;
  initialOpenedItemKey: string;
};

const swipeContextValues: SwipeContextProps = {
  openedItemKey: "",
  setOpenedItemKey: () => {},
};

export const SwipeContext = createContext<SwipeContextProps>(
  swipeContextValues,
);

export function SwipeProvider({
  initialOpenedItemKey = "",
  children,
}: SwipeProviderProps) {
  const [openedItemKey, setOpenedItemKey] = useState(initialOpenedItemKey);

  const value = useMemo(() => {
    return {
      openedItemKey,
      setOpenedItemKey,
    };
  }, [openedItemKey]);

  return (
    <SwipeContext.Provider value={value}>{children}</SwipeContext.Provider>
  );
}

SwipeProvider.Context = SwipeContext;

@diegotus : Sorry, I no longer work for that company and don't have access to the code.