React Native 2026 Nativewind Setup

babel.config.js

module.exports = function (api) {
  api.cache(true)
  return {
    presets: [
      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
      'nativewind/babel',
    ],
    plugins: [
      // If using Reanimated
      'react-native-reanimated/plugin',
    ],
  }
}

metro.config.js

const { getDefaultConfig } = require('expo/metro-config')
const { withNativeWind } = require('nativewind/metro')

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './global.css' })

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom base styles */
@layer base {
  /* Default body styles */
  * {
    @apply border-border;
  }
}

/* Custom component classes */
@layer components {
  .btn-primary {
    @apply bg-primary-500 text-white px-4 py-2 rounded-lg font-medium active:bg-primary-600;
  }

  .card {
    @apply bg-white dark:bg-gray-800 rounded-xl p-4 shadow-card;
  }

  .input {
    @apply bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-3 text-base;
  }
}

/* Custom utilities */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

App Setup

// src/app/_layout.tsx
import '../global.css'
import { Stack } from 'expo-router'
import { useColorScheme } from 'nativewind'

export default function RootLayout() {
  const { colorScheme, setColorScheme } = useColorScheme()

  return (
    <Stack
      screenOptions={{
        headerShown: false,
        contentStyle: {
          backgroundColor: colorScheme === 'dark' ? '#0F172A' : '#FFFFFF',
        },
      }}
    />
  )
}

Component Patterns

Basic Components

import { View, Text, Pressable } from 'react-native'

export function Button({ title, onPress, variant = 'primary' }) {
  const variants = {
    primary: 'bg-primary-500 active:bg-primary-600',
    secondary: 'bg-gray-100 dark:bg-gray-800 active:bg-gray-200',
    outline: 'border-2 border-primary-500 bg-transparent',
  }

  const textVariants = {
    primary: 'text-white',
    secondary: 'text-gray-900 dark:text-white',
    outline: 'text-primary-500',
  }

  return (
    <Pressable
      className={`px-6 py-3 rounded-xl items-center justify-center ${variants[variant]}`}
      onPress={onPress}
    >
      <Text className={`font-semibold text-base ${textVariants[variant]}`}>
        {title}
      </Text>
    </Pressable>
  )
}

Card Component

import { View, Text, Image, Pressable } from 'react-native'
import { Ionicons } from '@expo/vector-icons'

interface LessonCardProps {
  title: string
  duration: string
  completed: boolean
  onPress: () => void
}

export function LessonCard({ title, duration, completed, onPress }: LessonCardProps) {
  return (
    <Pressable
      className="flex-row items-center p-4 bg-white dark:bg-gray-800 rounded-2xl shadow-soft active:scale-[0.98] transition-transform"
      onPress={onPress}
    >
      <View className="w-14 h-14 rounded-xl bg-primary-100 dark:bg-primary-900 items-center justify-center">
        <Ionicons
          name="book"
          size={24}
          className="text-primary-500"
        />
      </View>

      <View className="flex-1 ml-4">
        <Text className="text-base font-semibold text-gray-900 dark:text-white">
          {title}
        </Text>
        <Text className="text-sm text-gray-500 dark:text-gray-400 mt-1">
          {duration}
        </Text>
      </View>

      {completed && (
        <View className="w-8 h-8 rounded-full bg-success items-center justify-center">
          <Ionicons name="checkmark" size={18} color="white" />
        </View>
      )}
    </Pressable>
  )
}

Dark Mode Toggle

import { Pressable } from 'react-native'
import { useColorScheme } from 'nativewind'
import { Ionicons } from '@expo/vector-icons'

export function ThemeToggle() {
  const { colorScheme, toggleColorScheme } = useColorScheme()

  return (
    <Pressable
      className="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-800 items-center justify-center"
      onPress={toggleColorScheme}
    >
      <Ionicons
        name={colorScheme === 'dark' ? 'sunny' : 'moon'}
        size={20}
        className="text-gray-600 dark:text-gray-300"
      />
    </Pressable>
  )
}

Responsive Design

import { View, Text } from 'react-native'

export function ResponsiveGrid({ items }) {
  return (
    <View className="flex-row flex-wrap -mx-2">
      {items.map((item) => (
        <View
          key={item.id}
          // Responsive width: full on mobile, half on tablet, third on desktop
          className="w-full sm:w-1/2 lg:w-1/3 px-2 mb-4"
        >
          <View className="bg-white dark:bg-gray-800 rounded-xl p-4">
            <Text className="font-semibold">{item.title}</Text>
          </View>
        </View>
      ))}
    </View>
  )
}

Conditional Styling with clsx

npm install clsx

import { View, Text, Pressable } from 'react-native'
import clsx from 'clsx'

interface ChipProps {
  label: string
  selected: boolean
  onPress: () => void
}

export function Chip({ label, selected, onPress }: ChipProps) {
  return (
    <Pressable
      className={clsx(
        'px-4 py-2 rounded-full border-2 transition-colors',
        selected
          ? 'bg-primary-500 border-primary-500'
          : 'bg-transparent border-gray-300 dark:border-gray-600'
      )}
      onPress={onPress}
    >
      <Text
        className={clsx(
          'font-medium',
          selected ? 'text-white' : 'text-gray-700 dark:text-gray-300'
        )}
      >
        {label}
      </Text>
    </Pressable>
  )
}

Custom Utilities with CVA

npm install class-variance-authority

import { cva, type VariantProps } from 'class-variance-authority'
import { Pressable, Text } from 'react-native'

const buttonVariants = cva(
  'flex-row items-center justify-center rounded-xl font-semibold',
  {
    variants: {
      variant: {
        primary: 'bg-primary-500 active:bg-primary-600',
        secondary: 'bg-gray-100 dark:bg-gray-800',
        outline: 'border-2 border-primary-500 bg-transparent',
        ghost: 'bg-transparent',
      },
      size: {
        sm: 'px-3 py-2 text-sm',
        md: 'px-4 py-3 text-base',
        lg: 'px-6 py-4 text-lg',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
)

interface ButtonProps extends VariantProps<typeof buttonVariants> {
  title: string
  onPress: () => void
}

export function Button({ title, variant, size, onPress }: ButtonProps) {
  return (
    <Pressable className={buttonVariants({ variant, size })} onPress={onPress}>
      <Text
        className={clsx(
          'font-semibold',
          variant === 'primary' ? 'text-white' : 'text-gray-900 dark:text-white'
        )}
      >
        {title}
      </Text>
    </Pressable>
  )
}

TypeScript Support

types.d.ts

/// <reference types="nativewind/types" />

declare module 'nativewind' {
  interface NativeWindStyleSheet {
    // Add custom utilities if needed
  }
}

VS Code Setup

.vscode/settings.json

{
  "tailwindCSS.classAttributes": ["className", "class", "tw"],
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "editor.quickSuggestions": {
    "strings": true
  }
}

Deliverables

For: $ARGUMENTS

Provide:

1. Installation commands
2. Configuration files
3. Theme customization
4. Component examples
5. Dark mode setup
6. Responsive patterns
7. TypeScript configuration