Skip to content

Instantly share code, notes, and snippets.

@calendee
Created May 27, 2020 10:32
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save calendee/ba37861b237b57ee49b7949766c9a0da to your computer and use it in GitHub Desktop.
Save calendee/ba37861b237b57ee49b7949766c9a0da to your computer and use it in GitHub Desktop.
React Native Gesture Handler Swipe
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;
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
Copy link

hello, can i have those files please?
"@assets/theme";
"src/components/Swipeables/SwipeButton";
"src/components/Swipeables/SwipeButton/style";
"src/components/Swipeables/SwipeProvider/";

@calendee
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment