Starfield in Reanimated 2 - adding animation 1

App.tsx

import React, { useEffect } from "react";
import { View } from "react-native";
// Import the required types from Reanimated
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

interface StarProps {
  x: number;
  y: number;
  // Stars now take a shared time value
  time: Animated.SharedValue<number>;
}

const Star: React.FC<StarProps> = (props) => {
  // useAnimatedStyle takes a function that runs our
  // procedural animation code and returns style properties.
  const animatedStyle = useAnimatedStyle(() => {
    const x = Math.sin(props.time.value * 5) * 50;
    const y = Math.cos(props.time.value * 5) * 50;
    return {
      left: props.x + x,
      top: props.y + y,
    };
  });

  // Return an Animated.View and compose the static style values
  // with the animated style values
  return (
    <Animated.View
      style={[
        {
          width: 10,
          height: 10,
          backgroundColor: "white",
        },
        animatedStyle,
      ]}
    />
  );
};