🚀 React Native Boilerplate

Modern, ölçeklenebilir ve yüksek performanslı bir React Native başlangıç projesi. İçerisinde hazır navigasyon, tema yönetimi (Light/Dark), lokal veri depolama ve önceden yapılandırılmış marka (branding) yönetim araçları barındırır.

🛠 Kullanılan Teknolojiler

• Framework: React Native v0.86 & React v19
• Dil: TypeScript
• Kullanıcı Arayüzü (UI): react-native-paper, lucide-react-native
• Navigasyon: @react-navigation/native-stack
• Depolama: react-native-mmkv
• Gelişmiş Araçlar: react-native-reanimated, react-native-gesture-handler, react-native-bootsplash

📁 Proje Yapısı

src/
├── components/   # Projeye özel özelleştirilmiş (Core) ortak bileşenler
├── context/      # Global state yönetimi (Örn: ThemeProvider)
├── navigation/   # Sayfa yönlendirmeleri ve Stack yapılandırmaları
├── screens/      # Uygulama ekranları (index.tsx, stylesheet.ts, types.ts)
├── storage/      # MMKV veritabanı instance ve key tanımlamaları
├── themes/       # Projenin Light/Dark tema ve renk token'ları
├── utils/        # Yardımcı fonksiyonlar
└── index.tsx     # Projenin ana giriş noktası (Providers vb.)

🎨 Branding (Uygulama İkonu & Splash Ekranı)

Uygulamanızın İkon (App Icon) ve Açılış Ekranı (Splash Screen) görsellerini tek bir yapı üzerinden, kolayca ve otomatik olarak yönetebilirsiniz.

1. Görsel Kaynakları

Kaynak görsellerinizi src/assets/branding/ klasörü içerisine yerleştirin:

• 📱 app-icon.png: (En az 1024x1024, PNG) Şeffaflık (transparency) içermemeli ve köşeleri yuvarlatılmamış olmalıdır.
• 🖼 adaptive-icon.png: (En az 1024x1024, PNG) Android adaptive icon için kullanılır. Arka planı şeffaf olmalı, logo merkezde ve etrafında güvenli boşluk bulunmalıdır.
• 🚀 splash-logo.png: (En az 1024x1024, PNG) Açılış ekranı logosudur. Şeffaf arka plan önerilir.

⚠️ Uyarı: src/assets/bootsplash klasörü ve Android/iOS native ikon dosyaları komutlar aracılığıyla otomatik üretilir. Lütfen bu dosyaları manuel olarak düzenlemeyin.

2. Yapılandırma (branding.config.js)

Proje ana dizinindeki branding.config.js dosyasını kendi tasarımınıza göre güncelleyin:

module.exports = {
    splash: {
        logo: "src/assets/branding/splash-logo.png",
        background: "101010", // Splash ekranı arka plan rengi (Hex)
        logoWidth: 120,       // Logonun ekrandaki genişliği
        output: "src/assets/bootsplash"
    },
    icon: {
        source: "src/assets/branding/app-icon.png",
        adaptiveForeground: "src/assets/branding/adaptive-icon.png",
        adaptiveBackground: "101010" // Adaptive ikon arka plan rengi
    }
};

3. Oluşturma Komutları

Görselleri ve yapılandırmayı ayarladıktan sonra terminalde ilgili komutu çalıştırarak native dosyaları (iOS/Android) otomatik olarak oluşturabilirsiniz.

| Komut | Açıklama | |-------|----------| | yarn branding:icon | Sadece uygulama ikonlarını (App Icon) üretir. | | yarn branding:splash | Sadece açılış ekranını (Splash Screen) üretir. | | yarn branding | İkisini birden (İkon ve Splash) tek seferde üretir. |

(Komutları çalıştırdıktan sonra native klasörler güncelleneceği için projeyi yeniden derlemeniz (yarn ios veya yarn android) gerekir.)

💻 Kurulum ve Çalıştırma

1. Bağımlılıkları Yükleyin:

yarn install

2. iOS Pod'larını Yükleyin (Sadece macOS):

yarn pods

3. Uygulamayı Başlatın:

# Android için
yarn android

# iOS için
yarn ios

Faydalı Komutlar:

• yarn lint: ESLint ile kod yazım kurallarını denetler.
• yarn clean: Metro önbelleğini ve Android build dosyalarını temizler.