Skip to content

Instantly share code, notes, and snippets.

@lamarmarshall
Created June 24, 2024 03:27
Show Gist options
  • Save lamarmarshall/65b2ecce1f3e2efe95dc021315a06303 to your computer and use it in GitHub Desktop.
Save lamarmarshall/65b2ecce1f3e2efe95dc021315a06303 to your computer and use it in GitHub Desktop.
react native, pan responder, delete list item, animation
import { Text, View, StyleSheet, Animated, PanResponder } from "react-native";
import { FlowText } from "../overrides/text";
import { FlowHighLightView } from "../overrides/highlightview";
import { FlowRow } from "../overrides";
import { COLORS } from "@/constants/styles";
import { useRef } from "react";
import { useColorScheme } from "@/hooks/useColorScheme.web";
import { flingGestureHandlerProps } from "react-native-gesture-handler/lib/typescript/handlers/FlingGestureHandler";
export const ActivityItem = ({title}) => {
const pan = useRef(new Animated.ValueXY()).current;
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderTerminationRequest: () => false,
onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}],
{useNativeDriver: false}
),
onPanResponderRelease: () => {
Animated.spring(
pan, {
toValue: {x: 0, y: 0},
useNativeDriver: false
}
).start();
}
})
).current;
return (
<Animated.View {...panResponder.panHandlers}
style={{
touchAction: "none",
transform: [{translateX: pan.x}],
userSelect: "none",
}}
>
<FlowHighLightView style={styles.itemContainer}>
<FlowRow style={styles.row}>
<FlowText>{title}</FlowText>
<FlowText style={styles.time}>00:00:00</FlowText>
</FlowRow>
</FlowHighLightView>
</Animated.View>
);
}
const styles = StyleSheet.create({
itemContainer: {
paddingVertical: 19,
marginBottom: 6,
},
row : {
justifyContent: 'space-between',
},
time: {
color: COLORS.brightGreen,
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment