codyswanngt/gluestack-nativewind

Gluestack NativeWind Design Patterns

This skill enforces constrained, opinionated styling patterns that reduce decision fatigue, improve performance, enable consistent theming, and limit the solution space to canonical patterns.

Core Principles

1. Gluestack components over React Native primitives - Gluestack wraps RN with theming, accessibility, and cross-platform consistency
2. Semantic tokens over arbitrary values - Tokens encode intent, not just appearance
3. className over inline styles - Inline styles bypass optimization and consistency
4. Spacing scale over pixel values - Arbitrary values create unsustainable exceptions
5. Remove dead code - Unused patterns mislead AI and increase cognitive load

When to Use This Skill

• Creating new components with styling
• Reviewing existing component styles
• Refactoring styles to follow the design system
• Fixing styling inconsistencies
• Adding dark mode support
• Theming components

Rule 1: Gluestack Components Over React Native Primitives

Always use Gluestack components instead of direct React Native imports:

| React Native | Gluestack Equivalent | | -------------------------------------- | -------------------------------------------------- | | View from "react-native" | Box from "@/components/ui/box" | | Text from "react-native" | Text from "@/components/ui/text" | | TouchableOpacity from "react-native" | Pressable from "@/components/ui/pressable" | | ScrollView from "react-native" | ScrollView from "@/components/ui/scroll-view" | | Image from "react-native" | Image from "@/components/ui/image" | | TextInput from "react-native" | Input, InputField from "@/components/ui/input" | | FlatList from "react-native" | FlashList from "@shopify/flash-list" |

Correct Pattern

import { Box } from "@/components/ui/box";
import { Text } from "@/components/ui/text";
import { Pressable } from "@/components/ui/pressable";

const Component = () => (
  <Box className="p-4">
    <Text className="text-typography-900">Hello</Text>
    <Pressable onPress={handlePress}>
      <Text>Press Me</Text>
    </Pressable>
  </Box>
);

Incorrect Pattern

import { View, Text, TouchableOpacity } from "react-native";

const Component = () => (
  <View style={{ padding: 16 }}>
    <Text style={{ color: "#333" }}>Hello</Text>
    <TouchableOpacity onPress={handlePress}>
      <Text>Press Me</Text>
    </TouchableOpacity>
  </View>
);

Exceptions

• Platform-specific code where RN primitives are explicitly required
• Deep integration with native modules
• Performance-critical paths where wrapper overhead matters (rare, must document)

Rule 2: Semantic Color Tokens Over Raw Values

Use Gluestack semantic tokens instead of raw Tailwind colors:

| Instead of | Use | | ------------------ | --------------------- | | text-red-500 | text-error-500 | | text-green-500 | text-success-500 | | text-yellow-500 | text-warning-500 | | text-blue-500 | text-info-500 | | text-gray-500 | text-typography-500 | | bg-blue-600 | bg-primary-600 | | border-gray-200 | border-outline-200 | | #DC2626 (inline) | text-error-600 |

Available Semantic Token Categories

| Token | Purpose | Scale | | -------------------- | ---------------------------------------- | ----- | | primary-{0-950} | Brand identity, key interactive elements | 0-950 | | secondary-{0-950} | Secondary actions, supporting elements | 0-950 | | tertiary-{0-950} | Tertiary accents | 0-950 | | error-{0-950} | Validation errors, destructive actions | 0-950 | | success-{0-950} | Positive feedback, completions | 0-950 | | warning-{0-950} | Alerts, attention-required states | 0-950 | | info-{0-950} | Informational content | 0-950 | | typography-{0-950} | Text colors | 0-950 | | outline-{0-950} | Border colors | 0-950 | | background-{0-950} | Background colors | 0-950 |

Special Background Tokens

Use state-based background tokens:

• bg-background-error - Error state backgrounds
• bg-background-warning - Warning state backgrounds
• bg-background-success - Success state backgrounds
• bg-background-muted - Muted/disabled backgrounds
• bg-background-info - Informational backgrounds

Correct Pattern

<Box className="bg-error-500">
  <Text className="text-typography-0">Error message</Text>
</Box>

<Box className="border border-outline-300 bg-background-50">
  <Text className="text-success-600">Success!</Text>
</Box>

Incorrect Pattern

<Box className="bg-red-500">
  <Text className="text-white">Error message</Text>
</Box>

<Box style={{ backgroundColor: '#DC2626' }}>
  <Text style={{ color: 'green' }}>Success!</Text>
</Box>

For complete token reference, see references/color-tokens.md.

Rule 3: No Inline Styles

Avoid inline style props when className can achieve the same result.

Resolution Hierarchy (in order of preference)

1. className utilities - Use existing Tailwind/NativeWind classes
2. Gluestack component variants - Use built-in component variants
3. tva (Tailwind Variant Authority) - Create reusable variant patterns
4. NativeWind interop - Enable className on third-party components
5. Inline styles - Only as absolute last resort with documented justification

Correct Pattern

<Box className="w-20 h-20 rounded-full bg-background-100" />

<Text className="text-lg font-bold text-typography-900" />

Incorrect Pattern

<Box
  style={{
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: "rgba(255, 255, 255, 0.1)",
  }}
/>

Acceptable Exceptions

Inline styles are acceptable for:

1. Dynamic values - Values computed at runtime (e.g., animation values, safe area insets)
2. Third-party component requirements - Components that don't support className
3. Platform-specific overrides - When Platform.select is needed

// Acceptable: dynamic value from hook
<Box style={{ paddingBottom: bottomInset }} />

// Acceptable: animation value
<Animated.View style={{ transform: [{ translateX: animatedValue }] }} />

Rule 4: Spacing Scale Adherence

Use only values from the standard spacing scale. Arbitrary values create maintenance burden.

Allowed Spacing Values

| Class | Size | | ----- | ----- | | 0 | 0px | | 0.5 | 2px | | 1 | 4px | | 1.5 | 6px | | 2 | 8px | | 2.5 | 10px | | 3 | 12px | | 3.5 | 14px | | 4 | 16px | | 5 | 20px | | 6 | 24px | | 7 | 28px | | 8 | 32px | | 9 | 36px | | 10 | 40px | | 11 | 44px | | 12 | 48px | | 14 | 56px | | 16 | 64px | | 20 | 80px | | 24 | 96px | | 28 | 112px | | 32 | 128px | | 36 | 144px | | 40 | 160px | | 44 | 176px | | 48 | 192px | | 52 | 208px | | 56 | 224px | | 60 | 240px | | 64 | 256px | | 72 | 288px | | 80 | 320px | | 96 | 384px |

Prohibited Patterns

• Arbitrary values: p-[13px], m-[27px], gap-[15px]
• Non-scale decimals: p-2.7, m-4.3

Correct Pattern

<Box className="p-4 m-2 gap-3" />
<Box className="px-6 py-4 mt-8" />

Incorrect Pattern

<Box className="p-[13px] m-[27px]" />
<Box style={{ padding: 13, margin: 27 }} />

For complete spacing reference, see references/spacing-scale.md.

Rule 5: Dark Mode Using CSS Variables

Use the CSS variables approach with dark: prefix for dark mode support.

Correct Pattern

<Box className="bg-background-0 dark:bg-background-950" />
<Text className="text-typography-900 dark:text-typography-0" />

Component-Level Dark Mode

const CardView = ({ isDark }: { readonly isDark: boolean }) => (
  <Box className={isDark ? "bg-background-950" : "bg-background-0"}>
    <Text className={isDark ? "text-typography-0" : "text-typography-900"}>
      Content
    </Text>
  </Box>
);

Rule 6: Gluestack Sub-Component Pattern

Use Gluestack's composable sub-component pattern for complex components.

Correct Pattern

<Button action="primary" size="md">
  <ButtonText>Click Me</ButtonText>
  <ButtonIcon as={ChevronRightIcon} />
</Button>

<Input variant="outline" size="md">
  <InputField placeholder="Enter text" />
  <InputSlot>
    <InputIcon as={SearchIcon} />
  </InputSlot>
</Input>

<Select>
  <SelectTrigger>
    <SelectInput placeholder="Select option" />
    <SelectIcon as={ChevronDownIcon} />
  </SelectTrigger>
  <SelectPortal>
    <SelectBackdrop />
    <SelectContent>
      <SelectItem label="Option 1" value="1" />
      <SelectItem label="Option 2" value="2" />
    </SelectContent>
  </SelectPortal>
</Select>

Incorrect Pattern

// Missing sub-components
<Button>Click Me</Button>

// Text must be wrapped in ButtonText
<Button>
  Click Me  {/* Will not render correctly */}
</Button>

Rule 7: Variant-Based Styling with tva

For components with multiple style variants, use tva (Tailwind Variant Authority).

Correct Pattern

import { tva } from "@gluestack-ui/nativewind-utils/tva";

const cardStyles = tva({
  base: "rounded-lg p-4",
  variants: {
    variant: {
      elevated: "bg-background-0 shadow-hard-2",
      outlined: "bg-transparent border border-outline-200",
      filled: "bg-background-50",
    },
    size: {
      sm: "p-2",
      md: "p-4",
      lg: "p-6",
    },
  },
  defaultVariants: {
    variant: "elevated",
    size: "md",
  },
});

const Card = ({ variant, size, className }: CardProps) => (
  <Box className={cardStyles({ variant, size, className })} />
);

Rule 8: className Merging for Custom Components

Allow className override in custom components using string concatenation.

Correct Pattern

interface BoxCardProps {
  readonly className?: string;
  readonly children: React.ReactNode;
}

const BoxCard = ({ className, children }: BoxCardProps) => (
  <Box className={`rounded-lg bg-background-0 p-4 ${className ?? ""}`}>
    {children}
  </Box>
);

Validation

To validate styling compliance, run:

python3 .claude/skills/gluestack-nativewind/scripts/validate_styling.py [path]

The script detects:

1. Direct React Native component imports with Gluestack equivalents
2. Raw color values without semantic tokens
3. Inline style objects where className could be used
4. Arbitrary bracket notation values
5. Non-scale spacing values

Escalation Guidance

When a design request cannot be satisfied with existing patterns:

1. Push back early - Explain performance and maintenance implications
2. Propose alternatives - Map to existing tokens or suggest new semantic tokens
3. Add to design system - If truly needed, add token to tailwind.config.js
4. Document exception - If inline style is unavoidable, add JSDoc explaining why

Reference Documentation

For detailed mappings and complete token lists:

• references/component-mapping.md - Gluestack equivalents for React Native primitives
• references/color-tokens.md - Complete semantic color token reference
• references/spacing-scale.md - Allowed spacing values with pixel equivalents