React Native İçin Önerilen Paketler

Cordova, Xamarin sonrası mobil maceram hız kesmeden react-native ile devam ediyor aslında bu makale react-native’e ilk girdiğim zamanlarda oluşturuldu yani neredeyse 1 yıl önce fakat tecrübe edindiğim paketler bir makaleyi dolduracak seviyede olduğunu görünce artık yayınlamaya karar verdim. Bu makalede react-native projelerinizde kullanabileceğiniz sizin yükünüzü epey hafifletecek olan birbirinden kaliteli paketleri tek bir makale altında bulabileceksiniz.

📦 React Native İçin Önerilen Paketler

React Native İçin Önerilen Paketler

Baştan belirteyim burada listelenen paketler diğer makalelerimin tümünde olduğu gibi deneyimlerim sonucunda beğenip paylaşmaya değer bulduğum paketlerdir o yüzden oradan buradan görüp bunuda listeme ekleyeyim dediğim bir paket yoktur o yüzden sürekli yeni paket kullanımı sonrası eğer memnun olduğum yeni bir paket olursa makaleyi sürekli bu listeyi güncel tutacağım.

🎫 Reklam

Mobil uygulama geliştirme sonrası yayına aldığımızda gelir elde etme yöntemlerinden biri uygulama içerisinde reklam gömmektir. Google Admob reklamlarını gömmek için kullanabileceğiniz paketlerden biri react-native -admob paketidir. Bu paket ile birlikte sabit reklam, ödüllü video reklam seyretme yada tam ekran reklam görüntüleme için kullanabileceğiniz küçük ama marifetli bir pakettir.

⚠ Tür Kontrolü & Linting

ESLint

Linting araçları kodlama yaparken size belli kurallar dahilinde kod yazmanız için yardımcı olur sürekli sizi daha anlaşılır, temiz ve performanslı olması için yönlendirmelerde bulunur. Bu böyle değil şöyle olacak diye öneride bulunur özellikle Visual Studio Code ile birleşince tadından yenmiyor kullanmanızı şiddetle tavsiye ederim.


🔌 Ağ

Axios

React-native projelerinde fetch kullanıyorum fakat react projelerinde fetch yerine axios kullanıyorum nedeni ise fetch birçok tarayıcı sürümü tarafından desteklenmediğinden sıkıntı çıkarabiliyor o yüzden bir süre daha ekstra http request kütüphaneleri ile devam edebilirsiniz. Dilerseniz react-native’de de kullanabilirsiniz.


🖌 Çizim

react-native-sketch

Dokunarak grafik çizmek için kullanabileceğiniz küçük ama kullanışlı paketlerden biri olan react-native-sketch ile çizim adına güzel işler çıkarabilirsiniz.

Özellikler

  • 👆 Parmaklarınızla çizim yapın, ve oluşturduğunuz görseli kaydedin.
  • 🖍 Kalem rengini ve boyutunu anlık değişitirin.
  • 👻 Saydam görüntüler oluşturun (yada oluşturmayın 😃).


🖌 Görsel İşlemleri

lottie-react-native

iOS ve Android mobil cihazlarda Adobe After Effects animasyonlarınızı oynatma imkanı sunan bu plugin ile harika görsel şovlar oluşturabilirsiniz.

react-native-vector-icons

Bu pakete beni ikon arama derdinden kurtardığı için bayılıyorum içerisinde 6.0.2 versiyonu ile beraber gelen 10000+ civarında ikon bulunmaktadır. İkon paketi listesi ise şöyledir;

  • AntDesign by AntFinance (297 icons)
  • Entypo by Daniel Bruce (411 icons)
  • EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
  • Feather by Cole Bemis & Contributors (v4.7.0, 266 icons)
  • FontAwesome by Dave Gandy (v4.7.0, 675 icons)
  • FontAwesome 5 by Fonticons, Inc. (v5.3.1, 1341 (free) 3978 (pro) icons)
  • Foundation by ZURB, Inc. (v3.0, 283 icons)
  • Ionicons by Ben Sperry (v4.2.4, 696 icons)
  • MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
  • MaterialCommunityIcons by MaterialDesignIcons.com (v2.8.94, 2894 icons)
  • Octicons by Github, Inc. (v8.0.0, 177 icons)
  • Zocial by Sam Collins (v1.0, 100 icons)
  • SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

react-native-fast-image

FastImage yüzlerce görsel ile ilgili işlem gerçekleştirdiğiniz ekranlarda hızlı ve güvenli olarak ihtiyacınızı karşılamak için oluşturulmuş bir plugindir. FastImage plugin’i SDWebImage (iOS) ve Glide (Android) plugin’leri üzerine ek geliştirmeler yapılarak tek paket haline getirilmiş bir plugindir.

Özellikler

  • Agresif görsel önbellekleme.
  • Authorization header’ları ekleyebilme.
  • Görsellere önclik verilebilir.
  • Görsellerin yeniden yüklenmesi sağlanabilir.
  • GIF Desteği.
  • Kenarlıkları kıvrımlaştırma desteği(Border Radius).

Görsel kırpma ile ilgili ihtiyaçlarınızda güvenle kullanabileceğiniz pluginlerden biri olan bu plugin sayesinde ios/android sistemlerinden ister kameradan çekim yaparak istersenizde galeriden görsel seçerek ilgili görsel üzerinde kırpma işlemi yapabilirsiniz.

Özellikler

  • Vİdeo/Görsel seçim desteği.
  • Kırpılan görselin kalitesini ayarlayabilir böylelikle boyut düşürme işlemini yapabilirsiniz.
  • Çoklu seçim desteği.

 


🌈 Kullanıcı Arayüzü

react-native-paper

Kullandığım arayüz paketlerinden biri olan ve gerçekten ortaya güzel işler çıkarabilmek için kullanabilirsiniz.

Özellikler

  • Material Design v2.0 Kuralları benimsenerek oluşturulmuş.
  • Platform adaptasyonu.
  • Tüm kontrollerde RTL desteği.

Popup ekranları oluşturmak için kullanabileceğiniz pluginlerden biridir.
Popup ekranları oluşturmak için kullanabileceğiniz pluginlerden biridir.

react-native-animatable

react-native-splash-screen

Uygulamaların açılışında genelde ürün adı yada firmadı adının kısa süreli gösteren ve uygulama hazır olduğunda ana ekrana aktarıldığı sayfa olan açılış ekranlarını kendinize özel hazırlamak ve göstermek için kullanabileceğiniz bir plugindir.

Progressbar ihtiyaçlarınız için kullanabileceğiniz bir plugindir.
Genellikle alışveriş sitelerine ait uygulama ekranlarında sıkça gördüğümüz ödeme adımları gibi adım adım gerçekleştireceğiniz işler için react-native tarafında kullanabileceğiniz etkileyici bir plugindir.

🔊 Medya

react-native-share

Uygulamanız içerisinden paylaşım özelliğini kolaylıkla kullanabilmenizi sağlayan bir plugin’dir.

Simple Share

AndroidIOSWindows
Simple ShareDemo AndroidDemo iOSDemo Windows
UI ComponentDemo Android UI ComponentDemo Android UI ComponentTODO

react-native-sound

Ses dosyalarını oynatmak için kullanabileceğiniz bir plugindir.


🔨 Araçlar

Lodash

C# linq’da array, ienumerable ve iecollection nesneleri üzerinde gelişmiş olarak yaptığımız sorgulamaların ve bu sorgulamalar için kullandığımız metodları javascript tarafında kolayca kullanabileceğiniz çok fazla metod yer almaktadır hesaplama, yeni türde liste elamanları üretme, birleştirme gibi birçok yardımcı metod yer almaktadır ayrıca varolan javascript array metodlarından daha hızlı işlem yapan alternatif metodları kullanmanız hız açısından size çok avantaş sağlamaktadır.

Moment

React-native dışında diğer tüm javascript’in yer aldığı projelerimde kullandığım ve sürekli önerdiğim harika bir tarih/saat işlemleri için bir kütüphanedir.

react-native-device-info

Cihaza ait neredeyse tüm bilgilere erişmenizi sağlayan çok kullanışlu bir paket. Hangi özelliklere erişildiği ile ilgili alttaki tabloya gözatabilirsiniz tablo pluginin github hesabından alınmıştır ve 0.26.1 versiyonuna ait bilgilerdir.

MetodGeri Dönüş Türü iOSAndroidWindowsDahil Olduğu Device-Info Paket Sürümü
getAPILevel()number0.12.0
getApplicationName()string0.14.0
getBatteryLevel()Promise<number>0.18.0
getBrand()string0.9.3
getBuildNumber()string?
getBundleId()string?
getCarrier()string0.13.0
getDeviceCountry()string0.9.0
getDeviceId()string0.5.0
getDeviceLocale()string0.7.0
getDeviceName()string?
getFirstInstallTime()number0.12.0
getFontScale()number0.15.0
getFreeDiskStorage()number0.15.0
getIPAddress()Promise<string>0.12.0
getInstallReferrer()string0.19.0
getInstanceID()string?
getLastUpdateTime()number0.12.0
getMACAddress()Promise<string>0.12.0
getManufacturer()string?
getMaxMemory()number0.14.0
getModel()string?
getPhoneNumber()string0.12.0
getReadableVersion()string?
getSerialNumber()string0.12.0
getSystemName()string?
getSystemVersion()string?
getTimezone()string?
getTotalDiskCapacity()number0.15.0
getTotalMemory()number0.14.0
getUniqueID()string?
getUserAgent()string0.7.0
getVersion()string?
is24Hour()boolean0.13.0
isAirPlaneMode()Promise<boolean>0.25.0
isEmulator()boolean?
isPinOrFingerprintSet()(callback)boolean0.10.1
isTablet()boolean?
hasNotch()boolean0.23.0
isLandscape()boolean0.24.0
getDeviceType()string?

📜 Log

Sentry

Uygulamayı hazırladıktan markete atıyor ve diğer kullanıcıların uygulamayı yüklemesine imkan vermiş oluyoruz birde uygulama içerisine geri bildirim diye button koyuyoruz ki kullanıcı hata olunca bize döner diye düşünüyoruz ama mağlesef bu iş hiçte öyle olmuyor hata yaşayan kullanıcılar tepkilerini genellikle 2 yöntem ile gösteriyor 1.uygulamayı direkt siliyor 2.mağazadan uygulamaya saydırabiliyorlar 🙂 ama çok nadir kesimde geri bildirimi de kullanıyor tabi nadir bu kişi sayısı o yüzden yaşanabilecek tüm sorunları tek bir yerden görebilmek ve yönetebilmek için kullanabileceğiniz çok başarılı ve donanımlı bir plugindir. Şiddetle hazırlayacağınız her uygulamada Sentry yada benzeri loglama araçlarını kullanmanızı tavsiye ederim.


🚥 Harita

react-native-maps

Android ve iOS için Google Maps apisini kullanan React Native bileşenidir.


🎌 Lokalizasyon

react-native-i18n

Uygulamanıza çok dil özelliğini kazandırmak için kullanabileceğiniz güzel bir plugindir.


🚩 Route

React Navigation

Ekranlar arası geçişi sağlamak ve geçiş sırasında istenilen verileri taşımak için kullanabileceğiniz kaliteli bir plugindir.

React Router

React Navigation plugini için alternatif olarak kullanabileceğiz pluginlerden biri olan bu plugin ile ekranlar arasında geçişi sağlayabilir ve ekranlar arasında geçişi sağlarken veri taşıma işlemini gerçekleştirebilirsiniz.

📚 Diğer React Native Makaleleri


✍ React Native Önerilen Paketler konulu makale için lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 React Native Önerilen Paketler konuku makalemizi sosyal medya kanallarından paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

React Native İçin Önerilen Paketler
5 (100%) 2 oy

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın