Bottom Tabs

BottomNavigation provides tab-based navigation displayed at the bottom of the screen, commonly used for primary app navigation.

Import

import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';

Basic Usage

import React, { useState } from 'react';
import { Layout, BottomNavigation, BottomNavigationTab, Icon } from '@ui-kitten/components';

const BottomTabsExample = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <Layout style={{ flex: 1 }}>
      {/* Screen content */}
      <BottomNavigation
        selectedIndex={selectedIndex}
        onSelect={setSelectedIndex}
      >
        <BottomNavigationTab
          title="Home"
          icon={(props) => <Icon {...props} name="home" />}
        />
        <BottomNavigationTab
          title="Search"
          icon={(props) => <Icon {...props} name="search" />}
        />
        <BottomNavigationTab
          title="Profile"
          icon={(props) => <Icon {...props} name="person" />}
        />
      </BottomNavigation>
    </Layout>
  );
};

Props

BottomNavigation

Property	Type	Default	Description
selectedIndex	number	0	Index of the currently selected tab.
onSelect	(index: number) => void	-	Called when a tab is selected.
appearance	'default' | 'noIndicator'	'default'	Visual style variant.
indicatorStyle	ViewStyle	undefined	Style applied to the active tab indicator.
children	BottomNavigationTab[]	-	Tab elements.

BottomNavigationTab

Property	Type	Default	Description
title	ReactText | (props) => ReactElement	undefined	Tab title text or render function.
icon	(props) => ReactElement	undefined	Render function for the tab icon.

Storybook

Live examples coming soon via Storybook.