Skip to content

Instantly share code, notes, and snippets.

@shafayeatsumit

shafayeatsumit/pan.js

Created May 17, 2020 17:02
Show Gist options
  • Save shafayeatsumit/bb6c3c1b9f27daf3ffe3fa6670cb56d4 to your computer and use it in GitHub Desktop.
Save shafayeatsumit/bb6c3c1b9f27daf3ffe3fa6670cb56d4 to your computer and use it in GitHub Desktop.
Download ZIP
panresponder
Raw
pan.js
import React, {useRef} from 'react';
import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
export default function App() {
const pan = useRef(new Animated.ValueXY()).current;
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => {
console.log('start');
return true;
},
onPanResponderGrant: () => {
pan.setOffset({
x: pan.x._value,
y: pan.y._value,
});
},
onStartShouldSetPanResponderCapture: () => {
console.log('start capture');
return true;
},
onMoveShouldSetPanResponder: () => {
console.log('move');
return true;
},
onMoveShouldSetPanResponderCapture: () => {
console.log('move capture');
return true;
},
onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
onPanResponderRelease: () => {
pan.flattenOffset();
},
}),
).current;
return (
<View style={styles.container}>
<Text style={styles.titleText}>Drag this box!</Text>
<Animated.View
style={{
transform: [{translateX: pan.x}, {translateY: pan.y}],
}}
{...panResponder.panHandlers}>
<View style={styles.box} />
</Animated.View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
titleText: {
fontSize: 14,
lineHeight: 24,
fontWeight: 'bold',
},
box: {
height: 150,
width: 150,
backgroundColor: 'blue',
borderRadius: 5,
},
});
@shafayeatsumit
Copy link
Author

circle expand and shrink logic

  expandCircle = () => {
    const currentRadius = this.radius._value;
    const duration = DEFAULT_DURATION - DEFAULT_DURATION / (7 - currentRadius);
    Animated.timing(this.radius, {
      toValue: 7,
      duration: duration,
      useNativeDriver: true,
      easing: Easing.ease,
    }).start();
  };

  shrinkCircle = () => {
    const currentRadius = this.radius._value;
    const duration = DEFAULT_DURATION - DEFAULT_DURATION / (currentRadius - 1);
    Animated.timing(this.radius, {
      toValue: 1,
      duration: duration,
      useNativeDriver: true,
      easing: Easing.linear,
    }).start();
  };

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