Tab Bar (iOS)

The TabBarIOS component gives you a native tabbed interface in iOS. Each tab has its own stack of screens. To ensure that pushing and popping in one tab doesn't affect the stack in another tab, you give each tab its own StateNavigator. Let's add tabs to our email example. One tab for the user's inbox and another for their list of contacts. We create a new StateNavigator for the 'contacts' tab. It contains two States so the user can view all their contacts and edit the details of an individual contact.

var contactsNavigator = new StateNavigator([
  {key: 'contacts'},
  {key: 'contact', trackCrumbTrail: true}
]);

You must render the TabBarIOS component at the root of your app because iOS doesn't support adding a tabbed interface to a scene. You create a NavigationStack for each tab and give each one a dedicated StateNavigator. Wrap each stack in a TabBarItemIOS component and add them as children of TabBarIOS. You identify your tabs using the image and title props of the TabBarItemIOS component. In our email example, we set the systemItem prop so that the 'contacts' tab displays with the inbuilt iOS icon for contacts.

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

<TabBarIOS>
  <TabBarItemIOS title="Inbox" image={require('./inbox.png')}>
    <NavigationHandler stateNavigator={stateNavigator}>
      <NavigationStack />
    </NavigationHandler>
  </TabBarItemIOS>
  <TabBarItemIOS systemItem="contacts">
    <NavigationHandler stateNavigator={contactsNavigator}>
      <NavigationStack />
    </NavigationHandler>
  </TabBarItemIOS>
</TabBarIOS>

You can avoid the performance costs of rendering all the tabs' content upfront by rendering them on demand instead. In our email example, the user starts off on their inbox so we don't need to render their list of contacts until they click on that tab. Inside the onPress handler of the 'contacts' tab we navigate to the 'contacts' State to begin the rendering.

<TabBarItemIOS systemItem="contacts" onPress={() => {
  if (!contactsNavigator.stateContext.state) {
    contactsNavigator.navigate('contacts');
  }
}}>