Tab Bar Layout

A common mobile layout with a floating bottom navigation bar and scrollable content area. The FloatingMenuBar sits above the content with spring-animated tab switching.

Full Screen Layout

The most common mobile app layout — a full-screen content area with a floating bottom tab bar.

tsx

import { View, ScrollView, Text, StyleSheet } from 'react-native';
import { FloatingMenuBar, Card, CardTitle, CardContent, VStack } from '@tac-ui/native';
import { Home, Search, Bell, User } from '@tac-ui/icon-native';

const tabs = [
  { key: 'home', icon: (p) => <Home {...p} />, label: 'Home' },
  { key: 'search', icon: (p) => <Search {...p} />, label: 'Search' },
  { key: 'inbox', icon: (p) => <Bell {...p} />, label: 'Inbox', badge: 5 },
  { key: 'profile', icon: (p) => <User {...p} />, label: 'Profile' },
];

export default function TabBarScreen() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <View style={{ flex: 1 }}>
      <ScrollView
        contentContainerStyle={{ padding: 16, paddingBottom: 100 }}
      >
        <VStack gap="md">
          <Card>
            <CardTitle>Welcome</CardTitle>
            <CardContent>
              <Text>Your main content goes here.</Text>
            </CardContent>
          </Card>
          {/* More cards... */}
        </VStack>
      </ScrollView>

      <FloatingMenuBar
        items={tabs}
        activeKey={activeTab}
        onSelect={setActiveTab}
      />
    </View>
  );
}

Glass Variant with Background

Use the glass variant for a frosted navigation bar that blends with rich content backgrounds like maps or images.

tsx

export default function GlassTabBarScreen() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <View style={{ flex: 1 }}>
      {/* Background content (e.g., map, image feed) */}
      <Image
        source={{ uri: 'https://example.com/bg.jpg' }}
        style={StyleSheet.absoluteFill}
      />

      <FloatingMenuBar
        items={tabs}
        activeKey={activeTab}
        onSelect={setActiveTab}
        glass
      />
    </View>
  );
}

With Screen Switching

Combine with conditional rendering or a navigation library to switch between screen content based on the active tab.

tsx

function TabBarApp() {
  const [tab, setTab] = useState('home');

  const screens: Record<string, React.ReactNode> = {
    home: <HomeScreen />,
    search: <SearchScreen />,
    inbox: <InboxScreen />,
    profile: <ProfileScreen />,
  };

  return (
    <View style={{ flex: 1 }}>
      {screens[tab]}
      <FloatingMenuBar
        items={tabs}
        activeKey={tab}
        onSelect={setTab}
      />
    </View>
  );
}