Footer Navbar

The FooterNavbar component provides a responsive and customizable bottom navigation bar for applications, commonly used for primary navigation paths.

Installation

$ cbui-cli install @crossbuildui/footernavbar

To get started, please make sure you have installed cbui-cli globally and authenticated your account. This will ensure you can access all the necessary features.

View documents

Import

MyComponent.tsx

import { FooterNavbar } from '@/crossbuildui/footernavbar';
import type { FooterNavbarItemConfig, FooterNavbarVariant, FooterNavbarColor, FooterNavbarSize, FooterNavbarRadius } from '@/crossbuildui/footernavbar';
// import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; // Or your preferred icon library
// import { View, Text } from 'react-native';
// import { useSafeAreaInsets } from 'react-native-safe-area-context'; // If using safeAreaBottom

The FooterNavbar component uses:

expo-blur for the glass variant.
react-native-safe-area-context if safeAreaBottom is true.

Ensure these are installed and configured in your project if you plan to use these features. You will also need an icon library (e.g., react-native-vector-icons) for the item icons.

FooterNavbar Component

Basic Usage

Provide an array of items to define the navigation links. Each item requires an id, label, and an icon render function.

MyComponent.tsx

<FooterNavbar items={[
  { id: 'feed', label: 'Feed', icon: ({ color, size }) => <Icon name="rss" size={size} color={color} /> },
  { id: 'chat', label: 'Chat', icon: ({ color, size }) => <Icon name="chat" size={size} color={color} /> },
  { id: 'notifications', label: 'Alerts', icon: ({ color, size }) => <Icon name="bell" size={size} color={color} /> },
]} />

Variants

The navbar supports several visual styles through the variant prop: solid (default), bordered, flat, faded, and glass. The color prop sets the base color for these variants.

MyComponent.tsx

<View style={{gap: 16}}>
  <FooterNavbar items={itemsExample.slice(0,3)} variant="solid" color="primary" activeItemColor="white" inactiveItemColor="rgba(255,255,255,0.7)" />
  <FooterNavbar items={itemsExample.slice(0,3)} variant="bordered" color="secondary" activeItemColor="secondary" />
  <FooterNavbar items={itemsExample.slice(0,3)} variant="flat" color="success" activeItemColor="success" />
  <FooterNavbar items={itemsExample.slice(0,3)} variant="faded" color="warning" activeItemColor="warning" />
  <FooterNavbar items={itemsExample.slice(0,3)} variant="glass" glassIntensity={70} glassTint="light" activeItemColor="black" inactiveItemColor="gray" />
</View>

Sizes & Radius

Adjust the navbar's height and internal spacing with the size prop (sm, md, lg). Control the top border radius using the radius prop (none, sm, md, lg, full).

MyComponent.tsx

<View style={{gap: 16}}>
  <FooterNavbar items={itemsExample.slice(0,2)} size="sm" radius="sm" color="default" />
  <FooterNavbar items={itemsExample.slice(0,3)} size="md" radius="md" color="background" />
  <FooterNavbar items={itemsExample.slice(0,4)} size="lg" radius="lg" variant="flat" color="primary" />
</View>

Item Customization

Customize the appearance and behavior of items using props like activeItemColor, inactiveItemColor, hideLabels, iconSize, labelStyle, and itemStyle. Handle item presses with onItemPress. The active item can be uncontrolled (defaultActiveIndex) or controlled (activeIndex).

MyComponent.tsx

<FooterNavbar
  items={itemsExample}
  activeItemColor="orange"
  inactiveItemColor="grey"
  hideLabels={false}
  iconSize={20} // Smaller icons
  labelStyle={{ fontWeight: 'bold', fontSize: 10 }}
  itemStyle={{ paddingVertical: 4 }} // Custom padding for each item
  onItemPress={(item, index) => console.log(`Pressed ${item.label} at index ${index}`)}
  defaultActiveIndex={1}
/>

Controlled Active Item

Manage the active item state externally by providing the activeIndex prop and updating it via the onItemPress callback.

MyComponent.tsx

function ControlledFooterNavbar() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const navItems = [
    { id: 'tab1', label: 'Tab 1', icon: ({ color, size }) => <Icon name="numeric-1-box" size={size} color={color} /> },
    { id: 'tab2', label: 'Tab 2', icon: ({ color, size }) => <Icon name="numeric-2-box" size={size} color={color} /> },
  ];

  return (
    <View>
      <FooterNavbar
        items={navItems}
        activeIndex={activeIndex}
        onItemPress={(item, index) => setActiveIndex(index)}
      />
      <Text style={{ textAlign: 'center', marginTop: 10 }}>
        Active Tab: {navItems[activeIndex]?.label}
      </Text>
    </View>
  );
}

Safe Area Handling

Set safeAreaBottom= to automatically add padding to the bottom of the navbar, respecting the device's safe area insets. This requires react-native-safe-area-context.

MyComponent.tsx

// This example assumes you are in a React Native environment
// with react-native-safe-area-context installed and configured.
<FooterNavbar
  items={itemsExample.slice(0,3)}
  safeAreaBottom={true}
  // The navbar will have paddingBottom equal to the bottom safe area inset.
/>

Glass Variant In-Depth

The glass variant applies a frosted glass effect using expo-blur. Customize it with glassIntensity (0-100) and glassTint ('light', 'dark', or 'default' - which adapts to the theme). Item colors may need adjustment for optimal contrast against the blurred background.

MyComponent.tsx

<View style={{gap: 16, padding: 10, backgroundColor: 'rgba(100,100,150,0.3)' /* Example page background */ }}>
  <Text style={{color: 'white'}}>Light Tint Glass Navbar:</Text>
  <FooterNavbar
    items={itemsExample.slice(0,3)}
    variant="glass"
    glassTint="light"
    glassIntensity={90}
    activeItemColor="blue"
    inactiveItemColor="darkgray"
    radius="md"
  />
  <Text style={{color: 'white', marginTop: 10}}>Dark Tint Glass Navbar:</Text>
  <FooterNavbar
    items={itemsExample.slice(0,3)}
    variant="glass"
    glassTint="dark"
    glassIntensity={60}
    activeItemColor="white"
    inactiveItemColor="lightgray"
    radius="lg"
    style={{ borderTopColor: 'rgba(255,255,255,0.2)' }} // Custom border for dark glass
  />
</View>

Props Overview

PROP	TYPE	DEFAULT	DESCRIPTION
`items`	`FooterNavbarItemConfig[]`	-	Array of item configurations. Required.
`variant`	`FooterNavbarVariant`	`'solid'`	Visual style of the navbar.
`color`	`FooterNavbarColor`	`'background'`	Base color for the navbar (background/border).
`size`	`FooterNavbarSize`	`'md'`	Size of the navbar and its items.
`radius`	`FooterNavbarRadius`	`'none'`	Top border radius of the navbar.
`hideLabels`	`boolean`	`false`	If true, hides all item labels.
`activeItemColor`	`string`	Theme's primary	Color for the active item's icon and label.
`inactiveItemColor`	`string`	Theme's foreground	Color for inactive items' icon and label.
`onItemPress`	`(item, index) => void`	-	Callback when an item is pressed.
`activeIndex`	`number`	-	Controlled active item index.
`defaultActiveIndex`	`number`	`0`	Initial active index (uncontrolled).
`style`	`StyleProp<ViewStyle>`	-	Custom styles for the navbar container.
`itemStyle`	`StyleProp<ViewStyle>`	-	Custom styles for each item's Pressable container.
`iconSize`	`number`	-	Overrides default icon size derived from `size`.
`labelStyle`	`StyleProp<TextStyle>`	-	Custom styles for item labels.
`safeAreaBottom`	`boolean`	`false`	Add padding for bottom safe area insets.
`glassTint`	`'default' \| 'light' \| 'dark'`	Theme-derived	Tint for the 'glass' variant.
`glassIntensity`	`number`	`80`	Intensity (0-100) for the 'glass' variant.

FooterNavbarItemConfig Props

Each object in the items array should conform to FooterNavbarItemConfig:

PROP	TYPE	DESCRIPTION
`id`	`string`	Unique identifier for the item. Required.
`icon`	`(props: { color, size, isActive }) => ReactElement`	Function returning an icon element. Required.
`label`	`string`	Optional label text for the item.
`href`	`string`	Optional href, passed to `onItemPress`.
`accessibilityLabel`	`string`	Accessibility label for the item.
`pressableProps`	`PressableProps`	Custom props for the item's Pressable component.

Styling

Customize the FooterNavbar's appearance using:

style: Applied to the main navbar container (View or BlurView). Use for borders, shadows, custom background colors (for non-glass variants), etc.
itemStyle: Applied to each individual item's root Pressable component. Useful for adjusting padding or hit area of items.
labelStyle: Applied to the Text component for item labels. Allows customization of font, color (though active/inactive colors are preferred), etc.
iconSize: Directly sets the size passed to the icon render function.
For the glass variant, the backgroundColor in the main style prop will be overridden by transparency to allow the BlurView to be effective. The blurViewStyle (internal) handles the blur effect itself.

MyComponent.tsx

<FooterNavbar
  items={itemsExample.slice(0,2)}
  variant="solid"
  color="#333333" // Custom background color
  activeItemColor="cyan"
  inactiveItemColor="#888888"
  style={{
    borderTopWidth: 3,
    borderTopColor: 'cyan',
    shadowColor: '#00ffff',
    shadowOffset: { width: 0, height: -3 },
    shadowOpacity: 0.5,
    shadowRadius: 5,
    elevation: 10, // For Android
  }}
  itemStyle={{
    // Custom style for each FooterNavbarItem Pressable
    // e.g., to add more padding or a background on hover (web)
  }}
  labelStyle={{
    fontFamily: 'Arial, sans-serif', // Custom font for labels
    textTransform: 'uppercase',
  }}
  iconSize={28} // Larger icons
/>

Accessibility

The FooterNavbar component aims to be accessible:

Each FooterNavbarItem is a Pressable with accessibilityRole="button".
The accessibilityState of each item includes { selected: isActive }.
An accessibilityLabel for each item is derived from its label prop or can be explicitly set via the accessibilityLabel in FooterNavbarItemConfig.
Ensure icons are decorative or have appropriate labels if they convey meaning not covered by the text label.

Theming Breadcrumbs