Update initial style every render

Example/ios/Podfile.lock

@@ -478,7 +478,7 @@ SPEC CHECKSUMS:
   FBLazyVector: bcdeff523be9f87a135b7c6fde8736db94904716
   FBReactNativeSpec: f09bd7507ef9f78c89868600d5f1df26b62878f3
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 85ecdd10ee8d8ec362ef519a6a45ff9aa27b2e85
+  glog: 476ee3e89abb49e07f822b48323c51c57124b572
   RCT-Folly: 803a9cfd78114b2ec0f140cfa6fa2a6bafb2d685
   RCTRequired: 1e4605513e7b6a2871bdb8ae5b162b239ad18602
   RCTTypeSafety: 0ed8525a159a736981e1aa308e729d83f2fb6926

Example/src/AnimatedSharedStyleExample.tsx

@@ -0,0 +1,106 @@
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedStyle,
+  Easing,
+} from 'react-native-reanimated';
+import { View, Button, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+
+export default function AnimatedSharedStyleExample() {
+  const randomWidth = useSharedValue(100);
+
+  const [blueCounter, setBlueCounter] = useState<number>(0);
+  const [greenCounter, setGreenCounter] = useState<number>(0);
+  const [itemList, setItemList] = useState<any>([]);
+  const [toggleState, setToggleState] = useState<boolean>(false);
+
+  const config = {
+    duration: 500,
+    easing: Easing.bezier(0.5, 0.01, 0, 1),
+  };
+
+  const style = useAnimatedStyle(() => {
+    return {
+      width: withTiming(randomWidth.value, config),
+    };
+  });
+
+  const scopeObject = (
+    <Animated.View
+      style={[{ backgroundColor: 'black' }, styles.block, style]}
+    />
+  );
+
+  const renderItems = () => {
+    const output = [];
+    for (let i = 0; i < blueCounter; i++) {
+      output.push(
+        <Animated.View
+          key={i + 'a'}
+          style={[{ backgroundColor: 'blue' }, styles.block, style]}
+        />
+      );
+    }
+    return output;
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'column',
+      }}>
+      <Button
+        title="animate"
+        onPress={() => {
+          randomWidth.value = Math.random() * 350;
+        }}
+      />
+      <Button
+        title="increment counter"
+        onPress={() => {
+          setBlueCounter(blueCounter + 1);
+        }}
+      />
+      <Button
+        title="add item to static lists"
+        onPress={() => {
+          setGreenCounter(greenCounter + 1);
+          setItemList([
+            ...itemList,
+            <Animated.View
+              key={greenCounter + 'b'}
+              style={[{ backgroundColor: 'green' }, styles.block, style]}
+            />,
+          ]);
+        }}
+      />
+      <Button
+        title="toggle state"
+        onPress={() => {
+          setToggleState(!toggleState);
+        }}
+      />
+      <Animated.View
+        style={[{ backgroundColor: 'orange' }, styles.block, style]}
+      />
+      {toggleState && (
+        <Animated.View
+          style={[{ backgroundColor: 'black' }, styles.block, style]}
+        />
+      )}
+      {toggleState && scopeObject}
+      {renderItems()}
+      {itemList}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  block: {
+    width: 100,
+    height: 3,
+    margin: 1,
+  },
+});

Example/src/App.tsx

@@ -49,6 +49,7 @@ import SwipeableListExample from './SwipeableListExample';
 import WobbleExample from './WobbleExample';
 import AnimatedListExample from './LayoutReanimation/AnimatedList';
 import { WaterfallGridExample } from './LayoutReanimation/WaterfallGridExample';
+import AnimatedSharedStyleExample from './AnimatedSharedStyleExample';
 
 LogBox.ignoreLogs(['Calling `getNode()`']);
 
@@ -125,6 +126,10 @@ const SCREENS: Screens = {
     screen: AnimatedStyleUpdateExample,
     title: 'Animated Style Update',
   },
+  AnimatedSharedStyle: {
+    screen: AnimatedSharedStyleExample,
+    title: 'Animated Shared Style',
+  },
   WobbleExample: {
     screen: WobbleExample,
     title: 'Animation Modifiers (Wobble Effect)',

src/createAnimatedComponent.tsx

@@ -194,6 +194,7 @@ export default function createAnimatedComponent(
     _viewTag = -1;
     _isFirstRender = true;
     animatedStyle: { value: StyleProps } = { value: {} };
+    initialStyle = {};
     sv: SharedValue<null | Record<string, unknown>> | null;
     _propsAnimated?: PropsAnimated;
     _component: ComponentRef | null = null;
@@ -606,13 +607,12 @@ export default function createAnimatedComponent(
               // this is how we recognize styles returned by useAnimatedStyle
               style.viewsRef.add(this);
               if (this._isFirstRender) {
-                return {
+                this.initialStyle = {
                   ...style.initial.value,
                   ...initialUpdaterRun<StyleProps>(style.initial.updater),
                 };
-              } else {
-                return style.initial.value;
               }
+              return this.initialStyle;
             } else {
               return style;
             }