Top Tabs

TabBar renders a horizontal row of tabs at the top of a screen. TabView combines a TabBar with a ViewPager for swipeable tab content.

Import

import { TabBar, TabView, Tab } from '@ui-kitten/components';

Basic Usage

TabBar Only

import React, { useState } from 'react';
import { Layout, TabBar, Tab } from '@ui-kitten/components';

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

  return (
    <Layout style={{ flex: 1 }}>
      <TabBar selectedIndex={selectedIndex} onSelect={setSelectedIndex}>
        <Tab title="Users" />
        <Tab title="Orders" />
        <Tab title="Settings" />
      </TabBar>
    </Layout>
  );
};

TabView with Content

import React, { useState } from 'react';
import { Layout, TabView, Tab, Text } from '@ui-kitten/components';

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

  return (
    <TabView selectedIndex={selectedIndex} onSelect={setSelectedIndex}>
      <Tab title="Users">
        <Layout style={{ padding: 16 }}>
          <Text>Users content</Text>
        </Layout>
      </Tab>
      <Tab title="Orders">
        <Layout style={{ padding: 16 }}>
          <Text>Orders content</Text>
        </Layout>
      </Tab>
    </TabView>
  );
};

Props

TabBar

Property	Type	Default	Description
selectedIndex	number	0	Index of the currently selected tab.
onSelect	(index: number) => void	-	Called when a tab is selected.
indicatorStyle	ViewStyle	undefined	Style applied to the active tab indicator.
children	Tab[]	-	Tab elements.
appearance	'default'	'default'	Appearance defined in the Eva mapping.

TabBar also accepts all standard React Native View props.

TabView

Property	Type	Default	Description
selectedIndex	number	0	Index of the currently selected tab.
onSelect	(index: number) => void	-	Called when a tab is selected.
children	Tab[]	-	Tab elements with content as their children.
tabBarStyle	ViewStyle	undefined	Style applied to the tab bar.
indicatorStyle	ViewStyle	undefined	Style applied to the active tab indicator.
swipeEnabled	boolean	true	Whether tabs can be changed by swiping the content.
shouldLoadComponent	(index: number) => boolean	() => true	Predicate to lazily load tab content. Return false to skip rendering.
animationDuration	number	undefined	Duration of the tab transition animation, in milliseconds.
onOffsetChange	(offset: number) => void	undefined	Called while the content scrolls, with the current horizontal offset.

TabView is built on ViewPager and accepts its properties too.

Tab

Property	Type	Default	Description
title	string | number | (props) => ReactElement	undefined	Tab title text or render function.
icon	(props) => ReactElement	undefined	Render function for the tab icon.
children	ReactNode	undefined	Content displayed when the tab is selected (used with TabView).
selected	boolean	false	Whether the tab is rendered as selected. Managed by TabBar.
onSelect	(selected: boolean) => void	undefined	Called when the tab is selected. Managed by TabBar.
appearance	'default'	'default'	Appearance defined in the Eva mapping.

Tab also accepts all standard React Native TouchableOpacity props.

Storybook

Live examples coming soon via Storybook.