Chat head code snippet

ts

class DraggablePerson extends React.Component<Props> {
    static whyDidYouRender = false;

    state: State = {
        isDragging: false
    };

    private panResponder: PanResponderInstance;
    private pan = new Animated.ValueXY() as AnimatedValue;
    private position = { x: 0, y: 0 };

    constructor(props: Props) {
        super(props);

        this.pan.addListener((value) => this.position = value);

        this.panResponder = PanResponder.create({
            onMoveShouldSetPanResponder: (evt, gestureState) => true,

            onPanResponderGrant: () => {
                // Set the initial value to the current state
                // Should be rewritten to use Animated.addEventListener({value} => ...)
                this.setState({
                    isDragging: true
                });

                this.pan.setOffset({
                    x: this.position.x,
                    y: this.position.y
                });

                this.pan.setValue({ x: 0, y: 0 });
            },

            // Move object while onPress is active. Snapping is handled later.
            onPanResponderMove: Animated.event([
                null, { dx: this.pan.x, dy: this.pan.y }
            ]),

            // Handle swiper behaviour after object is released.
            onPanResponderRelease: (e, { dx, dy, vx }) => {
                // Fix jumping when moving the object second time.
                this.pan.flattenOffset();

                this.setState({
                    isDragging: false
                });

                if (!this.props.person) {
                    return;
                }

                // Send ending position to parent component.
                this.props.calculateOverlapping(dx, dy, this.props.person.id);

                // Animate springy tuff.
                Animated.spring(this.pan, { toValue: { x: 0, y: 0 } }).start();
            }
        });
    }