<page url="/docs/native/releases/v1-0-1">
# v1.0.1

**Category**: native
**URL**: https://www.heroui.com/docs/native/releases/v1-0-1
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/native/releases/v1-0-1.mdx
> Toast race condition fix, disabled state styling with disabled modifier, backdrop style variable


***

<div className="flex items-center gap-3 mb-6">
  <span className="text-sm text-muted">April 1, 2026</span>
</div>

HeroUI Native v1.0.1 is a patch release focused on reliability and developer experience. It resolves a race condition in the Toast provider that caused stale animation values, corrects disabled-state styling across seven components to use the native `disabled:` modifier, and introduces a new `--backdrop` theme variable for overlay components.

## Installation

Update to the latest version:

<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
<Tab value="npm">
  ```bash
  npm i heroui-native
  ```

</Tab>
<Tab value="pnpm">
  ``` bash
  pnpm add heroui-native
  ```

</Tab>
<Tab value="yarn">
  ```bash
  yarn add heroui-native
  ```

</Tab>
<Tab value="bun">
  ```bash
  bun add heroui-native
  ```

</Tab>
</Tabs>

<Callout type="info">
  **Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI Native to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI Native MCP Server](/docs/native/getting-started/mcp-server).
</Callout>

## Try It Out

Experience all the v1.0.1 improvements in action with our preview app! You can explore the toast fixes, improved disabled styling, and the new backdrop variable directly on your device.

### Prerequisites

Make sure you have the latest version of [Expo Go](https://expo.dev/go) installed on your mobile device.

### How to Access

**Option 1: Scan the QR Code**

Use your device's camera or Expo Go app to scan:

<div className="flex justify-center my-6">
  <img
    width="200"
    src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/qr-code-native.png"
    alt="Expo Go QR Code"
  />
</div>

> **Note for Android users:** If scanning the QR code with your device's camera or other scanner apps redirects to a browser and shows a 404 error, open Expo Go first and use its built-in QR scanner instead.

**Option 2: Click the Link**

**[📱 Open Demo App in Expo Go](https://link.heroui.com/native-demo)**

This will automatically open the app in Expo Go if it's installed on your device.

## API Enhancements

### `--backdrop` Theme Variable

A new `--backdrop` top-level style variable has been added to the theme system, providing a dedicated color token for the dimming layer behind overlay components such as Dialog and Bottom Sheet. The default value is `oklch(0% 0 0 / 20%)` for a subtle but visible backdrop effect.

**New capability:**

```tsx
import { Dialog } from "heroui-native";

// Dialog and Bottom Sheet overlays now use bg-backdrop automatically
<Dialog>
  <Dialog.Content>
    {/* Content renders over the themed backdrop */}
  </Dialog.Content>
</Dialog>

```

The `--backdrop` variable is included in all built-in themes for both light and dark modes, and the corresponding `bg-backdrop` Tailwind utility is available for use in custom component styles.

**Related PR:** [#366](https://github.com/heroui-inc/heroui-native/pull/366)

## Style Fixes

### Disabled State Modifier

Updated disabled-state styling across seven components to use the `disabled:` modifier prefix instead of applying styles unconditionally. This ensures disabled styles (`opacity-disabled`, `pointer-events-none`) are only applied when the component is in an actual disabled state, respecting the native `disabled` modifier from Uniwind.

**Affected components:**

- [Button](/docs/native/components/button)
- [Checkbox](/docs/native/components/checkbox)
- [Input](/docs/native/components/input)
- [Menu](/docs/native/components/menu)
- [Switch](/docs/native/components/switch)
- [Tabs](/docs/native/components/tabs)
- [TagGroup](/docs/native/components/tag-group)

All `isDisabled` variant classes now use the `disabled:` modifier prefix (e.g., `disabled:opacity-disabled disabled:pointer-events-none`), ensuring proper scoping to the disabled pseudo-state and eliminating styling conflicts when the disabled state is toggled dynamically.

**Related PR:** [#361](https://github.com/heroui-inc/heroui-native/pull/361)

## Bug Fixes

This release includes fixes for the following issues:

- **[Issue #359](https://github.com/heroui-inc/heroui-native/issues/359)**: Fixed a race condition in the Toast provider where the `total` SharedValue could drift out of sync with the actual toast count. The manual increment/decrement approach was prone to stale-closure mismatches when `hide` and `show` ran in the same tick or when auto-dismiss raced with a manual hide. The `total` value is now derived from `toasts.length` via a `useEffect`, ensuring animated interpolations (opacity, scale, translateY) always reflect the real toast count.

- **[Issue #356](https://github.com/heroui-inc/heroui-native/issues/356)**: Resolved disabled-state styles being applied unconditionally when `isDisabled` was true, preventing developers from theming or customizing the disabled appearance. All seven affected components now use the `disabled:` modifier prefix, correctly scoping styles to the disabled pseudo-state.

**Related PRs:**

- [#360](https://github.com/heroui-inc/heroui-native/pull/360)
- [#361](https://github.com/heroui-inc/heroui-native/pull/361)

## Updated Documentation

The following documentation pages have been updated to reflect the changes in this release:

- [Colors](/docs/native/getting-started/colors) - Added the new `--backdrop` variable to the color reference
- [Theming](/docs/native/getting-started/theming) - Updated theming guide with the new `--backdrop` variable documentation

## Links

- [Component Documentation](../components)
- [GitHub Repository](https://github.com/heroui-inc/heroui-native)

## Contributors

Thanks to everyone who contributed to this release!
</page>