Skip to content

Button outline variant with condition not work in Android platform #363

@sanketpipaliya208

Description

@sanketpipaliya208

Before submitting a new issue

  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.

Bug summary

Screen_Recording_20260327_220501_Expo.Go.mp4
  • Use the example below and run it on Android, and click the button several times to see the bug
    • It happened when the condition in the variant with the outline, like in the example
import { Button } from "heroui-native";
import React, { useState } from "react";

export default function SignInPage() {
  const [showPass, setShowPass] = useState<boolean>(false);

  return (
    <Button
      variant={showPass ? "secondary" : "outline"}
      onPress={() => setShowPass(!showPass)}>
      Text
    </Button>
  );
}

Library version

1.0.0

Environment info

System:
  OS: macOS 15.7.2
  CPU: (10) arm64 Apple M2 Pro
  Memory: 207.53 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.13.1
    path: /Users/codeedocuserm2pro/.nvm/versions/node/v24.13.1/bin/node
  Yarn:
    version: 1.22.22
    path: /Users/codeedocuserm2pro/.nvm/versions/node/v24.13.1/bin/yarn
  npm:
    version: 11.12.0
    path: /Users/codeedocuserm2pro/.nvm/versions/node/v24.13.1/bin/npm
  Watchman:
    version: 2025.12.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.1
      - iOS 26.1
      - macOS 26.1
      - tvOS 26.1
      - visionOS 26.1
      - watchOS 26.1
  Android SDK:
    API Levels:
      - "33"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 35.0.1
      - 36.0.0
      - 36.0.0
    System Images:
      - android-35 | Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.25410.109.2511.13752376
  Xcode:
    version: 26.1/17B55
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.3
    wanted: ^20.1.3
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.2
    wanted: 0.83.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.84.1 is now available (your project is running on v0.83.2).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.84.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.83.2&to=0.84.1
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Steps to reproduce

  1. Click the button several times to see the bug in below example
import { Button } from "heroui-native";
import React, { useState } from "react";

export default function SignInPage() {
  const [showPass, setShowPass] = useState<boolean>(false);

  return (
    <Button
      variant={showPass ? "secondary" : "outline"}
      onPress={() => setShowPass(!showPass)}>
      Text
    </Button>
  );
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions