Button remains unclickable after disabled state changes #491

import { useState } from "react";
import { Button, Pressable, Text, View } from "react-native";
import { css, html } from "react-strict-dom";

export default function RootLayout() {
  const [buttonDisabled, setButtonDisabled] = useState(false);
  const [rnPresses, setRnPresses] = useState(0);
  const [rsdPresses, setRsdPresses] = useState(0);

  return (
    <View
      style={{ flex: 1, backgroundColor: "white", alignItems: "center", justifyContent: "center" }}
    >
      <Button
        title={"Toggle button disabled - now: " + buttonDisabled.toString()}
        onPress={() => {
          setButtonDisabled((prev) => !prev);
        }}
      />
      <View>
        <Text>RN Pressable - {rnPresses} presses</Text>
        <Pressable
          disabled={buttonDisabled}
          style={({ pressed }) => [
            { backgroundColor: "lightgreen", padding: 16 },
            pressed && { opacity: 0.5 },
          ]}
          onPress={() => {
            setRnPresses((prev) => prev + 1);
          }}
        >
          <Text style={{ backgroundColor: "black", color: "white", padding: 8 }}>Press me</Text>
        </Pressable>
      </View>
      <View>
        <Text>RSD Button - {rsdPresses} presses</Text>
        <html.button
          disabled={buttonDisabled}
          style={styles.button}
          onClick={() => {
            setRsdPresses((prev) => prev + 1);
          }}
        >
          <html.span style={styles.buttonText}>Press me</html.span>
        </html.button>
      </View>
    </View>
  );
}

const styles = css.create({
  button: {
    backgroundColor: "lightblue",
    opacity: {
      default: 1,
      ":active": 0.5,
    },
    padding: 16,
  },
  buttonText: {
    backgroundColor: "black",
    color: "white",
    padding: 8,
  },
});