---
title: React Native Design
category: product
entity_type: skill
price: ₺369
canonical: https://forgehouse.ai/tr/skiller/react-native-design/
lang: tr
hreflang_alt: https://forgehouse.ai/skills/react-native-design/
last_updated: 2026-06-20
---

# React Native Design

> Master React Native styling, navigation, and Reanimated animations for cross-platform mobile…

Bir React Native uygulamasını taşınmış değil, yerel hissettiren stillendirme, navigasyon ve animasyon katmanını sağlar. Reanimated 3 worklet'leriyle animasyonları UI thread'inde çalıştırarak takılmasız 60fps hareket sunar; dokunma jest'lerini öyle birleştirir ki kaydırılabilir kartlar ile dokunuşlar birbiriyle çakışmaz; iOS/Android görsel farklarını tek bir API'nin arkasında yönetir. Kullanıcının kalite olarak okuduğu şey cilalı harekettir ve bu yetenek tam da onu verir.

## Ne için kullanılır
- Bileşenleri StyleSheet ve dinamik varyant stilleriyle stillendirme
- React Navigation ile Stack ve Tab navigasyonu kurma
- Reanimated 3 paylaşılan değerleriyle 60fps animasyonlar kurma
- Sürüklenebilir, kaydırılabilir, jest tabanlı etkileşimler oluşturma
- iOS ve Android için platforma özel stillendirme yönetme
- Duyarlı düzenler ve güvenli alana duyarlı ekranlar kurma

## Faydalar
- JS köprüsü gecikmesinden etkilenmeyen, UI thread'inde çalışan yerel kalitede 60fps animasyonlar
- Doğru olay zinciri sayesinde kullanıcı girişini asla yutmayan jest etkileşimleri
- Tek bir stillendirme sisteminden iOS ve Android'de tutarlı görünüm
- Stilleri statik tutarak ve memoizasyonu bozan satır içi nesnelerden kaçınarak ölçülebilir daha iyi performans

## Ne içerir
- StyleSheet desenleri: statik, dinamik varyant ve flexbox satır/sütun/ortalanmış düzenler
- Tipli Stack ve Tab navigatörler için React Navigation kurulumu
- Reanimated 3 paylaşılan değerleri, useAnimatedStyle, withSpring ve withTiming
- Pan jest'leri ve sürüklenebilir kartlarla Gesture Handler entegrasyonu
- iOS gölgesi ile Android yükseltisi ve yazı tipi aileleri için Platform.select stillendirmesi
- Basışta küçülme geri bildirimiyle kullanıma hazır animasyonlu ItemCard bileşeni

## Kimler için
Uygulamasının stillendirme, navigasyon ve animasyonlarının her iki platformda da yerel kalite cilasına ulaşmasını isteyen React Native geliştiricileri için.

## Nasıl çalışır
Skill native kalitesinde hissettiren cross-platform bir React Native uygulaması kurarken fiilen şu döngüyü çalıştırır, kara kutu yok:
1. Tüm stilleri component gövdesinin dışında StyleSheet.create ile tanımlar; React Native bunları ID'ye çevirir ve bridge üzerinden her render'da yeni obje yerine sadece ID gönderir.
2. Layout'ları flexbox satır, kolon ve gap ile kurar; spacing ve font boyutu sabit piksel yerine useWindowDimensions üzerinden ekran oranıyla ölçeklenir, küçük telefon da tablet de rahat okunur.
3. Tam tipli React Navigation kurar: her route için ParamList tanımlı native stack ve odaklı/odaksız ikon durumlu bottom tab navigator; navigasyon parametreleri derleme anında tip kontrolünden geçer.
4. Animasyonu Reanimated ile native UI thread'e taşır: useSharedValue ve useAnimatedStyle worklet'leri, yaylı basma animasyonunu ve sürükleme etkileşimini JS bridge'e dokunmadan 60fps çalıştırır.
5. Jestleri GestureDetector ile compose eder (pan, pinch, tap) ve simultaneousHandlers kullanır; scroll view içindeki kaydırılabilir kartlar birbirinin dokunuşunu yutmak yerine birlikte çalışır.
6. Platform farklarını Platform.select ile çözer: iOS gölgesi ile Android elevation, SF Pro ile Roboto, status bar yüksekliği ve safe-area boşlukları tek kod tabanından platforma göre yönetilir.

## Sık sorulanlar
### Mimariyi de kapsıyor mu, yoksa sadece görsel katman mı?
Stillendirme, navigasyon ve animasyon katmanı: StyleSheet desenleri, tipli React Navigation kurulumu ve Reanimated 3 hareketi. Veri çekme, kimlik doğrulama ve çevrimdışı yapı react-native-architecture tarafında; iki paket bilinçli olarak ayrılmış.

### Neden Reanimated worklet'leri; yerleşik Animated API yetmez mi?
Worklet'ler animasyonu UI thread'inde çalıştırır; JS köprüsü meşgulken bile hareket 60fps'te kalır. Jest birleştirme desenleri de kaydırılabilir kartlar ile dokunuşların aynı temas için çekişmesini önler; Animated tabanlı kurulumlar genellikle tam burada takılır.

### Marka renkleriyle bitmiş bir tasarım sistemi veriyor mu?
Hayır. Desenler ve işlenmiş tek bir örnek alırsınız: basışta küçülme geri bildirimli animasyonlu ItemCard. Renk token'ları, tipografi seçimleri ve görsel kimlik size kalıyor.

## Fiyat
₺369, tek seferlik, abonelik yok. KDV dahil.

İlgili rehber: [Yapay zekâ ile tasarım sistemi](https://forgehouse.ai/tr/rehberler/yapay-zeka-ile-tasarim-sistemi/)