React nativede curved Bottom Tab bar nasıl yapılır?

React nativede Bottom Tab nasıl kullanır ?

Bu yazımda react native bottom Tab barın kullanımı ve curved yapımından bahsedeceğim. Diğer bottom Tab barların aksine curved yaparak mobil uygulamanız için daha güzel bir görüntü sahip olabilirsiniz.

Expo kullanarak uygulamalı olarak ilerleyeceğim. Şimdi işe koyulalım ve projeyi oluşturup gerekli kütüphaneleri ekleyelim. İlk olarak expoyu kuruyorum:

npx create-expo-app curved-bottombar
cd curved-bottombar

Gerekli kütüphaneleri ekleyelim. Navigation işlemleri ve bottom tab kullanımı için:

npm install @react-navigation/native @react-navigation/bottom-tabs

Curved işlemleri için aşağıdaki kütüphaneleri yükleyelim:

npm install react-native-svg react-native-size-scaling d3-shape

ardından projeyi başlatıyorum.

npx expo start

Projeye src klasörü oluşturup içerisine screens klasörü açıp home, profile, settings şeklinde bottom tab barda kullanmak için üç adet screen oluşturdum.

structure

Home içerisine aşağıdaki kodu ekliyorum.

Profile içerisine aşağıdaki kodu ekliyorum.

Settings içerisine aşağıdaki kodu ekliyorum.

Sayfalarımı oluşturduktan sonra navigation işlemlerimi yapalım. src klasörü içersine navigator klasörü oluşturup içerisine tabbar ekliyorum.

structure

tabbar içerisine aşağıdaki kodu ekleyelim ve bottom tabbarı oluşturmuş olalım.

Ardından oluşturmuş olduğumuz bottom tab barı App.js içerisinde Navigation ile sarmalayarak kullanalım. App.js aşağıdaki kod ile değiştirelim.

Artık bottom Tab bar çalışır vaziyette ve kullanabiliriz. Şimdi zurnanın zırt dediği yere geldik.

React nativede curved Bottom Tab bar nasıl yapılır?

Oluşturmak istediğimiz curved işleminden sonra arka tarafın transparent olması gerekiyor. Bu işlemi yapmak için css ile clip-path işlemi kullanmamız gerekiyor ama react native path işlemleri için svg oluşturarak ve içerisine path belirterek bu işlemi gerçekleşitreceğiz. Tüm cihazlara uyumlu center curved oluşturan fonksiyonu aşağıya ekliyorum. Bu fonksiyonu navigator içerisinde tabbar a curve.js şeklinde ekleyelim.

structure

Fonksiyonu ekledikten sonra Bottom Tab bardaki gerekli değişiklikleri ekleyelim.

Aşağıdaki kod ile bottom tab barı güncelleyelim. Gerekli tabBar style işlemlerini gerçekleştirdikten sonra path oluşturmak için gerekli fonksiyonu import ettim. Path oluşturmak için fonksiyona width, tabbar height ve oluşacak curvenin çapını göndererek pathimizi oluşturuyoruz. Path ortada kullanacağım için ortadaki elemanın tabBarLabelına gerekli svg işlemlerini ekledim ve fonksiyondan gelen path belirttim.

Ve Curved Bottom Tab barımızı oluşturduk ve kullanmaya başlayabiliriz.

Tüm kodları eklediğim GitHub reposuna da linkten ulaşabilirsiniz.

GitHub - alperbayram/react-native-curved-bottom-bar: curved bottom navigation bar for React Native

Okuduğunuz için teşekkürler takip edip abone olursanız sevinirim iyi çalışmalar. 🥳🤩