React Native ile Cross-Platform Mobil Uygulama Geliştirme

React Native Nedir?

React Native, Facebook tarafından geliştirilen, JavaScript ile native mobil uygulama geliştirmenizi sağlayan framework'tür. 2025'te hala en popüler cross-platform çözümlerden biridir.

Neden React Native?

• Kod Paylaşımı: %90+ kod iOS ve Android'de ortak
• Native Performans: Bridge yerine yeni mimari
• Hot Reload: Anında değişiklik görme
• Geniş Ekosistem: Binlerce hazır paket

Proje Kurulumu

# Expo ile hızlı başlangıç (önerilen)
npx create-expo-app MyApp
cd MyApp
npx expo start

# React Native CLI (native modüller için)
npx react-native init MyApp
cd MyApp
npx react-native run-ios
npx react-native run-android

Temel Componentler

import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  FlatList
} from "react-native";

export default function App() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState("");

  const addTask = () => {
    if (input.trim()) {
      setTasks([...tasks, { id: Date.now(), text: input }]);
      setInput("");
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Yapılacaklar</Text>

      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          value={input}
          onChangeText={setInput}
          placeholder="Yeni görev..."
        />
        <TouchableOpacity style={styles.button} onPress={addTask}>
          <Text style={styles.buttonText}>Ekle</Text>
        </TouchableOpacity>
      </View>

      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.task}>
            <Text>{item.text}</Text>
          </View>
        )}
      />
    </View>
  );
}

Navigation

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

State Management

Büyük uygulamalar için state yönetimi:

• Redux Toolkit: Klasik ve güvenilir
• Zustand: Minimal ve hızlı
• React Query: Server state için ideal
• Jotai/Recoil: Atomic state yönetimi

Sonuç

React Native, web geliştiricileri için mobil dünyaya en kolay geçiş yoludur. Expo ile başlayın, ihtiyaç oldukça native modüllere geçin.