Expo router drawer nasıl eklenir?

Bu yazıyı expo-router nedir yazımın devamı olarak ekliyorum. İlk seride uzunca expo-routerdan ve çalışma şeklinden bahsetmiştim. Stack ve Tabbar eklemeyi de anlatmıştım bu sefer üzerine drawer eklemeyi anlatacağım.

GitHub - alperbayram/exporouterv2 at secondbranch

git clone --branch secondbranch https://github.com/alperbayram/exporouterv2.git

Drawer yukarıdaki reponun içine ekleyeceğim clonelayabilirsiniz proje expo ile oluşturulmuştur. Projeyi clonladıktan sonra tüm paketleri “npm i” yaparak indiriyorum.

expo 49 versiyonu kullandığım için aşağıdaki paketleri indiriyorum.

npx expo install @react-navigation/native @react-navigation/drawer react-native-gesture-handler react-native-reanimated

daha sonra babel.config.js içerisine aşağıdaki kısmı ekleyelim

module.exports = {
  presets: [
    ],
    plugins: [
      'react-native-reanimated/plugin',
    ],
};

ardından aşağıdaki komut ile başlatalım.

npx expo start --clear

karşımıza login page geliyor olacak login buttonuna basınca tabbar bulunduğu sayfalara geçeceğiz benim drawer ekleyeceğim yer profile sayfasında sağ üst köşeye

bunun için (tabs) klasörü alttına (drawer) klasörü oluşturuyorum. Bunun içine _layout.tsx, dashboard.tsx, favorites.tsx oluşturuyorum ardından (tabs) içindeki profile.tsx buraya taşıyorum. Dosya yapımızı bu şekilde olmuş oldu.

şimdi sıra geldi drawer yazmaya (drawer)/layouts.tsx içine aşağıdaki kodu yazalım.

expo-router Drawer oluşturmak için <Drawer/> tagini kullanıyoruz Drawer içine eklediğimiz sayfaları <Drawer.Screen/> olarak ekliyoruz. default olarak solda gelen drawer iconunu ve solda açılan drawer ben sağda istediğim için <Drawer/> içine screenOptions ekliyorum ve içerisinde gerekli değişiklikleri yapıyorum.

Drawer oluşturduk şimdi kalan sayfaları eklemek kaldı.

(drawer)/dashboard.tsx sayfası için aşağıdaki kodu yazabilirsiniz;

(drawer)/favorites.tsx sayfası için aşağıdaki kodu yazabilirsiniz;

(drawer)/profile.tsx sayfası için aşağıdaki kodu yazabilirsiniz;

Evet şimdi oluşturduğumuz drawerı tabbar içindeki profile kısmı ile değiştirmek kaldı bunun için (tabs)/_layout.tsx içerisini aşağıdaki gibi güncelliyoruz.

Burada sadece eskiden name profile olan kısmı (drawer) yaptık.

Ardından app/index.tsx aşağıdaki gibi Link kısmını güncelleyelim ki login bastıktan sonra profile sayfasına gidelim.

projeyi ve expoyu kapatıp yeniden başlatmalısınız.

npx expo start --clear

Evet Drawer ekleme işlemimiz bu kadar son olarak elde ettiğimiz görüntü aşağıdaki gibi

Tüm kodları github repo olarak paylaşıyor olucam. Her hangi sorunuz varsa rahatça iletişime geçebilirsiniz. Okuduğunuz için teşekkürler.

iyi çalışmalar.👏🚀

ilk yazı serisi;

Expo Router nasıl kullanılır?

github repo;

GitHub — alperbayram/exporouterv2: Expo Router v2

Kaynaklar;

Drawer navigation | React Navigation

Drawer