Add style prop to every animated component (software-mansion#2947)

Author: jgonet

react-native-reanimated-tests.tsx

@@ -81,7 +81,12 @@ const AnimatedFCWithRef = Animated.createAnimatedComponent(SomeFCWithRef);
 
 function CreateAnimatedComponentTest1() {
   const animatedProps = useAnimatedProps(() => ({ fill: 'blue' }));
-  return <AnimatedPath animatedProps={animatedProps} />;
+  return (
+    <AnimatedPath
+      animatedProps={animatedProps}
+      style={{ backgroundColor: 'red' }}
+    />
+  );
 }
 
 function CreateAnimatedComponentTest2() {

react-native-reanimated.d.ts

@@ -146,10 +146,14 @@ declare module 'react-native-reanimated' {
               >;
     };
 
-    export type AnimateProps<P extends object> = {
-      [K in keyof P]: K extends 'style'
-        ? StyleProp<AnimateStyle<P[K]>>
-        : P[K] | AnimatedNode<P[K]>;
+    export type StylesOrDefault<T> = 'style' extends keyof T
+      ? T['style']
+      : Record<string, unknown>;
+
+    export type AnimateProps<P extends Record<string, unknown>> = {
+      [K in keyof P]: P[K] | AnimatedNode<P[K]>;
+    } & {
+      style?: StyleProp<AnimateStyle<StylesOrDefault<P>>>;
     } & {
       animatedProps?: Partial<AnimateProps<P>>;
       layout?: