TopNavigation

TopNavigation is a heading component designed for screen headers. It supports a title, subtitle, alignment options, and left/right action accessories.

Import

import { TopNavigation, TopNavigationAction } from '@ui-kitten/components';

Basic Usage

import React from 'react';
import { Layout, TopNavigation, TopNavigationAction, Icon } from '@ui-kitten/components';

const BackAction = () => (
  <TopNavigationAction icon={(props) => <Icon {...props} name="arrow-back" />} />
);

const TopNavigationExample = () => (
  <Layout style={{ flex: 1 }}>
    <TopNavigation
      title="Screen Title"
      subtitle="Subtitle"
      alignment="center"
      accessoryLeft={BackAction}
      accessoryRight={() => (
        <TopNavigationAction icon={(props) => <Icon {...props} name="more-vertical" />} />
      )}
    />
  </Layout>
);

Props

TopNavigation

Property	Type	Default	Description
title	string | number | (props) => ReactElement	undefined	Title text or render function.
subtitle	string | number | (props) => ReactElement	undefined	Subtitle text or render function.
alignment	'start' | 'center'	'start'	Title alignment within the navigation bar.
accessoryLeft	() => ReactElement	undefined	Render function for the left accessory (e.g., back action).
accessoryRight	() => ReactElement	undefined	Render function for the right accessory (e.g., menu action).
appearance	'default' | 'control'	'default'	Appearance defined in the Eva mapping. Use control on a contrast background.

TopNavigation also accepts all standard React Native View props.

TopNavigationAction

Property	Type	Default	Description
icon	(props) => ReactElement	-	Render function for the action icon.
appearance	'default' | 'control'	'default'	Appearance defined in the Eva mapping. Use control on a contrast background.

TopNavigationAction also accepts all standard React Native TouchableOpacity props, including onPress and disabled.

Storybook

Live examples coming soon via Storybook.