# Top Navigation

TopNavigation provides a heading component for the entire page.

![](/files/-MGxGTRZXs5MV4FttG_f)

In basic example TopNavigation contains a title and actions.

```jsx
    <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.

```jsx
    <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.                                                                                        |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reactnativestarter.com/components/adwad.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.