React Native Custom Base Template

Kapsamlı React Native CLI template'i - Redux Toolkit, RTK Query, i18next, MMKV Storage, Loading Management ve modern best practices ile gelir.

🚀 Özellikler

✅ Temel Yapı

• React Native 0.76.0 (varsayılan) - İstediğiniz sürümü belirtebilirsiniz
• TypeScript desteği
• Modern klasör yapısı ve best practices
• ESLint ve Prettier yapılandırması

✅ State Management

• Redux Toolkit - Modern Redux yaklaşımı
• RTK Query - API state yönetimi
• Redux Persist - MMKV ile veri saklama
• Type-safe hooks - Güvenli tip kontrolü

✅ Storage & Persistence

• MMKV - Yüksek performanslı key-value storage
• Redux Persist entegrasyonu
• AsyncStorage alternatifi - Daha hızlı ve güvenli

✅ Navigasyon

• React Navigation v7 - Stack + Tab Navigation
• Type-safe navigation - Güvenli tip kontrolü
• 5 hazır ekran (Home, Profile, Explore, Notifications, Settings)

✅ Çok Dilli Destek (i18n)

• i18next entegrasyonu
• Türkçe/İngilizce dil desteği
• Redux ile senkronize dil yönetimi
• Dinamik dil değiştirme

✅ API Servisleri

• Axios - HTTP client
• Request/Response interceptor'ları
• Token yönetimi ve error handling
• Retry mekanizması ve loading state'leri

✅ UI & UX

• Responsive design utilities
• Global loading overlay
• Type-safe colors ve typography
• Device detection ve screen utilities

📦 Kurulum

React Native CLI ile (Önerilen)

# Varsayılan sürümle (0.76.0)
npx @react-native-community/cli@latest init MyApp --template ./react-native-template-custombase

# Belirli bir React Native sürümü ile
npx @react-native-community/cli@latest init MyApp --template ./react-native-template-custombase --version 0.78.0

# GitHub'dan direkt kullanım
npx @react-native-community/cli@latest init MyApp --template https://github.com/FurkanKayaDev/react-native-template-custombase

Manuel Kurulum

git clone https://github.com/FurkanKayaDev/react-native-template-custombase.git
cd MyProject
npm install # veya yarn install

iOS Kurulumu

cd ios && pod install && cd ..

🛠️ Klasör Yapısı

src/
├── assets/              # Statik dosyalar
│   ├── animations/      # Lottie animasyonları
│   ├── fonts/          # Custom fontlar
│   ├── icons/          # Icon dosyaları
│   └── images/         # Resim dosyaları
├── components/         # Reusable componentler
│   └── common/        # Ortak componentler
├── constants/         # Sabitler (Types, Colors, Fonts)
├── helpers/           # Utility fonksiyonları
├── language/          # i18n konfigürasyonu
│   ├── translations/  # Dil dosyaları
│   └── i18n.ts       # i18next config
├── providers/         # Context provider'lar
├── redux/             # Redux store ve slices
│   ├── api/          # RTK Query API'ları
│   ├── slices/       # Redux slices
│   ├── hooks.ts      # Typed hooks
│   └── store.ts      # Store konfigürasyonu
├── router/            # Navigation konfigürasyonu
├── screens/           # Ekran componentleri
├── services/          # API servisleri
│   ├── apiService.ts  # Axios instance
│   └── mmkvStorage.ts # MMKV storage utility
├── styles/            # Global stiller
├── types/             # TypeScript type'ları
└── utils/             # Utility fonksiyonları

🔧 Kullanım

MMKV Storage

import { MMKVUtils } from "../services/mmkvStorage";

// String storage
MMKVUtils.setString("key", "value");
const value = MMKVUtils.getString("key", "defaultValue");

// Object storage
MMKVUtils.setObject("user", { name: "John", age: 30 });
const user = MMKVUtils.getObject<User>("user");

// Number storage
MMKVUtils.setNumber("count", 42);
const count = MMKVUtils.getNumber("count", 0);

// Boolean storage
MMKVUtils.setBoolean("isLoggedIn", true);
const isLoggedIn = MMKVUtils.getBoolean("isLoggedIn", false);

Redux Hooks

import { useAppDispatch, useAppSelector } from "../redux/hooks";

const MyComponent = () => {
  const dispatch = useAppDispatch();
  const language = useAppSelector((state) => state.language.currentLanguage);

  // ...
};

Dil Değiştirme

import { useLanguage } from "../redux/hooks";

const SettingsScreen = () => {
  const { currentLanguage, changeLanguage } = useLanguage();

  return (
    <Button title="Switch to English" onPress={() => changeLanguage("en")} />
  );
};

API Servisi

import apiService from "../services/apiService";

// GET request
const data = await apiService.get("/users", { showLoading: true });

// POST request
const result = await apiService.post(
  "/users",
  {
    name: "John",
    email: "john@example.com",
  },
  { showLoading: true }
);

Loading Overlay

import { useAppDispatch } from "../redux/hooks";
import { setLoading } from "../redux/slices/loadingSlice";

const MyComponent = () => {
  const dispatch = useAppDispatch();

  const handleAction = async () => {
    dispatch(setLoading(true));
    try {
      // API call
    } finally {
      dispatch(setLoading(false));
    }
  };
};

📱 Hazır Ekranlar

1. HomeScreen - Ana sayfa
2. ProfileScreen - Profil ekranı
3. ExploreScreen - Keşfet ekranı
4. NotificationsScreen - Bildirimler
5. SettingsScreen - Ayarlar (dil değiştirme ile)

🎨 UI Utilities

import {
  screenData,
  getResponsiveFontSize,
  isTablet,
} from "../helpers/uiHelper";
import { Colors, Fonts } from "../constants/Types";

// Screen dimensions
const { width, height } = screenData;

// Responsive font
const fontSize = getResponsiveFontSize(16);

// Device detection
if (isTablet) {
  // Tablet specific code
}

// Colors & Typography
const textStyle = {
  color: Colors.text.primary,
  fontSize: Fonts.H2.fontSize,
  fontWeight: Fonts.H2.fontWeight,
};

📋 Script'ler

# Development
npm start          # Metro bundler başlat
npm run android    # Android'de çalıştır
npm run ios        # iOS'ta çalıştır
npm run ipad       # iPad simulator'da çalıştır

# Linting
npm run lint       # ESLint kontrolü

# Testing
npm test           # Jest testlerini çalıştır

# iOS Pod Management
npm run pod        # Pod install
npm run pod:clean  # Pod clean install

🔧 Konfigürasyon

MMKV Encryption

src/services/mmkvStorage.ts dosyasında encryption key'i değiştirebilirsiniz:

const mmkv = new MMKV({
  id: "redux-persist",
  encryptionKey: "your-secure-encryption-key-here",
});

API Base URL

src/services/apiService.ts dosyasında base URL'i ayarlayın:

const apiClient = axios.create({
  baseURL: "https://your-api-base-url.com",
  timeout: 10000,
});

🤝 Katkıda Bulunma

1. Bu repository'yi fork edin
2. Feature branch oluşturun (git checkout -b feature/AmazingFeature)
3. Değişikliklerinizi commit edin (git commit -m 'Add some AmazingFeature')
4. Branch'inizi push edin (git push origin feature/AmazingFeature)
5. Pull Request oluşturun

📄 Lisans

Bu proje MIT lisansı altında lisanslanmıştır. Detaylar için LICENSE dosyasına bakın.

👨‍💻 Geliştirici

Furkan Kaya

• GitHub: @FurkanKayaDev
• Email: furkan@example.com