Expo ve NativeWind

React Native’de stil yönetimi proje büyüdükçe zorlaşır: StyleSheet.create blokları birikir, değerler birbirinden sapar ve tutarlılık erir. NativeWind, Tailwind CSS’in utility-first modelini React Native’e taşır; böylece stil markup’ın yanında durur ve tasarım token’ları merkezde kalır.

Expo ile temiz biçimde entegre olur ve modern mobil projelerde popüler bir tercih hâline gelmiştir.

Kurulum

NativeWind’i kurun ve Tailwind config’ini uygulama dosyalarına yönlendirin:

npx expo install nativewind tailwindcss

// tailwind.config.js
module.exports = {
  content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{ts,tsx}'],
  presets: [require('nativewind/preset')],
  theme: { extend: {} },
};

Bundan sonra className prop’u React Native bileşenlerinde çalışır.

Utility-first stil

Ayrı bir StyleSheet sürdürmek yerine küçük utility’leri satır içinde birleştirirsiniz:

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

export function Card() {
  return (
    <View className="rounded-2xl bg-white p-4 shadow-sm">
      <Text className="text-lg font-semibold text-gray-900">Başlık</Text>
      <Text className="mt-1 text-sm text-gray-500">Destekleyici metin</Text>
    </View>
  );
}

Bu, stilleri okunabilir tutar ve tekrar kullanımı teşvik eder — aynı class’ları kullandığı için bir kart her yerde aynı görünür.

Merkezi tema ve dark mode

Renk paletleri, boşluklar ve dark mode config’de bir kez tanımlanır ve her yerde kullanılır:

// tailwind.config.js
theme: {
  extend: {
    colors: { brand: { DEFAULT: '#9ac917', dark: '#6f9410' } },
  },
}

<View className="bg-white dark:bg-black">
  <Text className="text-brand">Markalı</Text>
</View>

Marka rengini değiştirmek, StyleSheet’ler arasında ara-değiştir yapmak yerine tek satırlık bir düzenlemedir.

Sonuç

Expo ve NativeWind, modern React Native geliştirme için verimli bir ikili. Utility’ler bileşenleri okunabilir tutar, Tailwind config tasarım sistemini tek yerde toplar ve stiller mümkün olduğunda derleme anında çözülür — uygulama büyüdükçe ölçeklenen, daha temiz bir mimari.