swimtracker-app/playground/SliderDraft.js

import React, { useRef } from "react";

import {
  StyleSheet,
  View,
  StatusBar,
  ImageBackground,
  Text,
  TouchableOpacity,
  Animated,
  PanResponder,
} from "react-native";
import EntypoIcon from "react-native-vector-icons/Entypo";
import Svg, { G, Polyline, Line, Circle, Rect, Text as SvgText } from 'react-native-svg';



let AnimatedCircle = Animated.createAnimatedComponent(Circle);
let AnimatedG = Animated.createAnimatedComponent(G);

function SliderDraftView(props) {
  const pan = useRef(new Animated.ValueXY()).current;

  /*
  const panResponder = useRef(
    PanResponder.create({
      onPanResponderTerminationRequest: () => { console.log("p1"); return false; },
      onStartShouldSetPanResponder: () => { console.log("p2"); return true; },
      onMoveShouldSetPanResponder: () => { console.log("p3"); return true; },
      //onPanResponderMove: Animated.event([
      //  null,
      //  { dx: pan.x, dy: pan.y }
      //]),
      onPanResponderMove: (e, gesture) => {
        console.log(gesture);
      },
      onPanResponderRelease: () => {
        console.log("release");
        Animated.spring(pan, { toValue: { x: 0, y: 0 } }).start();
      }
    })
  );//.current;
  */
  const panResponder = useRef(PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponderCapture: () => true,
    onPanResponderMove: (_, { dx, dy }) => {
      console.log("bla", dx, dy);
      cx.setValue(dx);
      cy.setValue(dy);
      setCurrentPoint({ x: dx, y: dy });
    },
    onPanResponderRelease: (e, { dx, dy }) => {
      console.log("release", dx, dy);
      cx.extractOffset();
      cy.extractOffset();
      offsetX = offsetX + dx;
      offsetY = offsetY + dy;
    }
  })).current;


  console.log({ ...panResponder.panHandlers });

  return (
    <View style={{ flex: 1 }}>

      <StatusBar barStyle="light-content" backgroundColor="rgba(0,0,0,0.4)" translucent={true} />
      <ImageBackground
        source={require("../assets/pool_sky_background_blurred.jpg")}
        resizeMode="cover"
        style={{ flex: 1 }}
      >
        <View style={setupViewStyles.container}>
          <View style={{ flexDirection: "row", alignItems: "center" }}>
            {props.backButton &&
              <TouchableOpacity onPress={() => props.navigation.goBack()}>
                <EntypoIcon name="chevron-left" style={setupViewStyles.backButton}></EntypoIcon>
              </TouchableOpacity>
            }
            <Text style={setupViewStyles.headerText}>
              Slider Draft
            </Text>
          </View>
          <View style={{ flex: 1, justifyContent: "center" }}>
            <Svg height="100%" width="100%" viewBox="0 0 200 200"  {...panResponder.panHandler}>
              <Rect x="10" y="10" rx="15" width="160" height="40" fill="rgba(255, 255, 255, 0.7)" />
              <SvgText x="85" y="34" fill="rgba(80, 80, 80, 1)">42</SvgText>


              <AnimatedCircle
                x={pan.x} y={pan.y} r="20"
              ></AnimatedCircle>

              <G >
                <Line x1="25" y1="20" x2="25" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
                <Line x1="45" y1="20" x2="45" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
                <Line x1="65" y1="20" x2="65" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
                <Line x1="85" y1="20" x2="85" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
                <Line x1="105" y1="20" x2="105" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
                <Line x1="125" y1="20" x2="125" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
                <Line x1="145" y1="20" x2="145" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
              </G>
            </Svg>
          </View>
        </View>
      </ImageBackground>
    </View>
  )
}


const setupViewStyles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between",
    width: "80%",
    marginLeft: 40,
    marginTop: 60,
  },
  headerText: {
    color: "rgba(255,255,255,1)",
    fontSize: 25,
  },
  subtext: {
    color: "rgba(255,255,255,1)",
    textAlign: "left",
    fontSize: 18,
    lineHeight: 25,
    width: "80%",
    marginBottom: 50,
  },
  backButton: {
    color: "rgba(255,255,255,1)",
    fontSize: 40
  },
});

export default SliderDraftView;