Disabled style not working on pressable react native web

[claudesortwell]

What happened?

 <Pressable
            onPress={() => {
              console.log("pressed");
            }}
            disabled={true}
            className="bg-red-400 w-60 center justify-center items-center rounded-md border p-2 px-3 disabled:opacity-10"
          >
            <Text className="text-secondary-950 font-medium text-base select-none">
              Buy Now
            </Text>
          </Pressable>

Steps to Reproduce

1. Changing disabled to true or false has no effect on styles for web

Snack or Repository Link

see above

Uniwind version

1.2.7

React Native Version

0.83.1

Platforms

Web

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none

[Brentlok]

More issues on RNW mentioned here: #348 (comment)

[Brentlok]

Thanks for reporting this

Disabled styles dont work on web either for pressable

RNW uses plain div for Pressable so :disabled pseudo class is not working here, we can fix this by overwriting disabled variant to support both :disabled and [aria-disabled="true"] which RNW is using to mark element as disabled

No matter what style I try i cant change the place holder text style on web

For the TextInput, we've missed resolving color for placeholderTextColor based on className, it will also be addressed

Image classNames does not work for web, im not seeing the styles in inspect element

When you're using require RNW automatically injects inline width and height which has higher priority then className, but this can be omitted with a simple trick. We did something like that in unistyles

[Brentlok]

Resolved in #349