typescript source code of Logo

import React, {useRef, useEffect} from 'react';
import {View, StyleSheet} from 'react-native';
import Reanimated, {Easing} from 'react-native-reanimated';

import {ReanimatedArcBase} from './ReanimatedArc';

const App = () => {
  const arcAngle = useRef(new Reanimated.Value(-90));

  const animate = () =>
    Reanimated.timing(arcAngle.current, {
      toValue: 270,
      easing: Easing.inOut(Easing.quad),
      duration: 2000,
    }).start();

  useEffect(() => {
    animate();
  }, []);

  return (
    <View style={styles.wrapper}>
      <ReanimatedArcBase
        color="#121330"
        diameter={200}
        width={20}
        lineCap="round"
        arcSweepAngle={160}
        rotation={Reanimated.add(arcAngle.current, 10)}
        style={styles.arc1}
      />
      <ReanimatedArcBase
        color="#3eefd8"
        diameter={140}
        width={20}
        lineCap="round"
        arcSweepAngle={170}
        rotation={Reanimated.multiply(
          Reanimated.sub(arcAngle.current, 185),
          -1,
        )}
        style={styles.arc2}
      />
      <ReanimatedArcBase
        color="#121330"
        diameter={80}
        width={20}
        lineCap="round"
        arcSweepAngle={180.1}
        rotation={arcAngle.current}
        style={styles.arc3}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    width: 200,
    height: 200,
  },
  arc1: {
    position: 'absolute',
  },
  arc2: {
    position: 'absolute',
    left: 30,
    top: 30,
  },
  arc3: {
    position: 'absolute',
    left: 60,
    top: 60,
  },
});

export default App;