How to repeat web animation on react-native and react-spring/native?

Question

Web animation: https://jsfiddle.net/8nozk6L4/1/

I try to do this, but i think what transformOrigin does not work:

import {Button, Text, View} from 'react-native';
import {useSpring, animated, easings, useSpringValue} from '@react-spring/native';
import {Svg, Circle} from 'react-native-svg';

const AnimatedCircle = animated(Circle);
const AnimatedText = animated(Text);
export default function App() {
    const [rotate, rotateApi] = useSpring(() => ({
        rotate: "0deg",
        transformOrigin: '50% 50%',
        config: {
            duration: 1000,
            easing: easings.linear,
        },
    }), []);

    const [line2, apiLine2] = useSpring(() => ({
        x: 75,
        y: 75,
        transformOrigin: '50% 50%',
        loop: true,
        config: {
            duration: 1000,
            easing: easings.linear
        }
    }), []);

    const handleClick = () => {
        rotateApi.start({
            from: {
                rotate: "0deg",
                transformOrigin: '50% 50%',
            },
            to: {
                rotate: "360deg",
                transformOrigin: '50% 50%',
            },
            // loop: true,
        });
        apiLine2.start({
            from: {
                x: 75,
                y: 75,
                transformOrigin: '50% 50%',
            },
            to: {
                x: 105,
                y: 75,
                transformOrigin: '50% 50%',
            },
        });
    }

    return (
        <View>
            <Svg style={{
                width: '150px',
                height: '150px',
            }}>
                <AnimatedCircle x="75" y="75" r="30" fill='none' stroke='rgb(185, 64, 188)' strokeWidth="20" strokeDasharray='40.4, 19.4, 48.6, 20, 40, 20'
                                style={{
                                    transform: [{rotate: rotate.rotate}],
                                    transformOrigin: '50% 50%'
                }}/>
                <AnimatedCircle x={105} y={75} r="30" fill='none' stroke='rgb(121, 36, 122)' strokeWidth="20" strokeDasharray='0, 168.4, 20, 0'
                                style={{
                                    transform: [{rotate: rotate.rotate}],
                                    transformOrigin: '50% 50%',
                                }}/>
            </Svg>

            <Button title={'Animate'} onPress={handleClick} />

        </View>
    );
}

I try 3 or 5 libs for animations, i create all animations only on css and don't know how do this on javascript (if javascript with set styles, too easy and useless, but in react-native not working).