react-navigation/docs/api/navigators/TabNavigator.md

TabNavigator

Used to easily set up a screen with several tabs with a TabRouter.

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBar: {
      label: 'Home',
      // Note: By default the icon is only shown on iOS. Search the showIcon option below.
      icon: ({ tintColor }) => (
        <Image
          source={require('./chats-icon.png')}
          style={[styles.icon, {tintColor: tintColor}]}
        />
      ),
    },
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    tabBar: {
      label: 'Notifications',
      icon: ({ tintColor }) => (
        <Image
          source={require('./notif-icon.png')}
          style={[styles.tabIcon, {tintColor: tintColor}]}
        />
      ),
    },
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
});

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

API Definition

TabNavigator(RouteConfigs, TabNavigatorConfig)

RouteConfigs

The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route, see example from StackNavigator.

TabNavigatorConfig

• tabBarComponent - component to use as the tab bar, e.g. TabView.TabBarBottom (this is the default on iOS), TabView.TabBarTop (this is the default on Android)
• tabBarPosition - position of the tab bar, can be 'top' or 'bottom'
• swipeEnabled - whether to allow swiping between tabs
• animationEnabled - whether to animate when changing tabs
• lazyLoad - whether to lazily render tabs as needed as opposed to rendering them upfront
• tabBarOptions - configure the tab bar, see below.

Several options get passed to the underlying router to modify navigation logic:

• initialRouteName - The routeName for the initial tab route when first loading
• order - Array of routeNames which defines the order of the tabs
• paths - Provide a mapping of routeName to path config, which overrides the paths set in the routeConfigs.
• backBehavior - Should the back button cause a tab switch to the initial tab? If yes, set to initialRoute, otherwise none. Defaults to initialRoute behavior.

tabBarOptions for TabBarBottom (default tab bar on iOS)

• activeTintColor - label and icon color of the active tab
• activeBackgroundColor - background color of the active tab
• inactiveTintColor - label and icon color of the inactive tab
• inactiveBackgroundColor - background color of the inactive tab
• showLabel - whether to show label for tab, default is true
• style - style object for the tab bar
• labelStyle - style object for the tab label

Example:

tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: { fontSize: 12 },
  style: {
    backgroundColor: 'blue',
  }
}

tabBarOptions for TabBarTop (default tab bar on Android)

• activeTintColor - label and icon color of the active tab
• inactiveTintColor - label and icon color of the inactive tab
• showIcon - whether to show icon for tab, default is false
• showLabel - whether to show label for tab, default is true
• upperCaseLabel - whether to make label uppercase, default is true
• pressColor - color for material ripple (Android >= 5.0 only)
• pressOpacity - opacity for pressed tab (iOS and Android < 5.0 only)
• scrollEnabled - whether to enable scrollable tabs
• tabStyle - style object for the tab
• indicatorStyle - style object for the tab indicator (line at the bottom of the tab)
• labelStyle - style object for the tab label
• style - style object for the tab bar

Example:

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  }
}

Screen Navigation Options

Usually you define static navigationOptions on your screen component. For example:

class ProfileScreen extends React.Component {

  static navigationOptions = {

    title: ({ state }) => `${state.params.name}'s Profile!`,

    tabBar: ({ state, setParams }) => ({
      icon: (
        <Image src={require('./my-icon.png')} />
      ),
    }),
  };
  ...

All navigationOptions for the TabNavigator:

• title - a title (string) of the scene
• tabBar - a config object for the tab bar:
  • visible - Boolean toggle of tab bar visibility
  • icon - React Element or a function that given { focused: boolean, tintColor: string } returns a React.Element, to display in tab bar
  • label - Title string of a tab displayed in the tab bar. When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section

Navigator Props

The navigator component created by TabNavigator(...) takes the following props:

• screenProps - Pass down extra options to child screens, for example:

const TabNav = TabNavigator({
  // config
});

<TabNav
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>