How to trasnlate from Dimensions screen width to svg coordinates

I want to do viewBox using the coordinates I set and accordingly determined for the same ratio of x and y to get the coordinates. I can do this easily on Dom. How can I do this in my `react-native 'application using this package.

let point = svg.createSVGPoint();
point.x = e.clientX;
point.y = e.clientY;
let CTM = svg.getScreenCTM().inverse();
point = point.matrixTransform(CTM);

[msand]

This pattern seems to perform quite alright:

import React, {memo, PureComponent} from 'react';
import {View, Dimensions, StyleSheet} from 'react-native';
import Svg, {Circle} from 'react-native-svg';
import Animated from 'react-native-reanimated';
import {PanGestureHandler} from 'react-native-gesture-handler';
const {
  add,
  cos,
  sin,
  sub,
  atan,
  cond,
  Value,
  event,
  divide,
  multiply,
  lessThan,
  View: AnimatedView,
} = Animated;
const {PI} = Math;
const {absoluteFill} = StyleSheet;
const {width, height} = Dimensions.get('window');
const smallestSide = Math.min(width, height);
const r = smallestSide * 0.42;
const cy = height / 2;
const cx = width / 2;

const sliderSize = 40;
const sliderRadius = 20;

const slider = (
  <Svg width={sliderSize} height={sliderSize}>
    <Circle cx={sliderRadius} cy={sliderRadius} r={sliderRadius} />
  </Svg>
);
const Slider = memo(function Slider() {
  return slider;
});

const background = (
  <Svg width={width} height={height} style={absoluteFill}>
    <Circle
      r={r}
      cx={cx}
      cy={cy}
      fill="none"
      stroke="#aaa"
      strokeWidth="7"
      strokeDasharray="1,6"
    />
  </Svg>
);
const Background = memo(function Background() {
  return background;
});

export default class CircularSlider extends PureComponent {
  dragX = new Value(0);
  dragY = new Value(0);
  onGestureEvent = event([
    {
      nativeEvent: {
        absoluteX: this.dragX,
        absoluteY: this.dragY,
      },
    },
  ]);
  rad = add(
    atan(divide(sub(this.dragY, cy), sub(this.dragX, cx))),
    cond(lessThan(this.dragX, cx), PI, 0),
  );
  x = add(cx, multiply(r, cos(this.rad)));
  y = add(cy, multiply(r, sin(this.rad)));
  render() {
    const {onGestureEvent, x, y} = this;
    return (
      <View style={absoluteFill}>
        <Background />
        <View style={sliderStyles}>
          <AnimatedView
            style={{
              transform: [{translateX: x}, {translateY: y}],
            }}>
            <Slider />
          </AnimatedView>
        </View>
        <PanGestureHandler
          onGestureEvent={onGestureEvent}
          onHandlerStateChange={onGestureEvent}>
          <AnimatedView style={absoluteFill} />
        </PanGestureHandler>
      </View>
    );
  }
}

const {sliderOffset} = StyleSheet.create({
  sliderOffset: {
    transform: [{translateX: -sliderRadius}, {translateY: -sliderRadius}],
  },
});
const sliderStyles = StyleSheet.compose(
  absoluteFill,
  sliderOffset,
);

[msand]

To make it compatible with the web (current version has flickering when the slider circle is under the mouse) you need to change the move handler to use pageX and pageY instead of locationX and locationY:

      onPanResponderMove: ({nativeEvent}) => {
        const {pageX, pageY} = nativeEvent;
        this.setState({
          v: this.cartesianToPolar(pageX, pageY),
        });
      },