NativeWind Component Generator

Category: Mobile Development Version: 1.0.0 Dependencies: React Native, Expo, NativeWind, Tailwind CSS

Purpose

Generate React Native components styled with NativeWind (Tailwind CSS) for cross-platform mobile applications.

When to Use

• Creating new React Native components
• Converting Figma designs to code (Phase 3)
• Building responsive Phone/Tablet variants
• Rapid prototyping with utility classes

NativeWind Best Practices

Utility-First Styling

// ✅ Preferred: NativeWind
<View className="flex-1 bg-white p-4 rounded-lg shadow-md">
  <Text className="text-xl font-bold text-gray-900">Hello</Text>
</View>

// ❌ Avoid: Manual StyleSheet
<View style={styles.container}>
  <Text style={styles.title}>Hello</Text>
</View>

Responsive Design

<View className={`p-4 ${isTablet ? 'flex-row' : 'flex-col'}`}>
  <Text className={isTablet ? 'text-2xl' : 'text-lg'}>Responsive</Text>
</View>

Dark Mode

<View className="bg-white dark:bg-gray-900">
  <Text className="text-gray-900 dark:text-white">Dark Mode Ready</Text>
</View>

Pressable States

<Pressable
  className={({ pressed }) => `p-4 rounded-lg ${pressed ? 'bg-gray-200' : 'bg-white'}`}
>
  <Text>Pressable</Text>
</Pressable>

Component Templates

Screen Component

// UserProfile.phone.tsx
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

interface UserProfileProps {
  userId: string;
  onEdit?: () => void;
}

export const UserProfilePhone: React.FC<UserProfileProps> = ({ onEdit }) => (
  <SafeAreaView className="flex-1 bg-gray-50">
    <ScrollView className="flex-1">
      <View className="bg-white px-4 py-6 items-center">
        <Text className="text-2xl font-bold text-gray-900">John Doe</Text>
        <Text className="text-base text-gray-500">john@example.com</Text>
      </View>
      <View className="p-4">
        <TouchableOpacity
          onPress={onEdit}
          className="bg-blue-500 px-6 py-4 rounded-lg active:bg-blue-600"
        >
          <Text className="text-white text-center font-semibold">Edit Profile</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </SafeAreaView>
);

Form Component

// LoginForm.tsx
import { View, Text, TextInput, TouchableOpacity, ActivityIndicator } from 'react-native';

interface LoginFormProps {
  onSubmit: (email: string, password: string) => Promise<void>;
}

export const LoginForm: React.FC<LoginFormProps> = ({ onSubmit }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  return (
    <View className="bg-white rounded-2xl p-6 shadow-xl">
      <Text className="text-2xl font-bold text-gray-900 mb-6">Welcome Back</Text>

      <View className="mb-4">
        <Text className="text-sm font-medium text-gray-700 mb-2">Email</Text>
        <TextInput
          value={email}
          onChangeText={setEmail}
          className="bg-gray-50 border border-gray-300 rounded-lg px-4 py-3"
        />
      </View>

      <TouchableOpacity
        onPress={() => onSubmit(email, password)}
        disabled={loading}
        className={`py-4 rounded-lg ${loading ? 'bg-gray-300' : 'bg-blue-500'}`}
      >
        {loading ? <ActivityIndicator color="white" /> : (
          <Text className="text-white text-center font-semibold">Sign In</Text>
        )}
      </TouchableOpacity>
    </View>
  );
};

Common Patterns

Quick Patterns

// List Item
<View className="bg-white border-b border-gray-200 p-4">
  <Text className="text-base font-semibold">Title</Text>
</View>

// Card with Shadow
<View className="bg-white rounded-xl shadow-lg p-6 mb-4" />

// Badge
<View className="bg-blue-100 px-3 py-1 rounded-full">
  <Text className="text-blue-800 text-xs font-medium">New</Text>
</View>

// Flex Row
<View className="flex-row justify-between items-center">
  <Text>Left</Text>
  <Text>Right</Text>
</View>

File Structure

components/
├── UserProfile/
│   ├── UserProfile.tsx          # Main (shared logic)
│   ├── UserProfile.phone.tsx    # Phone layout
│   ├── UserProfile.tablet.tsx   # Tablet layout
│   └── index.ts                 # Barrel export

Tailwind Config

// tailwind.config.js
module.exports = {
  content: ["./App.{js,tsx}", "./src/**/*.{js,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: { 500: '#0ea5e9', 600: '#0284c7' },
        success: { 500: '#10b981' },
        error: { 500: '#ef4444' }
      }
    }
  }
};

Success Criteria

• ✅ Utility classes for 90%+ of styling
• ✅ Responsive across Phone/Tablet
• ✅ TypeScript types for all props
• ✅ Proper accessibility labels
• ✅ Minimal StyleSheet usage
• ✅ Unit tests included

References: NativeWind | Tailwind CSS Version: 1.0.0 | Last Updated: 2025-11-28