Top Navigation

Search…
Top Navigation
​
TopNavigation provides a heading component for the entire page.
In basic example TopNavigation contains a title and actions.
1
    <TopNavigation>
2
          <Image source={topNavArrow} height={20} style={{position: "absolute", left: 0}}/>
3
          <View style={{ justifyContent: 'center' }}>
4
              <Text style={styles.topNavTitle}>Title</Text>
5
          </View>
6
    </TopNavigation>
Copied!
​
TopNavigation may contain the right action on the left.
1
    <TopNavigation>
2
          <View style={{ justifyContent: 'center' }}>
3
              <Text style={styles.topNavTitle}>Title</Text>
4
          </View>
5
          <Image
6
              source={topNavContextMenu}
7
              style={{ height: 20, position: "absolute", right: 0 }}
8
            />
9
    </TopNavigation>
Copied!
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.
​
List
Top Tabs
Last modified 1yr ago
Copy link
Contents
Properties