aranda-adapptor

curl https://raw.githubusercontent.com/expo/expo/master/templates/expo-template-blank-typescript/tsconfig.json -o tsconfig.json
yarn add --dev typescript @types/react @types/react-native @types/react-dom
mv App.js App.tsx

aranda-adapptor

import React, { useEffect } from "react";
import { View, Dimensions } from "react-native";
import Animated, {
  useSharedValue,
  withRepeat,
  withTiming,
  useAnimatedStyle,
  Easing,
} from "react-native-reanimated";

aranda-adapptor

// Stars positions should be spread evenly between -0.5 and 0.5.
// We apply the screen width/height adjustment in the animated style function.
for (var i = 0; i < starCount; i++) {
  stars.push({
    id: i,
    x: Math.random() - 0.5,
    y: Math.random() - 0.5,
  });
}

aranda-adapptor

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "black",
      }}
    >
      {stars.map((s) => (
        // The spread operator passes all StarData fields as individual props
        <Star key={s.id} time={timeVal} {...s} />

aranda-adapptor

  const animatedStyle = useAnimatedStyle(() => {
    const x = Math.sin(props.time.value * 2 + props.id) * 50;
    const y = Math.cos(props.time.value * 2 + props.id) * 50;
    return {
      left: props.x + x,
      top: props.y + y,
    };
  });

aranda-adapptor

// Split the static star data out from the props type
interface StarData {
  id: number;
  x: number;
  y: number;
}

interface StarProps extends StarData {
  time: Animated.SharedValue<number>;
}

aranda-adapptor

const Starfield: React.FC<{}> = () => {
  // Create a shared time value
  const timeVal = useSharedValue(0);
  // Start a repeating animation that goes from 0 to 3600 in an hour
  const duration = 3600;
  useEffect(
    () => {
      timeVal.value = 0;
      timeVal.value = withRepeat(
        withTiming(duration, {

aranda-adapptor

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";

aranda-adapptor

import React from "react";
import { View } from "react-native";

// Props type for the star
interface StarProps {
  x: number;
  y: number;
}

// Star component