Kendi projelerim için uzun zamandır boilerplate tadında bir React Native Kit yapmayı düşünüyordum. Bildiğiniz gibi konfigurasyonlar, dizin yapıları, temel componentler falan derken projelere başlangıç için fazlaca vakit kaybedebiliyoruz. Bunun için temel olarak bir yapı oluşturmak istedim.
Tam olarak bu noktada; Adem İlter, son dönemlerde harika bir React Native eğitimi hazırladı. Keyif alarak ve gayet güzel bilgiler/trickler kazanarak bu eğitimi fırsat buldukça takip ettim. Yeni başlayacaklar dışında, React Native ile daha önce proje geliştirmiş bir çok kişiye de oldukça fazla kazanımlar elde ettirebilecek bir seri olmuş. Bu videolardan edindiğim bilgileri, daha önce kendi oluşturduğum yapılarla da birleştirerek, hazırlamayı düşündüğüm Starter Kit'e yön verdim.
Bu Kit içerisinde de bu videolarda yer alan paketler olduğundan, kullanımlarını detaylı görebilmek ve öğrenebilmek için Adem İlter'in eğitim serisine buradan hızlıca göz atabilirsiniz. Eğer aşağıda belirtilen paketler ve kavramlar size yabancıysa, eğitim serisine hemen başlamanızı tavsiye ederim.
- react-navigation (v5)
- styled-components
- styled-system
- react-native-svg (with @svgr/cli)
- Context API (for global state management)
Ben paket yöneticisi olarak yarn kullanıyorum. O nedenle komutları yarn olarak yazacağım ama, siz npm kullanıyorsanız, ona göre revize edebilirsiniz.
$ git clone https://github.com/izniburak/react-native-starter.git
$ cd react-native-starter
$ yarn
Proje adını değiştirmek için app.json dosyası içerisindeki bilgileri güncelleyebilirsiniz.
{
"name": "UygulamaPaketAdi",
"displayName": "Uygulama Adı"
}
NOT: Uygulama adı değişikliğinden sonra Android ve iOS klasörleri içerisindeki dosyalarda da değişiklik gerekebilir. Bunun için en kolay yol, Android ve iOS dizinleri silmek ve tekrar oluşturmak. Bu işlem için direkt olarak kullanılabilecek bir komut yok şu an için. En azından ben bulamadım ama, öneri olarak şuradaki yorumu deneyebilirsiniz. Sizin bir öneriniz varsa, beni yeşillendirebilirsiniz.
Her şey tamamsa, devam edebiliriz.
iOS için önce Pod kurulumlarını yapıp, sonra simulatörü çalıştırabilirsiniz. (MacOS kullanıcıları için)
$ yarn pod
$ yarn ios
Android için direkt olarak aşağıdaki komut ile simulatörü çalıştırabilirsiniz.
$ yarn android
Eğer bilgisayarınızda yüklü bağımlılıklar ve React Native kurulum aşamaları ile alakalı lazım olan araç/gereçler ile ilgili bir probleminiz yoksa, uygulama başarılı bir şekilde çalıştırılacaktır. Sonrasında yeni ekranlar, componentler ekleyerek uygulamayı istediğiniz hale getirebilirsiniz.
index.js
src/
├── assets
│ └── icons
├── components
│ ├── base
│ │ ├── Button.js
│ │ ├── Input.js
│ │ ├── Text.js
│ │ ├── View.js
│ │ └── index.js
│ └── icons
├── constants
│ └── app.js
├── contexts
│ └── app
│ ├── Actions.js
│ ├── Reducer.js
│ ├── index.js
│ └── withAppContext.js
├── screens
│ ├── AboutScreen.js
│ ├── ContentScreen.js
│ └── HomeScreen.js
├── themes
│ └── default.js
└── utils
| └── compose.js
├── app.js
├── navigator.js
İmkanım oldukça faydalı olabilecek componentler ve helperlar ekleyeceğim. Zaten aktif olarak kendim de kullanacağım için (Starter Kit olarak) sürekli güncel tutmam gerekecek. Sizlerinde önerisi, yanlış olduğunu düşündüğünüz şeyler vs varsa bana iletirseniz çok sevinirim.
izniburak İzni Burak Demirtaş - creator, maintainer