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.

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>

Scrolling the Navigation Bar on Android

By wrapping the 'inbox' scene in a CoordinatorLayout component we prevent the navigation bar from getting in the way on Android. The navigation bar gradually scrolls offscreen as the user moves down through their inbox. As soon as the user starts to scroll back up the navigation bar reappears. This functionality is only available on API level 21+ because we have to enable nested scrolling on the React Native ScrollView.

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

<CoordinatorLayout>
  <NavigationBar title="Inbox" />
  <ScrollView nestedScrollEnabled={true} />
</CoordinatorLayout>

Collapsing the Title

We can draw attention to our 'inbox' scene by enlarging the title. As the user scrolls down the large title collapses back to its normal size. We set the largeTitle prop to true and assign an initial expanded height. Then we wrap the scene in a CoordinatorLayout component and enable nested scrolling. On Android, the navigation bar needs a CollapsingBar child. Any content of the CollapsingBar collapses along with the title.

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

<CoordinatorLayout>
  <NavigationBar title="Inbox" largeTitle={true} style={{height: 120}}>
    <CollapsingBar />
  </NavigationBar>
  <ScrollView nestedScrollEnabled={true} />
</CoordinatorLayout>