Expo Native Tabs ile Liquid Glass Tab Bar Nasıl Yapılır?

Mobil uygulamalarda bottom tab bar, kullanıcının uygulama içinde en sık kullandığı navigasyon alanlarından biridir. Ana sayfa, keşfet, içerik oluşturma, bildirimler ve profil gibi temel ekranlar çoğu zaman tab bar üzerinden yönetilir. Bu nedenle tab bar yalnızca basit m hissini, premium algısını, platform uyumunu ve kullanıcı deneyimini doğrudan etkileyen önemli bir arayüz bileşenidir.

iOS 26 ile birlikte öne çıkan Liquid Glass tasarım yaklaşımı, mobil arayüzlerde daha derinlikli, saydam, dinamik ve native hissiyatı güçlü yüzeylerin kullanılmasını sağladı. React Native ve Expo ekosisteminde bu görünümü uygulamak için artık eski yöntemlerdeki gibi tamamen custom blur tab bar yazmak her zaman en doğru yol değildir. Özellikle Expo Router kullanan projelerde Native Tabs ile sistemin kendi tab bar davranışından yararlanmak, daha doğru ve sürdürülebilir bir çözümdür.

Bu rehberde Expo Router Native Tabs kullanarak glass hissiyatlı native tab bar yapısını ele alacağız. Ayrıca expo-glass-effect paketiyle gelen GlassView component’i üzerinden, tab bar dışındaki özel glass alanları nasıl oluşturabileceğimizi göstereceğiz.

Buradaki temel yaklaşım şudur:

Atalay Tech olarak geliştirdiğimiz mobil uygulama geliştirme projelerinde modern UI kararlarını yalnızca görsel beğeniye göre değil; platform uyumu, performans, bakım kolaylığı, native hissiyat ve ürünün uzun vadeli ölçeklenebilirliğiyle birlikte değerlendiriyoruz. Bu nedenle Liquid Glass gibi güncel arayüz yaklaşımlarında amaç sadece “güzel görünen” bir ekran yapmak değil; gerçek cihazlarda stabil çalışan, kullanıcı deneyimini güçlendiren ve uygulamanın marka algısını yükselten bir yapı kurmaktır.

Expo Native Tabs Nedir?

Expo Native Tabs, Expo Router içinde kullanılan native tab layout yapısıdır. Klasik JavaScript tab bar yaklaşımlarından farklı olarak tab bar görünümünü ve davranışını platformun kendi native sistem bileşenlerine daha yakın şekilde yönetir.

Bu yaklaşımın en büyük avantajı, iOS ve Android tarafında platformun doğal navigasyon davranışlarına daha uyumlu sonuç vermesidir. iOS tarafında sistemin sunduğu güncel tab bar görünümleri, scroll edge davranışları, blur / glass etkileri ve native animasyonlar daha doğru şekilde kullanılabilir. Android tarafında ise Material tab davranışlarına daha yakın, platform hissiyatı daha güçlü bir yapı elde edilir.

React Native dünyasında uzun süre bottom tab bar tasarımları çoğunlukla JavaScript tarafında özel component yazarak oluşturuldu. Bu yöntem hâlâ bazı projelerde gereklidir; ancak sistemin sunduğu native davranışlardan yararlanmak istiyorsanız Expo Router Native Tabs daha doğru bir tercih olabilir.

Özellikle Liquid Glass tab bar yapmak istiyorsanız, eski yaklaşımda olduğu gibi BlurView ile sahte bir cam efekti oluşturmak yerine, Native Tabs üzerinden sistem tab bar’ını kullanmak daha mantıklıdır. Çünkü iOS tarafında gerçek glass hissiyatı, sistem bileşenleriyle daha doğal çalışır.

İlgili hizmetimiz

Mobil Uygulama Geliştirme

iOS ve Android uygulamanızı yönetim paneli ve API ile aynı ekip geliştirir, mağazaya çıkarır, bakımını üstlenir. Vip Destek, MEDİKOD, Yetkilendir, Perde yayında.

Detaylı Bilgi

Tüm hizmetleri görüntüleİletişim

Expo GlassEffect ve GlassView Nedir?

Expo GlassEffect, uygulama içinde özel glass efektli alanlar oluşturmak için kullanılan Expo paketidir. Bu paketteki en önemli component GlassView component’idir.

GlassView, özel bir kart, floating action button, mini toolbar, medya kontrol alanı veya premium görünümlü aksiyon kutusu oluşturmak istediğinizde kullanılır. Yani GlassView tab bar’ın kendisini native tab bar yapmaz; tab bar dışındaki özel UI alanlarında glass yüzey oluşturmak için kullanılır.

Bu ayrım çok önemlidir:

Bu nedenle “Expo ile glassed bottom tab bar nasıl yapılır?” sorusunun doğru cevabı şudur:

Bottom tab bar için Expo Router Native Tabs kullanılır. Özel glass UI parçaları için Expo GlassEffect GlassView kullanılır.

Bu Yaklaşım Hangi Projeler İçin Uygun?

Expo Native Tabs ve GlassView yaklaşımı özellikle modern, kullanıcı deneyimi güçlü ve platform hissiyatı yüksek mobil uygulamalarda tercih edilebilir.

Örneğin yapay zekâ destekli bir mobil uygulama, sosyal medya uygulaması, premium üyelik uygulaması, içerik keşif platformu veya fitness uygulaması geliştiriyorsanız Liquid Glass hissiyatı ürüne daha modern bir algı kazandırabilir.

Ancak her uygulamada cam efekti kullanmak doğru değildir. Kurumsal operasyon uygulamaları, yoğun veri giriş ekranları, saha personeli uygulamaları veya çok sade kullanılması gereken iş uygulamalarında fazla glass efekt kullanmak kullanıcı deneyimini zayıflatabilir.

Atalay Tech’in özel yazılım geliştirme projelerinde bu tarz arayüz kararları ürünün hedef kitlesine göre belirlenir. Çünkü iyi bir mobil uygulama yalnızca modern görünmekle kalmamalı; hızlı, erişilebilir, anlaşılır ve sürdürülebilir olmalıdır.

Proje Kurulumu

Bu örnekte Expo Router kullanan bir Expo projesi üzerinden ilerleyeceğiz. React Native CLI ile manuel native tab bar yazmak yerine, Expo Router’ın file-based routing yapısını kullanacağız.

Yeni proje oluşturmak için:

npx create-expo-app@latest liquid-glass-tabs
cd liquid-glass-tabs

Expo Router projenizde yoksa gerekli kurulumları yapabilirsiniz:

npx expo install expo-router react-native-screens react-native-safe-area-context

GlassView kullanmak için:

npx expo install expo-glass-effect

app.json veya app.config.ts içinde Expo Router plugin’inin tanımlı olduğundan emin olun:

{
  "expo": {
    "plugins": ["expo-router"]
  }
}

Modern Expo projelerinde bu yapı çoğu zaman hazır gelir. Ancak mevcut bir projeye Expo Router ekliyorsanız config tarafını kontrol etmek gerekir.

Önerilen Dosya Yapısı

Expo Router file-based routing kullandığı için klasör yapısı oldukça önemlidir. Bu örnekte (tabs) route group’u kullanarak tab ekranlarını gruplayacağız.

app
├── _layout.tsx
└── (tabs)
    ├── _layout.tsx
    ├── index.tsx
    ├── search.tsx
    ├── create.tsx
    ├── notifications.tsx
    └── profile.tsx

components
└── glass
    ├── GlassActionCard.tsx
    └── GlassFloatingButton.tsx

constants
└── colors.ts

Bu yapı sayesinde root layout ile tab layout ayrılır. Ana uygulama yapısı app/_layout.tsx içinde yönetilirken, tab bar yapısı app/(tabs)/_layout.tsx içinde tanımlanır.

Bu yapı gerçek projelerde de rahatça büyütülebilir. Örneğin auth, onboarding, modal, detay sayfaları ve ayarlar ekranları ayrıca gruplanabilir.

Root Layout Oluşturma

Önce uygulamanın ana layout dosyasını oluşturalım.

// app/_layout.tsx

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack
      screenOptions={{
        headerShown: false,
      }}
    />
  );
}

Bu dosya uygulamanın ana route yapısını yönetir. Tab bar ise (tabs) grubu içinde ayrı bir layout olarak tanımlanacaktır.

Expo Router’da route group kullanmak, URL yapısını veya ekran organizasyonunu daha temiz tutar. (tabs) klasörü ekranda doğrudan route segment’i olarak görünmez; sadece yapısal gruplama sağlar.

Native Tabs Layout Oluşturma

Şimdi asıl Native Tabs yapısını oluşturalım.

// app/(tabs)/_layout.tsx

import { NativeTabs } from 'expo-router/unstable-native-tabs';

export default function TabLayout() {
  return (
    <NativeTabs
      blurEffect="systemMaterial"
      backgroundColor="transparent"
      disableTransparentOnScrollEdge
    >
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Icon
          sf={{
            default: 'house',
            selected: 'house.fill',
          }}
          md={{
            default: 'home',
            selected: 'home',
          }}
        />
        <NativeTabs.Trigger.Label>Ana Sayfa</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="search">
        <NativeTabs.Trigger.Icon
          sf={{
            default: 'magnifyingglass',
            selected: 'magnifyingglass',
          }}
          md={{
            default: 'search',
            selected: 'search',
          }}
        />
        <NativeTabs.Trigger.Label>Keşfet</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="create">
        <NativeTabs.Trigger.Icon
          sf={{
            default: 'plus.circle',
            selected: 'plus.circle.fill',
          }}
          md={{
            default: 'add_circle',
            selected: 'add_circle',
          }}
        />
        <NativeTabs.Trigger.Label>Oluştur</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="notifications">
        <NativeTabs.Trigger.Icon
          sf={{
            default: 'bell',
            selected: 'bell.fill',
          }}
          md={{
            default: 'notifications',
            selected: 'notifications',
          }}
        />
        <NativeTabs.Trigger.Label>Bildirimler</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="profile">
        <NativeTabs.Trigger.Icon
          sf={{
            default: 'person',
            selected: 'person.fill',
          }}
          md={{
            default: 'person',
            selected: 'person',
          }}
        />
        <NativeTabs.Trigger.Label>Profil</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

Bu kodda önemli olan birkaç nokta var.

İlk olarak NativeTabs component’i, tab bar’ın kendisini native sistem davranışıyla oluşturur. Burada custom bir View ile tab bar çizmek yerine, sistem tab bar yapısından yararlanıyoruz.

İkinci olarak blurEffect="systemMaterial" değeri iOS tarafında tab bar’ın daha glass hissiyatlı görünmesine yardımcı olur. Farklı iOS blur efektleri kullanılabilir; ancak systemMaterial, sistemle uyumlu ve dengeli bir görünüm için iyi bir başlangıçtır.

Üçüncü olarak disableTransparentOnScrollEdge kullanımı önemlidir. Bazı durumlarda scroll edge davranışı nedeniyle tab bar beklenenden fazla transparan görünebilir. Bu prop, daha tutarlı bir tab bar görünümü için kullanılabilir.

Tab Ekranlarını Oluşturma

Şimdi tab ekranlarını oluşturalım.

// app/(tabs)/index.tsx

import { StyleSheet, Text, View } from 'react-native';
import { GlassActionCard } from '@/components/glass/GlassActionCard';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Ana Sayfa</Text>
      <Text style={styles.description}>
        Expo Native Tabs ile native glass hissiyatlı bottom tab bar örneği.
      </Text>

      <GlassActionCard />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 72,
    paddingHorizontal: 20,
    backgroundColor: '#0B0B10',
  },
  title: {
    color: '#FFFFFF',
    fontSize: 32,
    fontWeight: '800',
    marginBottom: 12,
  },
  description: {
    color: 'rgba(255,255,255,0.68)',
    fontSize: 16,
    lineHeight: 24,
    marginBottom: 24,
  },
});

Diğer ekranlar için sade örnekler:

// app/(tabs)/search.tsx

import { StyleSheet, Text, View } from 'react-native';

export default function SearchScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Keşfet</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 72,
    paddingHorizontal: 20,
    backgroundColor: '#0B0B10',
  },
  title: {
    color: '#FFFFFF',
    fontSize: 32,
    fontWeight: '800',
  },
});

// app/(tabs)/create.tsx

import { StyleSheet, Text, View } from 'react-native';

export default function CreateScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Oluştur</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 72,
    paddingHorizontal: 20,
    backgroundColor: '#0B0B10',
  },
  title: {
    color: '#FFFFFF',
    fontSize: 32,
    fontWeight: '800',
  },
});

// app/(tabs)/notifications.tsx

import { StyleSheet, Text, View } from 'react-native';

export default function NotificationsScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Bildirimler</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 72,
    paddingHorizontal: 20,
    backgroundColor: '#0B0B10',
  },
  title: {
    color: '#FFFFFF',
    fontSize: 32,
    fontWeight: '800',
  },
});

// app/(tabs)/profile.tsx

import { StyleSheet, Text, View } from 'react-native';

export default function ProfileScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Profil</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 72,
    paddingHorizontal: 20,
    backgroundColor: '#0B0B10',
  },
  title: {
    color: '#FFFFFF',
    fontSize: 32,
    fontWeight: '800',
  },
});

Bu örneklerde arka plan koyu tutuldu. Liquid Glass etkisi genellikle arka planda kontrast, geçiş, görsel veya gradient olduğunda daha güçlü görünür. Düz beyaz arka planda glass etkisi çoğu zaman yeterince belirgin olmaz.

GlassView ile Özel Glass Kart Oluşturma

Native Tabs tab bar’ın kendisini sistem seviyesinde yönetirken, GlassView özel UI alanlarında kullanılabilir.

Örneğin ana sayfada premium bir aksiyon kartı göstermek istediğimizi düşünelim.

// components/glass/GlassActionCard.tsx

import { StyleSheet, Text, View } from 'react-native';
import { GlassView, isGlassEffectAPIAvailable } from 'expo-glass-effect';

export function GlassActionCard() {
  const isGlassAvailable = isGlassEffectAPIAvailable();

  if (!isGlassAvailable) {
    return (
      <View style={styles.fallbackCard}>
        <Text style={styles.title}>Premium Mobil Deneyim</Text>
        <Text style={styles.description}>
          Bu alan, desteklenmeyen cihazlarda fallback kart olarak görünür.
        </Text>
      </View>
    );
  }

  return (
    <GlassView
      style={styles.glassCard}
      glassEffectStyle="regular"
      tintColor="rgba(255,255,255,0.16)"
      isInteractive
    >
      <Text style={styles.title}>Premium Mobil Deneyim</Text>
      <Text style={styles.description}>
        Expo GlassEffect ile native glass hissiyatlı özel kart.
      </Text>
    </GlassView>
  );
}

const styles = StyleSheet.create({
  glassCard: {
    minHeight: 148,
    borderRadius: 28,
    padding: 22,
    justifyContent: 'center',
  },
  fallbackCard: {
    minHeight: 148,
    borderRadius: 28,
    padding: 22,
    justifyContent: 'center',
    backgroundColor: 'rgba(255,255,255,0.10)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.16)',
  },
  title: {
    color: '#FFFFFF',
    fontSize: 22,
    fontWeight: '800',
    marginBottom: 8,
  },
  description: {
    color: 'rgba(255,255,255,0.72)',
    fontSize: 15,
    lineHeight: 22,
  },
});

Burada isGlassEffectAPIAvailable() kontrolü önemli bir detaydır. Çünkü Liquid Glass API her cihazda veya her sistem koşulunda aynı şekilde kullanılamayabilir. Desteklenmeyen durumda fallback bir tasarım göstermek, uygulamanın çökmesini veya boş görünmesini engeller.

Bu yaklaşım gerçek projelerde daha güvenlidir. Çünkü mobil uygulamanız yalnızca en güncel iPhone’da değil, farklı cihazlarda ve farklı işletim sistemi sürümlerinde de stabil çalışmalıdır.

GlassContainer ile Birleşik Glass Efekti

Birden fazla glass element’i aynı bölgede kullanacaksanız GlassContainer kullanabilirsiniz. Bu yapı, ayrı ayrı glass yüzeyler arasında daha birleşik ve doğal bir etki oluşturmak için tercih edilir.

Örneğin üç küçük glass aksiyon butonu oluşturalım:

// components/glass/GlassFloatingButton.tsx

import { StyleSheet, Text, View } from 'react-native';
import {
  GlassContainer,
  GlassView,
  isGlassEffectAPIAvailable,
} from 'expo-glass-effect';

export function GlassFloatingButton() {
  const isGlassAvailable = isGlassEffectAPIAvailable();

  if (!isGlassAvailable) {
    return (
      <View style={styles.fallbackContainer}>
        <View style={styles.fallbackButton}>
          <Text style={styles.text}>AI</Text>
        </View>
        <View style={styles.fallbackButton}>
          <Text style={styles.text}>+</Text>
        </View>
        <View style={styles.fallbackButton}>
          <Text style={styles.text}>✓</Text>
        </View>
      </View>
    );
  }

  return (
    <GlassContainer spacing={10} style={styles.container}>
      <GlassView style={styles.button} glassEffectStyle="regular" isInteractive>
        <Text style={styles.text}>AI</Text>
      </GlassView>

      <GlassView style={styles.button} glassEffectStyle="clear" isInteractive>
        <Text style={styles.text}>+</Text>
      </GlassView>

      <GlassView style={styles.button} glassEffectStyle="regular" isInteractive>
        <Text style={styles.text}>✓</Text>
      </GlassView>
    </GlassContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    gap: 10,
    alignItems: 'center',
  },
  fallbackContainer: {
    flexDirection: 'row',
    gap: 10,
    alignItems: 'center',
  },
  button: {
    width: 56,
    height: 56,
    borderRadius: 28,
    alignItems: 'center',
    justifyContent: 'center',
  },
  fallbackButton: {
    width: 56,
    height: 56,
    borderRadius: 28,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255,255,255,0.12)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.16)',
  },
  text: {
    color: '#FFFFFF',
    fontSize: 17,
    fontWeight: '800',
  },
});

Bu tarz component’ler özellikle yapay zekâ uygulamalarında, medya kontrol arayüzlerinde, floating action menülerde veya premium üyelik ekranlarında kullanılabilir.

Native Tabs ile GlassView Arasındaki Fark

Expo Native Tabs ve Expo GlassEffect bazen aynı şeymiş gibi düşünülür; ancak kullanım alanları farklıdır.

Bu yüzden bottom tab bar için önce Native Tabs düşünülmelidir. Eğer tasarımınız sistem tab bar sınırlarının dışına çıkıyorsa ve tamamen özel bir tab bar istiyorsanız custom tabs yaklaşımına geçebilirsiniz. Ancak yalnızca Liquid Glass hissiyatı ve native davranış istiyorsanız Native Tabs daha doğru başlangıçtır.

Badge Kullanımı

Gerçek uygulamalarda bildirim sayısı, okunmamış mesaj sayısı veya bekleyen işlem sayısı gibi değerler tab bar üzerinde gösterilebilir.

Native Tabs içinde badge kullanımı şu şekilde yapılabilir:

<NativeTabs.Trigger name="notifications">
  <NativeTabs.Trigger.Icon
    sf={{
      default: 'bell',
      selected: 'bell.fill',
    }}
    md={{
      default: 'notifications',
      selected: 'notifications',
    }}
  />
  <NativeTabs.Trigger.Label>Bildirimler</NativeTabs.Trigger.Label>
  <NativeTabs.Trigger.Badge>3</NativeTabs.Trigger.Badge>
</NativeTabs.Trigger>

Badge kullanırken dikkat edilmesi gereken nokta, bu değerin gerçekten önemli bildirimler için kullanılmasıdır. Sürekli yüksek sayı gösteren badge’ler kullanıcıda bildirim körlüğü oluşturabilir.

Atalay Tech’in yapay zekâ entegrasyonu ve mobil uygulama projelerinde bildirim stratejisi yalnızca teknik olarak değil, ürün deneyimi açısından da planlanır. Çünkü bildirimler doğru kullanıldığında geri dönüş oranını artırabilir; yanlış kullanıldığında kullanıcıyı uygulamadan uzaklaştırabilir.

Search Tab Rolü Kullanımı

Bazı uygulamalarda arama sekmesi ayrı bir sistem davranışına sahip olabilir. Native Tabs tarafında search tab için özel rol tanımlamak mümkündür.

<NativeTabs.Trigger name="search" role="search">
  <NativeTabs.Trigger.Icon
    sf="magnifyingglass"
    md="search"
  />
  <NativeTabs.Trigger.Label>Keşfet</NativeTabs.Trigger.Label>
</NativeTabs.Trigger>

Bu yapı özellikle içerik platformları, sosyal medya uygulamaları, ürün katalogları ve arama odaklı uygulamalarda kullanılabilir.

Search tab’ı sadece ikon olarak koymak yeterli değildir. Gerçek ürün deneyiminde arama ekranı hızlı açılmalı, klavye davranışı doğru yönetilmeli, son aramalar, önerilen sonuçlar ve filtreler iyi tasarlanmalıdır.

Scroll Edge ve Transparanlık Sorunu

iOS tarafında tab bar’ın scroll davranışına göre transparanlaşması bazen istenen bir durumdur, bazen de tasarımı bozabilir. Özellikle koyu arka planlı uygulamalarda tab bar’ın fazla transparan görünmesi okunabilirliği düşürebilir.

Bu nedenle Native Tabs üzerinde disableTransparentOnScrollEdge kullanılabilir:

<NativeTabs
  blurEffect="systemMaterial"
  backgroundColor="transparent"
  disableTransparentOnScrollEdge
>
  {/* tabs */}
</NativeTabs>

Bu prop, scroll edge durumlarında tab bar görünümünü daha tutarlı tutmaya yardımcı olur.

Eğer uygulamanızda uzun listeler, feed ekranları veya sonsuz scroll yapıları varsa bu davranışı gerçek cihazda test etmek gerekir. Simülatörde iyi görünen tab bar, gerçek cihazda farklı ışık, kontrast ve hareket koşullarında daha farklı algılanabilir.

Android Tarafında Ne Olur?

Liquid Glass daha çok iOS tarafında öne çıkan bir deneyimdir. Android tarafında birebir aynı glass hissini beklemek doğru değildir. Native Tabs kullanıldığında Android kendi native tab davranışlarına daha yakın bir görünüm verir.

Bu kötü bir şey değildir. Aksine, cross-platform uygulamalarda her platformun kendi kullanıcı alışkanlıklarına uygun görünüm vermesi çoğu zaman daha iyi sonuç üretir.

Bu nedenle tasarım yaparken “her platform birebir aynı görünsün” yaklaşımı yerine “her platform kendi doğal hissiyatıyla kaliteli görünsün” yaklaşımı daha doğrudur.

Atalay Tech’in iOS ve Android mobil uygulama geliştirme projelerinde de bu prensip önemlidir. iOS’ta çok doğal duran bir efekt, Android’de yapay veya ağır görünebilir. Bu yüzden platforma göre optimize edilmiş deneyim daha sağlıklı sonuç verir.

Performans Açısından Dikkat Edilmesi Gerekenler

Native Tabs kullanmak performans açısından genellikle custom JavaScript tab bar yazmaktan daha avantajlı olabilir. Çünkü tab bar davranışının önemli bir kısmı sistem tarafında yönetilir.

Ancak GlassView gibi efektli component’leri kullanırken yine de dikkatli olmak gerekir. Özellikle çok sayıda glass element’i aynı ekranda kullanmak, hareketli arka plan üzerinde glass efekt vermek veya opacity animasyonlarıyla yanlış kullanım yapmak performans sorunlarına yol açabilir.

Dikkat edilmesi gereken noktalar:

• GlassView’i her yerde kullanmayın.
• Önemli aksiyon alanlarında sınırlı kullanın.
• Liste içindeki her item’a GlassView koymayın.
• Desteklenmeyen cihazlar için fallback tasarım hazırlayın.
• Opacity ile glass efekti gizleyip göstermeyin.
• Tema ve kontrast değerlerini gerçek cihazda test edin.
• Android tarafında birebir iOS glass efekti beklemeyin.
• Tab bar için mümkünse Native Tabs kullanın, gereksiz custom tab bar yazmayın.

Bu yaklaşım özellikle büyük ölçekli uygulamalarda önemlidir. Uygulama büyüdükçe küçük UI kararları bile performans, bakım ve kullanıcı deneyimi tarafında büyük fark oluşturabilir.

UI Tasarımda Dikkat Edilmesi Gerekenler

Liquid Glass görünümü güçlü bir görsel etki yarattığı için tasarımda ölçülü kullanılmalıdır. Cam efekti uygulamanın her yerinde kullanılırsa premium görünmek yerine dağınık ve yorucu bir deneyim oluşturabilir.

İyi bir kullanım için:

• Ana tab bar native sistem davranışında kalmalı.
• Özel GlassView alanları sınırlı sayıda kullanılmalı.
• Arka plan ile glass yüzey arasında yeterli kontrast olmalı.
• Label ve ikonlar okunabilir kalmalı.
• Ana aksiyonlar cam efekt içinde kaybolmamalı.
• Kullanıcı nereye basacağını net anlamalı.
• Light mode ve dark mode ayrı ayrı test edilmeli.

Özellikle koyu temalı uygulamalarda Liquid Glass daha etkileyici görünebilir. Ancak açık temada border, tint ve kontrast değerleri daha dikkatli seçilmelidir.

Gerçek Projede Kullanım Senaryosu

Örneğin bir AI destekli içerik uygulaması geliştirdiğinizi düşünelim.

Tab yapısı şöyle olabilir:

Bu yapıda Native Tabs, ana navigasyonu platforma uygun şekilde yönetir. Ana sayfada ise GlassView ile premium bir AI aksiyon kartı gösterilebilir. Örneğin:

• “AI ile yeni içerik oluştur”
• “Bugünkü önerileri incele”
• “Premium şablonları keşfet”
• “Son oluşturulan projeye devam et”

Bu tarz glass kartlar, uygulamanın teknoloji algısını güçlendirir. Ancak ana navigasyonun kendisini custom yapmaya çalışmak yerine Native Tabs ile sistem davranışından yararlanmak daha temiz bir mimari sağlar.

SEO ve Yazılım Şirketi Açısından Bu İçerik Neden Değerli?

“Expo Native Tabs ile Liquid Glass tab bar nasıl yapılır?” gibi kodlu teknik rehberler, yalnızca geliştiricilere bilgi vermek için değil, yazılım şirketinin teknik uzmanlığını göstermek için de değerlidir.

Bir müşteri mobil uygulama yaptırmak istediğinde çoğu zaman sadece fiyat araştırmaz. Çalışacağı ekibin gerçekten mobil uygulama geliştirme bildiğini, güncel teknolojileri takip ettiğini ve modern arayüz yaklaşımlarını uygulayabildiğini görmek ister.

Bu tarz içerikler Atalay Tech için üç açıdan değer üretir:

Ancak bu içerikler tek başına ana SEO stratejisi olmamalıdır. Kodlu rehberler, mobil uygulama yaptırmak, web uygulama geliştirme, kurumsal web tasarım ve özel yazılım sayfalarını destekleyen teknik otorite içerikleri olarak konumlandırılmalıdır.

Sık Yapılan Hatalar

Expo Native Tabs ve GlassView kullanırken yapılan bazı hatalar, uygulamanın hem görünümünü hem de stabilitesini bozabilir.

Bu hatalardan kaçınmak için hem iOS hem Android gerçek cihazlarda test yapmak gerekir. Özellikle Liquid Glass gibi yeni tasarım yaklaşımlarında yalnızca simülatör görüntüsüne güvenmek doğru değildir.

Sonuç

Expo ile Liquid Glass hissiyatlı bir bottom tab bar yapmak için en doğru yaklaşım, tab bar’ın kendisini Expo Router Native Tabs ile oluşturmaktır. Böylece uygulama, platformun kendi native tab davranışlarından yararlanır ve iOS tarafında sistemin sunduğu modern glass görünümüne daha doğal şekilde uyum sağlar.

expo-glass-effect paketiyle gelen GlassView ise tab bar’ın yerine geçmez. Bu component; özel kartlar, floating butonlar, mini toolbar’lar, medya kontrol alanları veya premium aksiyon kutuları gibi özel UI parçalarında kullanılmalıdır.

Bu rehberde Expo Router Native Tabs ile tab layout oluşturduk, tab ikonlarını ve label’ları tanımladık, blurEffect, backgroundColor ve disableTransparentOnScrollEdge gibi önemli ayarları kullandık. Ardından GlassView ve GlassContainer ile özel glass component örnekleri hazırladık.

Gerçek projelerde bu yapıyı kullanırken yalnızca görsel etkiye odaklanmak yeterli değildir. Platform farkları, fallback tasarım, performans, erişilebilirlik, tema desteği ve gerçek cihaz testleri mutlaka dikkate alınmalıdır.

Atalay Tech olarak modern mobil uygulama projelerinde React Native, Expo, native modüller, backend API mimarisi, bildirim sistemleri, güvenli kullanıcı yönetimi ve ölçeklenebilir altyapıyı birlikte ele alıyoruz. Markanız için iOS ve Android uyumlu, modern, performanslı ve ölçeklenebilir bir mobil uygulama geliştirmek istiyorsanız mobil uygulama geliştirme hizmeti sayfamız üzerinden bizimle iletişime geçebilirsiniz.