fix: group-scoped context not applying

src/styled.tsx

@@ -112,7 +112,7 @@ export function styled<
     const store = useContext(StoreContext);
     const scopedGroupContext = useContext(ScopedGroupContext);
 
-    const { className, allClasses, isComponent, isParent } = withClassNames({
+    const { className, allClasses, isGroupScoped, isParent } = withClassNames({
       baseClassName,
       propClassName,
       twClassName,
@@ -125,7 +125,7 @@ export function styled<
 
     const { hover, focus, active, ...handlers } = useInteraction({
       className: allClasses,
-      isComponent,
+      isGroupScoped,
       isParent,
       store,
       ...componentProps,
@@ -167,7 +167,7 @@ export function styled<
       ref,
     } as unknown as T);
 
-    if (isComponent) {
+    if (isGroupScoped) {
       return createElement(ScopedGroupContext.Provider, {
         children: element,
         value: {

src/use-interaction.ts

@@ -18,12 +18,12 @@ export interface Interaction extends PressableProps {
 
 export interface UseInteractionOptions extends PressableProps {
   className?: string;
-  isComponent: boolean;
+  isGroupScoped: boolean;
   isParent: boolean;
 }
 
 export function useInteraction({
-  isComponent,
+  isGroupScoped,
   isParent,
   focusable = true,
   onFocus,
@@ -113,7 +113,7 @@ export function useInteraction({
     focus,
   };
 
-  const isComponentOrParent = isComponent || isParent;
+  const isComponentOrParent = isGroupScoped || isParent;
 
   if (isComponentOrParent || className.includes("focus:")) {
     interaction.onBlur = handleBlur;

src/with-class-names.ts

@@ -9,7 +9,7 @@ export interface WithClassNames {
   classProps?: string[];
 }
 
-const isComponentRegex = /(?:^|\s)(component)(?:$|\s)/gi;
+const isGroupScopedRegex = /(?:^|\s)(component)(?:$|\s)/gi;
 const isParentRegex = /(?:^|\s)(parent)(?:$|\s)/gi;
 
 export function withClassNames({
@@ -29,7 +29,7 @@ export function withClassNames({
     .filter(Boolean)
     .join(" ");
 
-  const isComponent = isComponentRegex.test(className);
+  const isGroupScoped = isGroupScopedRegex.test(className);
   const isParent = isParentRegex.test(className);
 
   const allClasses = [className];
@@ -44,7 +44,7 @@ export function withClassNames({
   return {
     className,
     allClasses: allClasses.join(" "),
-    isComponent,
+    isGroupScoped,
     isParent,
   };
 }

website/docs/core-concepts/quirks.md

@@ -4,6 +4,12 @@ While NativeWind is stable, its developers still consider it a work-in-progress
 
 We are open to community assistance in helping us resolving these issues.
 
+## Explicit styles
+
+React Native has various issues when conditionally applying styles. To prevent these issues it's best to declare all styles.
+
+For example, instead of only apply a text color for dark mode, provide both a light and dark mode text color.
+
 ## Dp vs px
 
 React Native's default unit is device-independent pixels (dp) while the web's default is pixels (px). These two units are different, however NativeWind treats them as if they are equalivant. Additionally, the NativeWind's compiler requires a unit for most numeric values forcing some styles to use a `px` unit.

website/docs/core-concepts/states.md

@@ -1,8 +1,8 @@
 # Hover, Focus and Other States
 
-:::info
-If you are using CSS on web, please refer to the [offical Tailwind CSS docs](https://tailwindcss.com/docs/hover-focus-and-other-states)
-:::
+NativeWind polyfills a subset of the Tailwind states for React Native by adding event listeners on your components. This documentation only applies when compiling for native or when `webOutput` is set to `native`.
+
+When using CSS on web, please refer to the [offical Tailwind CSS docs](https://tailwindcss.com/docs/hover-focus-and-other-states).
 
 ## Hover, focus, and active
 
@@ -12,11 +12,38 @@ If you are using NativeWind you need to ensure these listeners are passed to the
 
 The supported psuedo-classes and their related listeners are:
 
-| Variant  | Listeners                            |
-| -------- | ------------------------------------ |
-| `hover`  | `onHoverIn`, `onHoverOut`            |
-| `focus`  | `onBlur`, `onFocus`                  |
-| `active` | `onPress`, `onPressIn`, `onPressOut` |
+| Variant  | Event Listeners           |
+| -------- | ------------------------- |
+| `hover`  | `onHoverIn`, `onHoverOut` |
+| `focus`  | `onBlur`, `onFocus`       |
+| `active` | `onPressIn`, `onPressOut` |
+
+```SnackPlayer name=States
+import { Text, Pressable } from 'react-native';
+import { styled } from 'nativewind';
+
+const StyledPressable = styled(Pressable)
+const StyledText = styled(Text)
+
+const App = () => {
+  return (
+    <StyledPressable className={`
+      flex-1
+      items-center
+      justify-center
+      hover:bg-slate-300
+      active:bg-slate-500
+    `}>
+      <StyledText
+        selectable={false}
+        className="text-slate-800"
+      >
+        Hover and click me! 🎉
+      </StyledText>
+    </StyledPressable>
+  );
+}
+```
 
 ## Styling based on parent state
 
@@ -28,6 +55,33 @@ The difference between `group` and `group-scoped` is that components under a `gr
 
 `group` and `group-scoped` both work with the `hover`/`active`/`focus` psuedo-classes.
 
+```SnackPlayer name=States
+import { Text, Pressable } from 'react-native';
+import { styled } from 'nativewind';
+
+const StyledPressable = styled(Pressable)
+const StyledText = styled(Text)
+
+const App = () => {
+  return (
+    <StyledPressable className={`
+      flex-1
+      items-center
+      justify-center
+      group-scoped
+    `}>
+      <StyledText className={`
+        text-slate-800
+        group-scoped-hover:text-blue-500
+        group-scoped-active:text-red-500
+      `}>
+        Hover and click me! 🎉
+      </StyledText>
+    </StyledPressable>
+  );
+}
+```
+
 ## Responsive breakpoints
 
 To style an element at a specific breakpoint, use responsive modifiers like `md` and `lg`.