Как повторить анимацию в react-spring?

Question

[historydev]

Я застрял на моменте смещения с поворотом, почему-то не работает transformOrigin, как мне кажется:

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',
            }]} viewBox={'0 0 150 150'}>
                <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}],
                }}/>
                <AnimatedCircle x={105} y={105} 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>
    );
}

Я попытался загрузить на expo go snack - не получилось, не знаю как это запустить, изучаю пару дней как.

Оригинальная анимация с scss:

.loader .line-2 {
	cx: $size;
	cy: $size;
	r: $radius;
	fill: none;
	stroke: rgb(121, 36, 122);
	stroke-width: $stroke-size;
	stroke-dasharray: 0, 168.4, 20, 0;
	animation: resizeRightSide $pieces-duration linear infinite, rotate $pieces-rotation-duration linear infinite $pieces-rotation-delay;
	transform-origin: 50% 50%;
}

Если закомментировать трансформацию получается примерно тот-же эффект что я получаю в react-native, я понимаю что я его получаю потому-что смещаю элемент по x, y и мне нужен эффект как на фидле, он смещается и вращается по большему радиусу, возможно здесь нужен другой подход.