Expo Router nasıl kullanılır?

React native de expo’nun kullanımın giderek arttığını göz önünde bulundurarak expo router v2 sizlere anlatmak istedim. Bu yazıda kısaca expo nedirden uzunca da expo-router kullanımından file-based routing (dosya tabanlı), dynamic routing, zorunlu navigation işlemlerini uygulamalı olarak anlatacağım. Tüm kodları GitHub reposu olarak da yazının sonunda paylaşacağım.

Expo Nedir?

Expo, react native kullanarak android, iOS ve webde uygulama yazmanızı kolaylaştıran bir ortam sunar. Bu servisin tercih edilmesini başlıca sebebi kolay kurulumu. React native CLI kurulumu biraz meşakkatli ve zordur ama bu aşamayı geçince kimse arkasına dönüp bakmaz. Expo da React native CLI için gerekli kütüphaneleri kurmadan hızlıca react native yazmaya başlayabilirsiniz. Ama React native CLI göre bazı konularda kısıtlı kalabiliyor bu sizin tercihinize ve yapacağınız uygulamaya kalmış. Uygulama yapmaya expo ile başlayıp daha sonra bu uygulamayı react native CLI dönüştürmeniz gerekirse bu mümkün yapabilirsiniz.

Expo Router v2 nedir?

expo-router, expo ile oluşturulan uygulama içindeki routing yapısını oluşturmak için kullanılan kütüphanedir. React native de sık kullanılan react-navigation/native göre karşılaştılabilirsiniz bu yapıyı. En önemli özelliği file-based routing yapısının olması yani dosya yapısına göre route oluşturabiliyor olmasıdır. Bu ne demek app klasörü içerindeki oluşturacağımız tüm klasörler ve dosyalar routing sistemizi oluşturuyor olacak. Bu kullanım nextjsden tanıdık gelebilir.

Uygulamamızın ilk aşamasına geçelim expo projesi oluşturalım.

Aşağıdaki kodu terminale yazalım.

npx create-expo-app -t expo-template-blank-typescript

Kurulumu yaptıktan sonra proje dizinimize girelim ve gerekli kütüphaneleri yüklemek için aşağıdaki kodu terminale yazalım.

npx expo install expo-router react-native-safe-area-context react-native-screens react-native-web react-dom expo-linking expo-constants expo-status-bar

Daha sonra package.json daki main aşağıdaki gibi değiştirelim.

webde de kullanabilmemiz için aşağıdakini app.json a ekleyelim.

babel.config.json aşağıdaki gibi günceleyelim.

şimdi app.tsx silelim, app klasörü oluşturalım ve içerisinde örnek yapacağımız aşağıdakileri yapıları ekleyelim.

• app/index.tsx ekleyelim path eşittir /
• app/users.tsx ekleyelim path eşittir /users
• app/settings/index.tsx ekleyelim path eşittir /settings
• app/user/[id].tsx ekleyelim dynamic paths eşittir/111 veya /222

folders

Sizin içinde ufak çaplı style ekledim onu da styles klasörü içinde içerisine styles.tsx oluşturup aşağıdaki styleri ekleyiniz.

Oluşturduğumuz sayfaların kodlarını ekleyelim. index.tsx içerisine aşağıdaki kodu ekleyelim. Bu sayfada(screende) expo router Link özelliğini kullandık Link tıklayarak home, settings sayfalarına geçiş işlemlerimizi yapabiliyoruz. Routeları belirtirken Link içerisinde href kullanıyoruz.

users.tsx sayfasını kodlarını ekleyelim burada da Link özelliğini kullanarak params gönderme işlemlerimi yapıyoruz.

Doğru Link kullanımları

✅ <Link href="/about" />
✅ <Link href="/user/1" />
✅ <Link href={`/user/${id}`} />
✅ <Link href={("/user" + id) as Href} />
// TypeScript errors if href is not a valid route
❌ <Link href="/usser/1" />
✅ <Link href={{ pathname: "/user/[id]", params: { id: 1 }}} />
// TypeScript errors as href is valid, but it should be a HrefObject with params
❌ <Link href="/user/[id]" />
// TypeScript errors as params contain invalid keys
❌ <Link href={{ pathname: "/user/[id]", params: { _id: 1 }}} />
// TypeScript errors as params contain unknown keys
❌ <Link href={{ pathname: "/user/[id]", params: { id: 1, id2: 2 }}} />

settings/index.tsx aşağıdaki kodu ekleyelim.

user/[id].tsx aşağıdaki kodu ekleyelim. Burada path alamak için usePathname, localdeki params almak içinde useLocalSearchParams ve router.back fonksiyonu ile de bir önceki sayfaya dönmek için kullandık.

Başlıca router fonksiyonları

push: route navigate etmek için kullanılır. 
replace: push fonksiyonu ile aynı işlemi yapar fakat yeni bir route gitmek yerine mevcut route yerini alır.
back: bir önceki route dönmek için kullanılır.
canGoBack: geçmiş route varsa true döndürür.
setParams: seçili olan route parametrelerini günceller.

Uygulama içinde uyuşmayan route ile karşılaştığımızda expo-router unmatched işlemi çalışacaktır. […unmatched].tsx sayfası belirtmeseniz de varsayılan olarak gelecektir.

aşağıdaki komutu çalıştıralım cache temizleyelim.

npx expo start -c

Evet tüm işlemlerimiz bittiğine göre uygulamamızı çalıştıralım. Ben ios simulator üzerinde çalıştıracağım için aşağıdaki komutu terminale yazıyorum.

npm run ios

Eğer ios ya da android simulator yoksa web üzerinde aşağıdaki komutu yazarak çalıştırabilirsiniz.

npm run web

Elde ettiğimiz uygulama içi görüntüler;

screens

bu kısıma kadar olan kodları github reposundan firstbranch adlı branch üzerinde ulaşabilirsiniz.

GitHub - alperbayram/exporouterv2 at firstbranch

şimdi sıra layout eklemeye stack, tab oluşturmaya geldi.

Expo router Stack nasıl eklenir?

expo-router Stack oluşturmak için <Stack/> tagini kullanıyoruz stack içine eklediğimiz sayfaları <Stack.Screen/> olarak ekliyoruz.

app klasörü içerisine _layout.tsx oluşturuyoruz ve örnek stack kullanımını ekliyoruz.

app klasörü içerisin modal.tsx ekliyorum.

daha sonra index.tsx içerisini aşağıdaki gibi güncelliyorum.

Eğer değişiklik yaparken hata alıyorsanız ara ara uygulamayı yeniden başlatmayı unutmayın.

Expo router Tabbar nasıl eklenir?

Şimdi stack içerisine tabbar ekleyeceğiz. Bunun için app/(tabs) şeklinde yeni klasör ekliyorum. Bu klasöre _layout.tsx, profile.tsx oluşturuyorum ve settings.tsx buraya taşıyorum.

(tabs) klasörü içindeki routing yapısı aşağıdaki gibi görünecektir.

• app/(tabs)/profile.tsx path eşittir /profile
• app/(tabs)/settings.tsx path eşittir /settings

app/(tabs)/_layout.tsx içerisine aşağıdaki kodu ekliyorum. expo-router Tabbar kullanımı <Tabs/> tagi içinde <Tabs.Screen/> kullanarak oluşturulmaktadır.

app/(tabs)/settings.tsx içerisine aşağıdaki kodu ekliyorum.

app/(tabs)/profile.tsx içerisine aşağıdaki kodu ekliyorum.

Nested Layouts ve Dynamic Routes eklemek için user klasörünü app/(tabs)/user şeklinde olacak şekilde taşıyoruz. Bu user klasörü içine app dizindeki users.tsx ekliyoruz ve ayrıca _layout.tsx oluşturuyoruz.

app/(tabs)/user/_layout.tsx içerisine aşağıdaki kodu ekliyorum.

app/(tabs)/user/[id].tsx içerisine aşağıdaki gibi güncelliyorum.

app/(tabs)/user/users.tsx içerisine aşağıdaki gibi güncelliyorum.

app/(tabs)/_layout.tsx aşağıdaki gibi güncelleyelim.

ve son olarak app/_layout.tsx aşağıdaki gibi güncelleyelim. Ana Stack yapımıza Tabbar ekleyelim.

Aşağıdaki komutu çalıştıralım cache temizleyelim.

npx expo start -c

ve tüm parçalar yerine oturduğuna göre expo-router ile oluşturmuş olduğumuz uygulama yapısı aşağıdaki gibi görünecektir.

ios

Sonuç;

Bu yazıda uygulamalı olarak expo-router kullanımından bahsetmeye çalıştım. Eğer hata ya da eklemek istediğiniz bir şey varsa iletişim kurmaktan sakınmayınız. Tüm kodları github reposu olarak paylaşıyorum.

Okuduğunuz için teşekkürler takip edip abone olursanız sevinirim. clap clap yapmayı unutmayınız. 🥳🤩👏

bu yazının devamı olarak drawer ekleme yazım yayınladı bu linkten okuyabilirsiniz.

https://medium.com/teknasyon-engineering/expo-router-drawer-nas%C4%B1l-eklenir-0a2d259c1b30

Links

GitHub - alperbayram/exporouterv2

Introducing Expo Router v2

Introduction to Expo Router