chore: flip bunnies

Author: remilry

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

@@ -5,6 +5,8 @@ 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';
+
 type Props = {
   programInfo: ProgramInfo;
   onSelect?: () => void;
@@ -15,20 +17,35 @@ 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` }],
+      };
+    });
+
     return (
       <SpatialNavigationFocusableView
         onSelect={onSelect}
+        onLongSelect={rotate360}
         indexRange={indexRange}
         viewProps={{ accessibilityLabel: programInfo.title }}
         ref={ref}
       >
         {({ isFocused, isRootActive }) => (
-          <Program
-            isFocused={isFocused && isRootActive}
-            programInfo={programInfo}
-            label={label}
-            variant={variant}
-          />
+          <Animated.View style={animatedStyle}>
+            <Program
+              isFocused={isFocused && isRootActive}
+              programInfo={programInfo}
+              label={label}
+              variant={variant}
+            />
+          </Animated.View>
         )}
       </SpatialNavigationFocusableView>
     );