Skip to main content

​
BottomNavigation

BottomNavigation is a bar with tabs styled by Eva Design System. It should contain BottomNavigationTab components to provide a usable navigation component, commonly placed at the bottom of mobile applications.

​
Import

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

​
Basic Usage

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

export const BottomNavigationExample = () => {
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  return (
    <BottomNavigation
      selectedIndex={selectedIndex}
      onSelect={index => setSelectedIndex(index)}>
      <BottomNavigationTab title='HOME'/>
      <BottomNavigationTab title='PROFILE'/>
      <BottomNavigationTab title='SETTINGS'/>
    </BottomNavigation>
  );
};

​
Props

​
BottomNavigation

​
children
ReactElement<BottomNavigationTabProps> | ReactElement<BottomNavigationTabProps>[]
Tabs to be rendered within the navigation bar. Should contain BottomNavigationTab components.
​
selectedIndex
number
default:"0"
Index of currently selected tab.
​
onSelect
(index: number) => void
Callback called when a tab is pressed. Receives the index of the selected tab.
​
appearance
'default' | 'noIndicator'
default:"'default'"
Appearance of the component. Use 'noIndicator' to hide the selection indicator.
​
indicatorStyle
StyleProp<ViewStyle>
Custom styles for the selected tab indicator.
​
...ViewProps
ViewProps
Accepts all React Native View component props.

​
BottomNavigationTab

​
title
RenderProp<TextProps> | ReactText
String, number, or a function component to render within the tab. If it is a function, it should return a Text component.
​
icon
RenderProp<Partial<ImageProps>>
Function component to render an icon within the tab. Expected to return an Image or icon component.
​
selected
boolean
default:"false"
Whether the tab is selected. This is automatically controlled by the parent BottomNavigation.
​
onSelect
(selected: boolean) => void
Callback called when the tab is pressed.
​
appearance
'default' | string
default:"'default'"
Appearance of the tab component.
​
...TouchableOpacityProps
TouchableOpacityProps
Accepts all React Native TouchableOpacity component props.

​
Examples

​
With Icons

Add icons to your bottom navigation tabs to improve visual recognition. 
import React from 'react';
import { BottomNavigation, BottomNavigationTab, Icon } from '@ui-kitten/components';

const HomeIcon = (props) => (
  <Icon {...props} name='home-outline'/>
);

const PersonIcon = (props) => (
  <Icon {...props} name='person-outline'/>
);

const SettingsIcon = (props) => (
  <Icon {...props} name='settings-outline'/>
);

export const BottomNavigationWithIcons = () => {
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  return (
    <BottomNavigation
      selectedIndex={selectedIndex}
      onSelect={index => setSelectedIndex(index)}>
      <BottomNavigationTab title='HOME' icon={HomeIcon}/>
      <BottomNavigationTab title='PROFILE' icon={PersonIcon}/>
      <BottomNavigationTab title='SETTINGS' icon={SettingsIcon}/>
    </BottomNavigation>
  );
};

​
Without Indicator

Remove the selection indicator by using the noIndicator appearance. 
import React from 'react';
import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';

export const BottomNavigationNoIndicator = () => {
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  return (
    <BottomNavigation
      appearance='noIndicator'
      selectedIndex={selectedIndex}
      onSelect={index => setSelectedIndex(index)}>
      <BottomNavigationTab title='HOME'/>
      <BottomNavigationTab title='PROFILE'/>
      <BottomNavigationTab title='SETTINGS'/>
    </BottomNavigation>
  );
};

​
With React Navigation

Integrate BottomNavigation with React Navigation to create a functional tab navigator. 
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomNavigation, BottomNavigationTab, Layout, Text } from '@ui-kitten/components';

const { Navigator, Screen } = createBottomTabNavigator();

const UsersScreen = () => (
  <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text category='h1'>USERS</Text>
  </Layout>
);

const OrdersScreen = () => (
  <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text category='h1'>ORDERS</Text>
  </Layout>
);

const BottomTabBar = ({ navigation, state }) => (
  <BottomNavigation
    selectedIndex={state.index}
    onSelect={index => navigation.navigate(state.routeNames[index])}>
    <BottomNavigationTab title='USERS'/>
    <BottomNavigationTab title='ORDERS'/>
  </BottomNavigation>
);

const TabNavigator = () => (
  <Navigator tabBar={props => <BottomTabBar {...props} />}>
    <Screen name='Users' component={UsersScreen}/>
    <Screen name='Orders' component={OrdersScreen}/>
  </Navigator>
);

export const AppNavigator = () => (
  <NavigationContainer>
    <TabNavigator/>
  </NavigationContainer>
);

​
Custom Styling

Customize the appearance of tabs by passing custom styling functions. 
import React from 'react';
import { BottomNavigation, BottomNavigationTab, Text } from '@ui-kitten/components';

export const CustomStyledBottomNavigation = () => {
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  return (
    <BottomNavigation
      selectedIndex={selectedIndex}
      onSelect={index => setSelectedIndex(index)}
      style={{ borderTopWidth: 2, borderTopColor: '#3366FF' }}
      indicatorStyle={{ backgroundColor: '#3366FF' }}>
      <BottomNavigationTab
        title={evaProps => <Text {...evaProps} style={[evaProps.style, { fontWeight: 'bold' }]}>HOME</Text>}
      />
      <BottomNavigationTab
        title={evaProps => <Text {...evaProps} style={[evaProps.style, { fontWeight: 'bold' }]}>PROFILE</Text>}
      />
    </BottomNavigation>
  );
};
BottomNavigation automatically manages the selected state of its child tabs. You only need to control the selectedIndex prop.

​
Theming

BottomNavigation can be themed using Eva Design System. Customize the component by modifying your theme’s JSON configuration: 
{
  "BottomNavigation": {
    "meta": {},
    "appearances": {
      "default": {
        "mapping": {},
        "variantGroups": {}
      },
      "noIndicator": {
        "mapping": {
          "indicatorHeight": 0
        }
      }
    }
  }
}
For detailed theming instructions, refer to the Branding Guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us