Skip to content

Instantly share code, notes, and snippets.

@alexalannunes
Created June 30, 2020 00:04
Show Gist options
  • Save alexalannunes/d006a31750ed59386643bf22f1e64ac2 to your computer and use it in GitHub Desktop.
Save alexalannunes/d006a31750ed59386643bf22f1e64ac2 to your computer and use it in GitHub Desktop.
A simple react native draggable card (down | up)
import { StatusBar } from "expo-status-bar";
import React, { useEffect } from "react";
import { StyleSheet, Text, View, Animated, Easing } from "react-native";
import { PanGestureHandler, State } from "react-native-gesture-handler";
export default function App() {
let offset = 0;
let y = new Animated.Value(0);
const _onPanGestureEvent = Animated.event([{ nativeEvent: { translationY: y } }], { useNativeDriver: false });
function onPanGesture({ nativeEvent }) {
let opened = false;
if (nativeEvent.oldState === State.ACTIVE) {
offset += nativeEvent.translationY;
if (nativeEvent.translationY >= 100) {
opened = true;
} else {
y.setValue(offset);
y.setOffset(0);
offset = 0;
}
Animated.timing(y, {
toValue: opened ? 380 : 0,
useNativeDriver: true,
duration: 200,
}).start(() => {
offset = opened ? 380 : 0;
y.setOffset(offset);
y.setValue(0);
});
}
}
return (
<View style={styles.container}>
<PanGestureHandler onHandlerStateChange={onPanGesture} onGestureEvent={_onPanGestureEvent}>
<Animated.View
style={[
styles.card,
{
transform: [
{
translateY: y.interpolate({
inputRange: [0, 380],
outputRange: [0, 380],
extrapolate: "clamp",
}),
},
],
},
]}
/>
</PanGestureHandler>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#d8d8d8",
alignItems: "center",
padding: 30,
justifyContent: "center",
},
card: {
height: 300,
borderRadius: 20,
width: "100%",
backgroundColor: "#fff",
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment