React Navigation 6.x’de neler var?

Merhaba,

Mart 2021'de duyurusu yapılan React Navigation 6 versiyonu artık kullanıma açıldı. Peki versiyon 5'den 6'ya güncelleme yapmak için neler yapmalıyız? Versiyon 6'da bizi yeni neler bekliyor? Bu yazımızda bu konuları inceleyeceğiz.

React Navigation 5.x’den versiyon 6'ya güncellemeyi nasıl yapacağız?

Versiyon 6'da en çok değişikliğin olan paket @react-navigation/native, öncelikle aşağıdaki komut ile bu paketin güncel versiyonunu kuracağız.

yarn add @react-navigation/native

Yeni versiyon kapsamında aşağıdaki paketlerin versiyonlarını da yanlarında belirttiğim şekilde artırmamız gerekiyor:

• react-native-safe-area-context >= 3.0.0
• react-native-screens >= 2.15.0
• react-native-tab-view >= 3.0.0
• react-native >= 0.63.0
• expo - 40+ (if you use Expo)

Bu versiyonları da artırdıktan sonra 2 paketimizin daha aşağıdaki kurulum komutu ile versiyonlarını en güncele çekiyoruz.

yarn add react-native-safe-area-context react-native-screens

Paketlerin doğru versiyonlarını kurduktan sonra geliyoruz en önemli kısıma, bu bölümde mevcut kodumuz üzerinde yapmak zorunda olduğumuz değişikliklere bakacağız.

Gördüğüm kadarıyla kod bölümündeki en önemli değişiklik navigasyon parametrelerinin default olarak merge olmaması. Ne demek istiyorum?

Örneğin, React Navigation 6.x öncesi bir versiyonda; default olarak bir sayfada(Sayfa 2) tanımlı aşağıdaki navigasyon parametrelerimiz ve değerleri default olarak tanımlı olsun,

{
   title: ‘Title’,
   body: ‘body’
}

Sayfa 1'den, yukarıdaki default değerlere sahip Sayfa 2'ye, navigation.navigate(‘Sayfa2’, { title: ‘Ben değiştim’ }) şeklinde geçtiğimizde, yukarıdaki title değeri “Ben değiştim” şeklinde değer alacaktır, yani değişecektir. Burada bir değişiklik yapılmış ve buradaki davranış için bir parametre eklenmiş; merge.

navigation.navigate({
 name: ‘Sayfa 2’,
 params: { title: ‘Title’ },
 merge: true,
});

Bu parametre ile buradaki davranışın merge olup olmayacağına karar verebiliyoruz. Default değer false olduğu için de bu davranışın true olması gereken yerleri mevcut projenizde değiştirmeniz gerekiyor.

Kodlarda değiştirmemiz gereken bir önemli değişilik de dangerously ifadesi, ekip artık buna çok fazla ihtiyaç duyulduğu kararına varmış ve dangerouslyGetParentvedangerouslyGetState ifadelerinden dangerously kelimesini çıkarmış. Yeni halleri; navigation.getParent() ve navigation.getState() olmuş.

Route prop ile ilgili de 2 önemli değişilik var yeni pakette.

1- state değişkeni kaldırılmış tamamen

2- Deep link için path değişkeni eklenmiş

Bu kapsamda yine state kullanımımız var ise bunları artık kaldırmalıyız.

Bir önemli değişiklik de nested navigator obje tanımları için olmuş. Aşağıdaki gibi ana sayfaları barındıran bir navigator objemiz olsun, bu tanımda 6 öncesi versiyonlar Home sayfası alt sayfa olarak başka sayfaları barındırabiliyor ve biz bu sayfalara yönlenebiliyorduk.

const config = {
  Home: ‘home’,
  Feed: ‘feed’,
  Profile: ‘profile’,
  Settings: ‘settings’,
};

Yeni versiyonda burada kısıtlamaya gitmişler ve demişler ki bir ana sayfa kendi alt sayfalarını “screens” parametresi ile belirtmek zorunda.

const config = {
 screens: {
            Home: {
              path: ‘home’,
              screens: {
                         Feed: ‘feed’,
                         Profile: ‘profile’,
                       },
           },
           Settings: ‘settings’,
        },
};

Ve useLinking hook kaldırılmış.

Peki React Navigation 6.x’de yeni neler bizi bekliyor?

• Aslında kullanırken çoğumuzun nested olarak veya farklı şekillerde tanımlayarak yapmaya çalıştığımız gruplama için Stack paketi altında Group component’i gelmiş.

Kaynak: https://reactnavigation.org/docs/upgrading-from-5.x/#new-group-component

• Stack içerisindeki modal’lar IOS’de default olarak “presentation style” kullanılacak. Android modal için de yeni bir animayon gelmiş.
• Drawer için IOS’de default slider animasyon kullanılacak.
• Drawer ve bottom tab ekranlarda default olarak header olacak, hariçten Header eklememize gerek kalmamış.
• Material Tab Tops artık viewpager’ı kullanacak. Yani native deneyime yaklaşık bir deneyim olacak.
• Yeni bir çok hook kullanımımıza açılmış.
• Ve bir güzel değişiklik de bu versiyon ile beraber hayatımıza girecek UI Elements kütüphanesi. Kütüphane ile ilgili detay bilgiye buraya tıklayarak erişebilirsiniz. Kendi navigatorümüzü yaratmak gerekli componentler ve uygulamarımızın içinde utils olarak konumlardığımız bazı fonksiyonaliteleri barındırın bir kütüphane diyebiliriz başlangıç olarak. Özellikle içerisinde getHeaderHeight() fonksiyonu önceki versiyonlardaki baya büyük bir can sıkıntısına çözüm getirmiş gibi.

Bu güncellemeyle alakalı bu linke tıklayarak çok daha detaylı göz atabilirsiniz.

Okuduğunuz için teşekkür ederim.

Aşağıdaki hesaplar üzeriden benimle iletişime geçebilirsiniz.

Medium Github Linkedin Mail