enesdmc

TechnologiesComponentsAIBlogEnglishGame

Natiwind

NativeWind, Tailwind CSS’in stil yazma mantığını React Native ortamına getiren bir kütüphanedir. Bu sayede, React Native bileşenlerine Tailwind benzeri sınıf isimleriyle hızlı ve tutarlı bir şekilde stil verebilirsiniz. NativeWind, stil yönetimini basitleştirir ve projede kod tekrarını azaltarak kullanıcı arayüzünü daha kolay ve esnek hale getirir.

Expo

Expo, React Native uygulamaları geliştirmek için kullanılan bir framework’tür. Expo, mobil uygulama geliştirmeyi hızlandıran bir dizi araç ve hizmet sunar, bu sayede karmaşık ayarlarla uğraşmadan uygulamayı hemen çalıştırabilirsiniz. Ayrıca, kamera, konum, push bildirimleri gibi cihaz özelliklerine kolayca erişim sağlar ve uygulamayı hem iOS hem de Android’de test etmeyi kolaylaştırır.

AsyncStorage

AsyncStorage, React Native uygulamalarında verileri asenkron olarak kalıcı bir şekilde depolamak için kullanılan bir API’dir. Basit anahtar-değer çiftleri şeklinde veri saklamanıza olanak tanır ve kullanıcı bilgileri, ayarlar veya küçük veriler gibi durumları yönetmek için idealdir. Ancak, verilerinizi büyük miktarda depolamak veya karmaşık yapılandırmalar için kullanmamanız önerilir.

SecureStore

SecureStore, Expo uygulamalarında hassas verileri güvenli bir şekilde depolamak için kullanılan bir API’dir. Kullanıcı bilgileri, şifreler veya diğer hassas veriler gibi kritik verilerin korunmasına yardımcı olur. SecureStore, verileri cihazın güvenli alanında saklar ve bu verilerin yetkisiz erişimlere karşı korunmasını sağlar.

npx expo start -c

npx expo start -c

Expo projenizi başlatmadan önce cache (önbellek) verilerini temizler. Bu, özellikle daha önce derlenen dosyaların yarattığı sorunları çözmek için faydalıdır, çünkü eski yapı verileri ve ayarlar temizlenerek projenin sıfırdan düzgün şekilde çalışmasını sağlar.

react-native-safe-area-context

npm i react-native-safe-area-context

React Native uygulamalarında, ekranın üst kısmında yer alan kamera, çentik, veya durum çubuğu gibi alanlardan içeriğin taşmasını önlemek için kullanılır. Bu paket, uygulamanızın içeriklerinin güvenli bölgelerde kalmasını sağlar ve özellikle modern cihazlarda yazıların veya bileşenlerin bu alanların altında kaybolmasını engeller.

npx expo lint komutu

npx expo lint

npx expo lint komutu, Expo projenizdeki kodu statik analiz ederek kod kalitesini kontrol eder. Bu komut, kodunuzda stil ve hata uyumsuzluklarını tespit etmek için linter (kod denetleyici) araçlarını kullanır. Böylece, potansiyel hataları erken aşamalarda belirleyip düzeltebilir, kodunuzun okunabilirliğini ve bakımını artırabilirsiniz.

KeyboardAvoidingView

KeyboardAvoidingView, klavye açıldığında içeriğin yukarı kaymasını sağlayarak kullanıcı deneyimini iyileştirir. iOS’ta, klavye açıldığında alanı korumak için bileşenlerin üstüne padding eklerken; Android’de ise görünümün boyutunu ayarlayarak height davranışı sergiler. Bu sayede, kullanıcı yazma sırasında önemli alanları görebilir ve uygulama daha kullanıcı dostu hale gelir.

import React, { useState } from 'react';
import { View, TextInput, KeyboardAvoidingView, Platform, Button } from 'react-native';
 
const App = () => {
  const [inputValue, setInputValue] = useState('');
 
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={100} // Klavye açıldığında alanı ne kadar yukarı kaydıracağını ayarlar
    >
      <View style={styles.inner}>
        <TextInput
          placeholder="Bir şeyler yazın..."
          value={inputValue}
          onChangeText={setInputValue}
        />
        <Button title="Gönder" onPress={() => console.log(inputValue)} />
      </View>
    </KeyboardAvoidingView>
  );
};
 
 
export default App;

TouchableWithoutFeedback

TouchableWithoutFeedback, kullanıcıların ekranda herhangi bir yere dokunarak klavyeyi kapatmalarını sağlayan bir bileşendir. Bu, kullanıcı deneyimini geliştirmek için klavye açıldığında ekranın dokunma etkileşimlerini yönetmeye yardımcı olur. Kullanıcı ekranın bir yerine dokunduğunda, klavye kaybolur ve kullanıcı, uygulama arayüzüyle etkileşime devam edebilir.

import React, { useState } from 'react';
import { View, TextInput, Keyboard, TouchableWithoutFeedback } from 'react-native';
 
const App = () => {
  const [inputValue, setInputValue] = useState('');
 
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View >
        <TextInput
          placeholder="Username..."
          value={inputValue}
          onChangeText={setInputValue}
        />
      </View>
    </TouchableWithoutFeedback>
  );
};
 
export default App;

Flatlist

FlatList, React Native’de uzun bir listeyi performanslı bir şekilde görüntülemek için kullanılan bir bileşendir. Bu bileşen, yalnızca görünür olan öğeleri render ederek bellek kullanımını optimize eder ve kaydırma performansını artırır. FlatList, liste verilerini daha iyi yönetmek için bazı önemli özellikler sunar, bunlar arasında data, renderItem, ve keyExtractor bulunur.

FlatList Özellikleri:

• data: Liste verilerini alır.
• renderItem: Her bir liste öğesinin nasıl render edileceğini belirten bir fonksiyondur.
• keyExtractor: Her bir öğenin benzersiz bir anahtar (key) ile tanımlanmasını sağlar, böylece performans artırılır.
• ListHeaderComponent: Listenin üstünde görüntülenecek bir bileşen ekler.
• ListFooterComponent: Listenin altında görüntülenecek bir bileşen ekler.
• ListEmptyComponent: Liste boş olduğunda görüntülenecek bir bileşen ekler.
• ItemSeparatorComponent: Öğeler arasında görünmesi gereken ayırıcı bileşen.
• onEndReached: Liste sonuna ulaşıldığında çağrılan bir geri çağırma (callback) fonksiyonu.
• onRefresh: Kullanıcı listeyi yenilemek istediğinde çağrılan bir fonksiyon.
• refreshing: Liste yenilenirken bir yükleme animasyonu göstermek için kullanılır.

import React from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
 
const App = () => {
  // Liste verisi
  const data = []; // Boş veri dizisi (örnek boş liste durumu)
    // Liste verisi
  const data = [
    { id: '1', title: 'Birinci Öğe' },
    { id: '2', title: 'İkinci Öğe' },
    { id: '3', title: 'Üçüncü Öğe' },
    { id: '4', title: 'Dördüncü Öğe' },
    { id: '5', title: 'Beşinci Öğe' },
  ];
 
  // Her bir öğenin nasıl render edileceğini tanımlar
  const renderItem = ({ item }) => (
    <View>
      <Text>{item.title}</Text>
    </View>
  );
 
  // Liste boşsa gösterilecek bileşen
  const renderEmptyComponent = () => (
    <View>
      <Text >Gösterilecek öğe yok.</Text>
    </View>
  );
 
  // Header bileşeni
  const renderHeader = () => (
    <View>
      <Text >Liste Başlığı</Text>
    </View>
  );
 
  // Footer bileşeni
  const renderFooter = () => (
    <View>
      <ActivityIndicator size="small" color="#0000ff" />
      <Text>Yükleniyor...</Text>
    </View>
  );
 
  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      ListHeaderComponent={renderHeader} // Header bileşeni
      ListFooterComponent={renderFooter} // Footer bileşeni
      ListEmptyComponent={renderEmptyComponent} // Boş bileşen
      ItemSeparatorComponent={() => <View style={styles.separator} />} // Öğeler arası ayırıcı
    />
  );
};
 
 
export default App;