Fix html.button staying unclickable on Android after toggling disabled back to false (#491)

packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js

@@ -89,12 +89,23 @@ export function createStrictDOMComponent<T, P extends StrictProps>(
 
     // Component-specific props
 
+    // Forward `disabled` to the Pressable only when it is an explicit boolean,
+    // so that toggling `true` <-> `false` resets the native view's enabled
+    // state. On Android, re-enabling by dropping the prop (`true` -> `undefined`)
+    // leaves `accessibilityState.disabled` unset and the native `enabled` state
+    // stays false, making the Pressable unclickable. Emitting only for explicit
+    // booleans keeps elements that never opt into `disabled` unchanged; the
+    // `true` -> `undefined` transition is intentionally not covered, but a
+    // controlled `disabled` toggles `true` <-> `false`.
     if (NativeComponent === ReactNative.Pressable) {
       if (props.disabled === true) {
         // $FlowFixMe[react-rule-hook-mutation]
         nativeProps.disabled = true;
         // $FlowFixMe[react-rule-hook-mutation]
         nativeProps.focusable = false;
+      } else if (props.disabled === false) {
+        // $FlowFixMe[react-rule-hook-mutation]
+        nativeProps.disabled = false;
       }
     }
 

packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap

@@ -216,6 +216,22 @@ exports[`<html.*> (native polyfills) polyfills: layout default flex layout: flex
 </ViewNativeComponent>
 `;
 
+exports[`<html.*> (native polyfills) polyfills: props <button> "disabled" prop 1`] = `
+<Pressable
+  disabled={true}
+  focusable={false}
+  ref={[Function]}
+  role="button"
+  style={
+    {
+      "borderWidth": 1,
+      "boxSizing": "content-box",
+      "position": "static",
+    }
+  }
+/>
+`;
+
 exports[`<html.*> (native polyfills) polyfills: props <img> "src" prop with loading props 1`] = `
 <Image
   crossOrigin="use-credentials"

packages/react-strict-dom/tests/html/html-test.native.js

@@ -500,6 +500,31 @@ describe('<html.*> (native polyfills)', () => {
         expect(root.toJSON()).toMatchSnapshot();
       });
     });
+
+    describe('<button>', () => {
+      test('"disabled" prop', () => {
+        let root;
+        act(() => {
+          root = create(<html.button disabled={true} />);
+        });
+        expect(root.toJSON()).toMatchSnapshot();
+      });
+
+      // Re-enabling must emit an explicit "disabled={false}" rather than
+      // dropping the prop. On Android, leaving "disabled" unset keeps the
+      // native view's enabled state false and the button stays unclickable.
+      test('"disabled" prop resets to an explicit false when re-enabled', () => {
+        let root;
+        act(() => {
+          root = create(<html.button disabled={true} />);
+        });
+        expect(root.toJSON().props.disabled).toBe(true);
+        act(() => {
+          root.update(<html.button disabled={false} />);
+        });
+        expect(root.toJSON().props.disabled).toBe(false);
+      });
+    });
   });
 
   describe('polyfills: inheritence', () => {