reanimated-skia-performance

### Skia Animation Performance Optimization Report

#### **Current Bottlenecks**
- **Frame Drops**: 3-4 FPS loss during complex gesture interactions (e.g., pinch-to-zoom on maps).
- **Memory Usage**: Skia layer caching consuming ~180MB RAM during animations.
- **Shader Compilation**: Custom shaders recompiling on every render cycle.

#### **Optimization Recommendations**

1. **Offscreen Rendering**
   Wrap static layers in `SkiaView` with `mode="static"` to cache textures:
   ```jsx
   <Canvas mode="static">
     <Group layer="{true}">
       <Rect x={0} y={0} width={100} height={100} color="#3498db" />
     </Group>
   </Canvas>
   ```

2. **Shader Optimization**
   Pre-compile shaders using `Skia.init()`:
   ```jsx
   import { Skia } from '@shopify/react-native-skia';
   Skia.init(); // Pre-warms Skia engine
   ```

3. **Gesture Handling**
   Use `useAnimatedValue` with `SkiaValue` for smoother interactions:
   ```jsx
   const scale = useSharedValue(1);
   const gesture = Gesture.Pinch().onUpdate((e) => {
     scale.value = e.scale;
   });
   ```

4. **Memory Management**
   Explicitly release unused Skia resources:
   ```jsx
   const ref = useRef();
   // Later, when unmounting:
   ref.current?.dispose();
   ```

#### **Expected Results**
- **Frame Rate**: 60 FPS sustained during animations.
- **Memory**: Reduced to ~120MB (33% improvement).
- **Gesture Response**: Sub-16ms latency for touch events.

**Next Steps**: Apply these changes incrementally and benchmark with `react-native-performance` profiler.