Each example so far in this chapter has used Button components to link to other screens in the app. You can use functions from react-navigation that will create tab or drawer navigation for you automatically based on the screen components that you give it.

Let's create an example that uses bottom tab navigation on iOS and drawer navigation on Android.

import {
  createBottomTabNavigator,
  createDrawerNavigator
} from 'react-navigation';
import { Platform } from 'react-native';
import Home from './Home';
import News from './News';
import Settings from './Settings';

const { createNavigator } = Platform.select({
  ios: { createNavigator: createBottomTabNavigator },
  android: { createNavigator: createDrawerNavigator }
});

export default createNavigator(
  {
    Home,
    News,
    Settings
  },
  { initialRouteName: 'Home' }
);

Instead of using the createStackNavigator() function to create your navigator, you're importing the createBottomTabNavigator() and createDrawerNavigator() functions from react-navigation:

import {
  createBottomTabNavigator,
  createDrawerNavigator
} from 'react-navigation';

Then you're using the Platform utility from react-native to decide which of these two functions to use. The result, depending on the platform, is assigned to createNavigator():

const { createNavigator } = Platform.select({
  ios: { createNavigator: createBottomTabNavigator },
  android: { createNavigator: createDrawerNavigator }
});

Now you can call createNavigator() and pass it to your screens. The resulting tab or drawer navigation will be created and rendered for you:

export default createNavigator(
  {
    Home,
    News,
    Settings
  },
  { initialRouteName: 'Home' }
);

Next, let's take a look at the Home screen component:

import React from 'react';
import { View, Text } from 'react-native';

import styles from './styles';

const Home = ({ navigation }) => (
  <View style={styles.container}>
    <Text>Home Content</Text>
  </View>
);

Home.navigationOptions = {
  title: 'Home'
};

export default Home;

It sets the title in the navigation bar and renders some basic content. The News and Settings components are essentially the same as Home.

Here's what the bottom tab navigation looks like on iOS:

The three screens that make up your app are listed at the bottom. The current screen is marked as active and you can click on the other tabs to move around.

Now, let's see what the drawer layout looks like on Android:

To open the drawer, you need to swipe from the left side of the screen. Once open, you'll see buttons that will take you to the various screens of your app.