React Native Roadmap

⚡

Faz 00 — Temel Hazırlık

JavaScript ES6+ & React Temelleri

2–4 hafta başlangıç

ES6+ Zorunlular

Arrow functions & this bağlamı
Destructuring (obje & dizi)
Spread / Rest operatörü
async/await & Promise
map, filter, reduce

React Temelleri

Fonksiyonel bileşenler & JSX
Props ve State kavramı
useState & useEffect
Event handling
Liste render ve key prop

Mobil Geliştirme Kavramları

Native vs Hybrid vs Cross-platform
iOS ve Android farkları
App Store & Play Store süreci
Cihaz boyutları ve DPI
Dokunmatik UI tasarım prensipleri

Kritik: React Native, React'in mobil versiyonudur. React'i bilmeden RN öğrenmek çok zorlaşır. En az 2 hafta React'e ayır, sonra buraya gel.

🛠

Faz 01 — Ortam Kurulumu

React Native CLI & Expo ile Proje Başlatma

1–2 hafta başlangıç

Expo ile Başlangıç

Expo Go uygulaması kurulumu
npx create-expo-app ile proje
Expo Router kurulumu
QR kod ile cihazda test
Expo SDK ve kütüphaneler

React Native CLI

Android Studio kurulumu
Xcode kurulumu (macOS)
JDK & SDK yapılandırması
Emülatör & Simülatör kullanımı
Metro bundler anlama

Proje Yapısı

Dosya & klasör organizasyonu
app.json / app.config.js
package.json ve bağımlılıklar
TypeScript konfigürasyonu
ESLint & Prettier kurulumu

Debug Araçları

React Native Debugger
Flipper kurulumu
Logbox ve console kullanımı
Shake menüsü ile developer tools
Hot Reload & Fast Refresh

Projeler

Hello World Uygulaması Expo Projesi Deploy

📦

Faz 02 — Core Components

Temel UI Bileşenleri, StyleSheet & Flexbox

2–3 hafta başlangıç

Temel Bileşenler

View — ana container
Text — metin gösterimi
Image & ImageBackground
TextInput — kullanıcı girişi
Button & Pressable & TouchableOpacity

Liste Bileşenleri

ScrollView kullanımı
FlatList — büyük listeler
SectionList — gruplu listeler
keyExtractor ve renderItem
ListHeaderComponent & footer

StyleSheet & Flexbox

StyleSheet.create() kullanımı
Flexbox ile layout (RN'de default)
flexDirection, justifyContent, alignItems
Padding, margin, border
Dimensions API ile boyut alma

Platform & Responsive

Platform.OS ile iOS/Android ayırımı
Platform.select kullanımı
SafeAreaView — çentik güvenliği
StatusBar yönetimi
useWindowDimensions hook'u

Kullanıcı Etkileşimi

onPress, onLongPress, onPressIn
Keyboard handling & dismiss
TouchableHighlight vs Pressable
Gesture feedback (ripple, opacity)
Alert & ActionSheet API

Modal & Overlay

Modal bileşeni
Bottom Sheet implementasyonu
ActivityIndicator (loading)
RefreshControl ile pull-to-refresh
Snackbar / Toast bildirimleri

Projeler

Kişi Rehberi Uygulaması Haber Listesi Profil Ekranı UI

🧭

Faz 03 — Navigation

React Navigation v6 & Expo Router

1–2 hafta orta

Stack Navigator

createNativeStackNavigator kurulumu
navigation.navigate() ve goBack()
Ekranlar arası parametre geçirme
Header özelleştirme
Gesture ile geri gitme

Tab & Drawer Navigator

createBottomTabNavigator
Tab ikonları ve badge
createDrawerNavigator
Drawer içeriği özelleştirme
Tab + Stack iç içe kullanım

Expo Router (File-based)

app/ klasör yapısı
Dinamik rotalar ([id].tsx)
Layout dosyaları (_layout.tsx)
useRouter ve useLocalSearchParams
Link bileşeni kullanımı

İleri Navigasyon

Deep linking yapılandırması
Authentication flow (Korumalı route)
Modal stack navigasyonu
navigationRef ile global navigasyon
Navigasyon olayları ve dinleyiciler

Projeler

Tab + Stack Yapılı Uygulama Auth Flow (Login → Ana Ekran) E-Ticaret Navigasyon Yapısı

Öneri: Expo kullanıyorsan Expo Router'ı tercih et — Next.js'e benzer dosya tabanlı yapısı öğrenmesi kolay. Bare RN projelerinde React Navigation v6 standart.

🗃

Faz 04 — Data Layer

Zustand, React Query & Yerel Depolama

2–3 hafta orta

Global State

Zustand ile store oluşturma
Actions ve selectors
Redux Toolkit (RTK) alternatifi
Context API ile basit state
Jotai atomları ile hafif state

API & Veri Getirme

fetch / Axios ile HTTP istekleri
TanStack Query (React Query) RN
useQuery ve useMutation
Offline-first stratejisi
GraphQL (Apollo Client) giriş

Yerel Depolama

AsyncStorage temel kullanım
MMKV — hızlı key-value storage
SQLite (expo-sqlite) ile veritabanı
SecureStore ile hassas veri
WatermelonDB ile offline-first DB

Auth & Güvenlik

JWT token yönetimi
expo-secure-store ile token saklama
Biometric auth (parmak izi, Face ID)
OAuth2 (Google, Apple sign-in)
Token refresh mekanizması

Projeler

Offline Todo Uygulaması Haber Uygulaması (API + Cache) Login/Register + JWT

📱

Faz 05 — Native APIs

Kamera, Konum, Push Bildirim & Cihaz Özellikleri

2–3 hafta orta

Medya & Kamera

expo-camera ile kamera erişimi
expo-image-picker ile galeri
expo-media-library
expo-av ile ses & video oynatma
QR kod tarayıcı

Konum & Harita

expo-location ile GPS
Ön plan / arka plan konum
react-native-maps kurulumu
Marker, Polyline, Polygon
Geocoding ve reverse geocoding

Push Bildirimler

expo-notifications kurulumu
Yerel bildirimler (local)
Uzak bildirimler (remote/push)
Bildirime tıklama işleme
Firebase Cloud Messaging (FCM)

Sensörler & Donanım

Accelerometer & Gyroscope
expo-haptics (titreşim)
expo-brightness (ekran parlaklığı)
Clipboard API
Sharing API (paylaş)

Ağ & Bağlantı

NetInfo ile ağ durumu izleme
WebSocket bağlantısı
Background fetch
expo-file-system ile dosya sistemi
In-App Browser (expo-web-browser)

Ödeme & Satın Alma

In-App Purchase kavramı
expo-in-app-purchases
Stripe React Native SDK
Apple Pay & Google Pay
Abonelik yönetimi

Projeler

Konum Tabanlı Uygulama QR Kod Okuyucu Push Bildirim Demo Kamera Uygulaması

✨

Faz 06 — Animasyon & Optimizasyon

Reanimated 3, Gesture Handler & Performans

2 hafta ileri

Animated API (Built-in)

Animated.Value ve useAnimatedValue
Animated.timing, spring, decay
Animated.parallel & sequence
interpolate ile dönüşüm
LayoutAnimation

Reanimated 3

useSharedValue & useAnimatedStyle
withTiming, withSpring, withRepeat
Worklet kavramı (UI thread)
useAnimatedScrollHandler
Entering / Exiting animasyonları

Gesture Handler

GestureDetector & Gesture API
Pan, Pinch, Tap, LongPress gesture
Swipe-to-delete implementasyonu
Draggable bileşenler
Gesture bileştirme

Performans Optimizasyonu

React.memo ile re-render önleme
useCallback & useMemo
FlatList optimizasyonu (windowSize vb.)
Hermes JS engine aktifleştirme
Flipper Profiler ile analiz

Projeler

Swipe Kart Arayüzü (Tinder) Parallax Scroll Effect Sürükle-Bırak Liste

Altın kural: React Native Reanimated 3, animasyonları UI thread'inde çalıştırır — JS thread tıkandığında bile akıcı kalır. Ciddi animasyonlar için Reanimated kullan, built-in Animated değil.

🚀

Faz 07 — Production

Test Yazma, EAS Build & App Store Yayın

2–3 hafta ileri

Test Stratejisi

Jest kurulumu ve konfigürasyonu
@testing-library/react-native
Bileşen testleri yazma
Hook testleri
Detox ile E2E test

EAS Build (Expo)

eas.json yapılandırması
Development / Preview / Production profilleri
iOS sertifika & provisioning
Android keystore yönetimi
OTA (Over-the-Air) güncellemeler

App Store Yayını

Apple Developer hesabı & TestFlight
App Store Connect konfigürasyonu
Google Play Console kurulumu
Uygulama metadata & ekran görüntüleri
Review süreci ve yaygın ret nedenleri

CI/CD & İzleme

GitHub Actions ile otomatik build
EAS Submit ile otomatik yayın
Sentry ile crash raporlama
Firebase Crashlytics
CodePush ile anlık güncelleme

Analitik & Büyüme

Firebase Analytics kurulumu
Mixpanel & Amplitude entegrasyonu
A/B test yapılandırması
App Store Optimization (ASO)
Kullanıcı geri bildirim araçları

Final Projeler

Full-stack Mobil Uygulama App Store'da Yayınlanan Uygulama CI/CD Pipeline Kurulumu

Hedef: Bu fazın sonunda gerçek kullanıcıların indirebileceği bir uygulamana sahip olacaksın. İş başvurularında bu bağlantıyı paylaşmak seni anında öne çıkarır.