Merge initial style

[piaskowyk]

Summary

Previously we saved only the last of the animated style passed to the component. In effect, we can lose the previously applied style after render. This PR adds the possibility to save more than one animated style as the initial style for component.

<Animated.View
  style={[
    { height: 10, backgroundColor: 'black', margin: 30 },
    animatedStyle1, // <-- this one will be lost
    animatedStyle2, // <-- only this one will be saved
  ]}
/>

Before	After
Screen.Recording.2023-07-11.at.14.33.54.mov	Screen.Recording.2023-07-11.at.14.34.27.mov

Example code

code

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
} from 'react-native-reanimated';
import { View, Button, Text } from 'react-native';
import React, { useState } from 'react';

export default function AnimatedStyleUpdateExample(): React.ReactElement {
  const [counter, setCounter] = useState(0);
  const width = useSharedValue(100);
  const height = useSharedValue(100);

  const widthStyle = useAnimatedStyle(() => {
    return {
      width: withTiming(width.value),
    };
  });

  const heightStyle = useAnimatedStyle(() => {
    return {
      height: withTiming(height.value),
    };
  });

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      <Text>Counter: {counter}</Text>
      <Animated.View
        style={[
          { height: 10, backgroundColor: 'black', margin: 30 },
          heightStyle,
          widthStyle,
        ]}
      />
      <Button
        title="update width"
        onPress={() => {
          width.value = Math.random() * 300;
          setCounter(counter + 1)
        }}
      />
      <Button
        title="update height"
        onPress={() => {
          height.value = Math.random() * 300;
        }}
      />
    </View>
  );
}

[tomekzaw]

❤️