Invalid value forr "unistyles_9872c439": an empty object is not a valid style value.

[nexquery]

Description

My code below works correctly in react-native-reanimated version 4.4.1 but malfunctions in version 4.5.0.

import React, { useCallback } from "react";
import { Pressable, type PressableProps } from "react-native";
import Animated, { useSharedValue, withTiming, useAnimatedStyle } from "react-native-reanimated";

const AnimatedPressableX = Animated.createAnimatedComponent(Pressable);

type AnimatedPressableProps = PressableProps &
{
    children: React.ReactNode;
};

export const AnimatedPressable = React.memo(({ children, onPressIn, onPressOut, style, ...props }: AnimatedPressableProps) =>
{
    const scale = useSharedValue(1);

    const handlePressIn = useCallback(
        (e: any) => {
            onPressIn?.(e);
            scale.value = withTiming(0.97, { duration: 250 });
        },
        [onPressIn, scale]
    );

    const handlePressOut = useCallback(
        (e: any) => {
            onPressOut?.(e);
            scale.value = withTiming(1, { duration: 250 });
        },
        [onPressOut, scale]
    );

    const animatedStyle = useAnimatedStyle(() => {
        return {
            transform: [{ scale: scale.value }],
        };
    });

    return (
        <AnimatedPressableX {...props} onPressIn={handlePressIn} onPressOut={handlePressOut} style={[style, animatedStyle]}>
            {children}
        </AnimatedPressableX>
    );
});

AnimatedPressable.displayName = "AnimatedPressable";

How the problem arose:

import { StyleSheet } from "react-native-unistyles";
import { AnimatedPressable } from "../../components/butonlar/AnimatedPressable";

<AnimatedPressable style={styles.butonKayit}>
	<Text style={styles.butonKayitText}>Kayıt Ol</Text>
	<View style={styles.rightPlaceholder} />
</AnimatedPressable>

const styles = StyleSheet.create({
	butonKayit: {
        width: "100%",
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "#ffffff",
        paddingVertical: vScale(15),
        paddingHorizontal: scale(20),
        borderRadius: scale(999),
        marginBottom: vScale(10),
    },
	
	butonKayitText: {
        flex: 1,
        textAlign: "center",
        color: "#000000",
        fontFamily: "Nunito-Bold",
        fontSize: mScale(16),
    },
})

Steps to reproduce

N/A

Snack or a link to a repository

N/A

Reanimated version

4.5.0

Worklets version

0.10.0

React Native version

0.86.0

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

New Architecture (Fabric renderer)

Reanimated feature flags

None

React Native release level

None

Build type

No response

Device

No response

Host machine

None

Device model

No response

Acknowledgements

No

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[XChikuX]

I'll just leave this here: jpudysz/react-native-unistyles#1213

[MatiPl01]

I think this was fixed in #9746. We are going to release reanimated 4.5.1 this week.