React Native Starter
2.0.0
2.0.0
  • Getting Started
  • Architecture
  • Testing
  • Internationalization
  • Adding Pages and Components
  • Components
    • Text
    • Icon
    • Card
    • List
    • Top Navigation
    • Top Tabs
    • Bottom Tabs
    • Menu
    • Button
    • Checkbox
    • Toggle
    • Input
  • Screens
  • Theming
Powered by GitBook
On this page
  1. Components

Top Navigation

PreviousListNextTop Tabs

Last updated 4 years ago

TopNavigation provides a heading component for the entire page.

In basic example TopNavigation contains a title and actions.

    <TopNavigation>
          <Image source={topNavArrow} height={20} style={{position: "absolute", left: 0}}/>
          <View style={{ justifyContent: 'center' }}>
              <Text style={styles.topNavTitle}>Title</Text>
          </View>
    </TopNavigation>

TopNavigation may contain the right action on the left.

    <TopNavigation>
          <View style={{ justifyContent: 'center' }}>
              <Text style={styles.topNavTitle}>Title</Text>
          </View>
          <Image
              source={topNavContextMenu}
              style={{ height: 20, position: "absolute", right: 0 }}
            />
    </TopNavigation>

Properties

Name

Type

Description

title

ReactText | (TextProps) => ReactElement

String, number or a function component to render within the top navigation. If it is a function, expected to return a Text.

subtitle

ReactText | (TextProps) => ReactElement

String, number or a function component to render within the top navigation. If it is a function, expected to return a Text.

accessoryLeft

() => ReactElement

Function component to render to the left edge the top navigation.

accessoryRight

() => ReactElement

Function component to render to the right edge the top navigation.

...ViewProps

ViewProps

Any props applied to View component.