chore(example): remove reanimated to fix a perf issue (#171)

* chore(example): get rid of reanimated because of a perf bug

* chore(example): remove reanimated dependency

Author: pierpo

packages/example/babel.jest.config.js

@@ -22,6 +22,5 @@ module.exports = {
       },
     ],
     ['@babel/plugin-proposal-class-properties', { loose: false }],
-    'react-native-reanimated/plugin',
   ],
 };

packages/example/package.json

@@ -30,7 +30,6 @@
     "react": "18.2.0",
     "react-native": "npm:react-native-tvos@0.74.1-0",
     "react-native-keyevent": "^0.3.2",
-    "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",

packages/example/src/modules/program/view/ProgramNode.tsx

@@ -4,8 +4,8 @@ import { ProgramInfo } from '../domain/programInfo';
 import { Program } from './Program';
 import { forwardRef } from 'react';
 import { SpatialNavigationNodeRef } from '../../../../../lib/src/spatial-navigation/types/SpatialNavigationNodeRef';
-
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useRotateAnimation } from './useRotateAnimation';
+import { Animated } from 'react-native';
 
 type Props = {
   programInfo: ProgramInfo;
@@ -17,17 +17,7 @@ type Props = {
 
 export const ProgramNode = forwardRef<SpatialNavigationNodeRef, Props>(
   ({ programInfo, onSelect, indexRange, label, variant }: Props, ref) => {
-    const rotationZ = useSharedValue(0);
-
-    const rotate360 = () => {
-      rotationZ.value = withTiming(rotationZ.value + 360);
-    };
-
-    const animatedStyle = useAnimatedStyle(() => {
-      return {
-        transform: [{ rotateZ: `${rotationZ.value}deg` }],
-      };
-    });
+    const { rotate360, animatedStyle } = useRotateAnimation();
 
     return (
       <SpatialNavigationFocusableView

packages/example/src/modules/program/view/useRotateAnimation.ts

@@ -0,0 +1,29 @@
+import { useRef } from 'react';
+import { Animated } from 'react-native';
+
+export const useRotateAnimation = () => {
+  const rotationZ = useRef(new Animated.Value(0)).current;
+
+  const rotate360 = () => {
+    Animated.timing(rotationZ, {
+      toValue: 360,
+      duration: 1000, // Adjust duration as needed
+      useNativeDriver: true,
+    }).start(() => {
+      rotationZ.setValue(0); // Reset to 0 after completing a full rotation
+    });
+  };
+
+  const animatedStyle = {
+    transform: [
+      {
+        rotateZ: rotationZ.interpolate({
+          inputRange: [0, 360],
+          outputRange: ['0deg', '360deg'],
+        }),
+      },
+    ],
+  };
+
+  return { rotate360, animatedStyle };
+};