fix: withRepeat using array not reversing

[patrycjakalinska]

Summary

Fixes #6799. Shared value which contains a number array will not behave as expected with a withRepeat hook. Because it was an array the animation.startValue and nextAnimation.current became connected by reference, and therefore startValue was rising as current instead of staying a actual startValue. I discovered that in arrayOnStart, animation.current === value caused a referenced so i spread it.

Test plan

Example code:

import { Text, SafeAreaView, StyleSheet } from 'react-native';
import { useEffect } from 'react';

import {
  useAnimatedReaction, 
  useSharedValue, 
  withRepeat, 
  withTiming 
} from 'react-native-reanimated';


export default function App() {

  const arrayValue = useSharedValue([0]);
  const objValue = useSharedValue({x:0});  
  const numberValue = useSharedValue(0);

  const textValue = useSharedValue('0');

  useEffect( () => {    
    const duration = 300;

    // ❌ changes from [0,0,0] to [30,30,30] but then stops
    arrayValue.value = withRepeat(
      withTiming([30], { duration} ),
      2,
      true);

    // ✅ repeats from 0 to 30 and back to 0
    numberValue.value = withRepeat(
      withTiming(30, { duration} ),
      2,
      true);

  // ✅ repeats from {x:0,y:0,z:0} to {x:30,y:30,z:30} and back to {x:0,y:0,z:0}
    objValue.value = withRepeat(
      withTiming({x: 30}, { duration} ),
      2,
      true);
  },[]);

  useAnimatedReaction(
    () => [arrayValue.value, numberValue.value, objValue.value],
    ([arrayValue, numberValue, objValue]) => {
      // ✅ works - value reaches 30, then back to 0
      // textValue.value = `${numberValue.toFixed(2)}`;

      // ✅ works - value reaches 30, then back to 0
      // textValue.value = `${objValue.x.toFixed(2)}`;

      // ❌ value reaches 30, then remains
      textValue.value = `${arrayValue[0].toFixed(2)}`

      console.log('value:', textValue.value);
    }
  )

  return (
    <SafeAreaView style={styles.container}>
        <Text style={styles.text}>See console.log</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  text: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  }
});