Navigation Bar

Setting the Title

The Navigation router uses the underlying native APIs on Android and iOS to provide a native navigation bar that you can position at the top of each scene. The title prop of the NavigationBar component configures a scene's title. You enable large titles on iOS by setting the largeTitle prop to true.

import {NavigationBar} from 'navigation-react-native';

<NavigationBar title="Inbox" />

You can customise the title view using the TitleBar component. In our email example app, we can add an image next to the 'inbox' title.

import {NavigationBar, TitleBar} from 'navigation-react-native';

<NavigationBar>
  <TitleBar>
    <Text>Inbox</Text>
    <Image src={require('./inbox.png')} />
  </TitleBar>
</NavigationBar>

Adding Buttons

Alongside the scene's title, you can add your own buttons using the BarButton component. You can pass your own text and image using the title and image props. Your buttons appear on the right or left of the navigation bar on iOS, depending on whether you wrap them in a RightBar or LeftBar component. On Android they appear on the right of the navigation bar or in the overflow menu depending on the value you assign to the show prop. In our email example, we can add a 'compose' button to the right of the navigation bar that navigates to the 'compose' scene. We set the systemItem prop so it displays the inbuilt 'compose' icon on iOS.

import {NavigationBar, RightBar, BarButton} from 'navigation-react-native';

<NavigationBar title="Inbox">
  <RightBar>
    <BarButton title="compose" systemItem="compose" onPress={() => {
      stateNavigator.navigate('compose');
    }} />
  </RightBar>
</NavigationBar>

Adding a Search Bar

The SearchBar component displays a search bar below the title in the navigation bar. It calls the onChangeText prop whenever the search text changes. Any search results you render into the component’s children are displayed in a new native screen that sits over the top of the current one. On Android, you trigger the search via a BarButton with the search prop set to 'true'. We allow the user to search their inbox in our example application by adding a SearchBar component to the 'mail' scene.

Note

On Android, wrap the scene in a View component with collapsable set to 'false'. On iOS, wrap the scene in a ScrollView component with contentInsetAdjustmentBehavior set to 'automatic'
import {NavigationBar, RightBar, BarButton, SearchBar} from 'navigation-react-native';

<NavigationBar title="Inbox">
  <SearchBar
    text={text}
    obscureBackground={false}
    onChangeText={text => this.setState({text})}>
    <ScrollView>
      {mails
        .filter(({message}) => message.indexOf(text) !== -1)
        .map(({title}) => <Text>{title}</Text>)}
    </ScrollView>
  </SearchBar>
  <RightBar>
    <BarButton title="search" search={true} />
  </RightBar>
</NavigationBar>