Skip to content

group-disabled: (and likely other group attribute variants) is always applied #297

@hayata-suenaga

Description

@hayata-suenaga

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

group-disabled: (and likely other group attribute variants) styles are always applied on native, regardless of whether the parent component actually has disabled={true}.

In the example below, the text renders red even though the Pressable has no disabled prop:

<Pressable className="group">
  <Text className="group-disabled:text-red-500">Hello World</Text>
</Pressable>

Library version

3.0.4

Environment info

System:
  OS: macOS 26.3.1
  CPU: (12) arm64 Apple M2 Max
  Memory: 20.41 GB / 96.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.14.0
    path: /Users/hayatasuenaga/.nvm/versions/node/v24.14.0/bin/node
  Yarn: Not Found
  npm:
    version: 11.9.0
    path: /Users/hayatasuenaga/.nvm/versions/node/v24.14.0/bin/npm
  Watchman:
    version: 2025.05.26.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.28238.7.2523.14688667
  Xcode:
    version: 26.3/17C529
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  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: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

Set up an Expo project with nativewind@5.0.0-preview.2 and react-native-css@3.0.4
Render the following in any screen:

import { Pressable, Text, View } from "react-native";
export default function Screen() {
  return (
    <View className="flex-1 items-center justify-center">
      <Pressable className="group">
        <Text className="group-disabled:text-red-500">Hello World</Text>
      </Pressable>
    </View>
  );
}

Run on iOS or Android (native — this is a native-only issue)
Observe that "Hello World" renders in red, even though disabled is not set on the Pressable

Reproducible example repository

https://github.com/hayata-suenaga/nativewind-bug

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions