UI Bar Buttons (iOS)

The Navigation router uses the underlying native API on iOS to provide a UI Navigation Bar at the top of each scene. Alongside the scene's title and back button, you can add your own buttons to the UI Bar using the BarButtonIOS component. It has a systemItem prop that displays an inbuilt button, 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 UI 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 UI Bar that navigates to the compose scene.

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

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