MENU


Animated.ValueXY

This is the 2D Value for driving 2D animations, such as pan gestures. It is almost identical API to normal Animated.Value, but multiplexed. It contains two regular Animated.Values under the hood.

MethodssetValue()setOffset()flattenOffset()extractOffset()addListener()removeListener()removeAllListeners()stopAnimation()resetAnimation()getLayout()getTranslateTransform()

RESETRUNFULL
import React, { useRef } from "react";import { Animated, PanResponder, StyleSheet, View } from "react-native";const DraggableView = () => {
  const pan = useRef(new Animated.ValueXY()).current;
  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: Animated.event([
      null,
      {dx: pan.x, // x,y are Animated.Value
        dy: pan.y,},]),
    onPanResponderRelease: () => {
      Animated.spring(
        pan, // Auto-multiplexed
        { toValue: { x: 0, y: 0 } } // Back to zero
      ).start();
    },
  });
  return (
    <View style={styles.container}>
      <Animated.View{...panResponder.panHandlers} style={[pan.getLayout(), styles.box]}/>
    </View>
  );};const styles = StyleSheet.create({
  container: {flex: 1, justifyContent: "center", alignItems: "center"},
  box:{backgroundColor: "#61dafb", width: 80, height: 80,borderRadius: 4},});export default DraggableView;