Navigation Bar (iOS)

Setting the Title

The Navigation router uses the underlying native API on iOS to provide a native navigation bar at the top of each scene. The title and largeTitle props of the NavigationBarIOS component configure a scene's title. You can also hide the navigation bar entirely via the hidden prop.

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

<NavigationBarIOS title="Inbox" />

Adding Right and Left Bar Buttons

Alongside the scene's title, you can add your own buttons using the BarButtonIOS component. It has a systemItem prop that displays an inbuilt button, like 'Cancel' or 'Done', or 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 depending on whether you wrap them in a RightBarIOS or LeftBarIOS component. In our email example, we can add a 'compose' button to the right of the navigation bar that navigates to the 'compose' scene.

import {RightBarIOS, BarButtonIOS} from 'navigation-react-native';

<RightBarIOS>
  <BarButtonIOS systemItem="compose" onPress={() => {
    stateNavigator.navigate('compose');
  }} />
</RightBarIOS>

Adding a Search Bar

The SearchBarIOS 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. We allow the user to search their inbox in our example application by adding a SearchBarIOS component to the 'mail' scene. Setting obscureBackground to 'false' keeps the inbox interactive when the search text is focused but empty.

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

<SearchBarIOS
  text={text}
  obscureBackground={false}
  onChangeText={text => this.setState({text})}>
  <ScrollView>
    {mails
      .filter(({message}) => message.indexOf(text) !== -1)
      .map(({title}) => <Text>{title}</Text>)}
  </ScrollView>
</SearchBarIOS>