After upgrade to 2.4.1 types for style prop (Animated.View) are incompatible with Animated.Value

Description

After upgrade from 2.2.4 to the latest version (2.4.1) I’m getting many TypeScript errors in all places where I use Animated.View with Animated.Value from Reanimated v1.

Expected behavior

Types shouldn’t throw errors to valid usage of style prop.

Actual behavior & steps to reproduce

 <Animated.View
            style={{
                opacity: animation.current,
            }}
        >
        
        </Animated.View>

That’s throw error but refactored to

 <Animated.View
            style={[{
                opacity: animation.current,
            }]}
        >
        
        </Animated.View>

works fine

Snack or minimal code example

const Component = () => {
 
 const animation = useRef(new ReAnimated.Value(Dimensions.get('window').height));}
 ....
 
 <Animated.View
            style={{
                left: 0,
                top: animation.current,  <----- this line throw TS error after upgrade
                right: 0,
                bottom: trueBottom * -1,
                backgroundColor: colors.GRAY_50,
                zIndex: 99,
            }}
        >
        
         ......
        </Animated.View>

TS Error:

TS2769: No overload matches this call.
Overload 1 of 2, ‘(props: AnimateProps<ViewProps> | Readonly<AnimateProps<ViewProps>>): View’, gave the following error.
Type ‘{ position: "absolute" | "relative"; display: "none" | "flex"; left: number; top: ReAnimated.Value<number>; right: number; bottom: number; backgroundColor: string; zIndex: number; }’ is not assignable to type ‘((false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>> | AnimatedNode<…>) & (false | … 4 more … | RecursiveArray<…>)) | null | undefined’.
Type ‘{ position: "absolute" | "relative"; display: "none" | "flex"; left: number; top: ReAnimated.Value<number>; right: number; bottom: number; backgroundColor: string; zIndex: number; }’ is not assignable to type ‘undefined’.
Overload 2 of 2, ‘(props: AnimateProps<ViewProps>, context: any): View’, gave the following error.
Type ‘{ position: "absolute" | "relative"; display: "none" | "flex"; left: number; top: ReAnimated.Value<number>; right: number; bottom: number; backgroundColor: string; zIndex: number; }’ is not assignable to type ‘((false | ViewStyle | RegisteredStyle<ViewStyle> | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>> | AnimatedNode<…>) & (false | … 4 more … | RecursiveArray<…>)) | null | undefined’.
Type ‘{ position: "absolute" | "relative"; display: "none" | "flex"; left: number; top: ReAnimated.Value<number>; right: number; bottom: number; backgroundColor: string; zIndex: number; }’ is not assignable to type ‘undefined’.

Package versions

name	version
react-native	0.66.4
react-native-reanimated	2.4.1
TypeScript	4.5.4
NodeJS
Xcode
Java
Gradle
expo

Affected platforms

• Android
• iOS
• Web

[piaskowyk]

Should be resolved with: https://github.com/software-mansion/react-native-reanimated/pull/3098 🎉

[magrinj]

Still present on 2.8.0