TABS.md

December 1, 2018 ยท View on GitHub

Tabs make it easy to explore and switch between different views.

Example

import * as React from 'react'
import { Tabs, Tab } from 'react-router-navigation'

const App = () => (
  <Tabs
    labelStyle={{ color: 'white' }}
    tabBarStyle={{ backgroundColor: 'purple' }}
    tabBarIndicatorStyle={{ backgroundColor: 'white' }}
  >
    <Tab path="/one" component={require('./One')} />
    <Tab path="/two" component={require('./Two')} />
    <Tab path="/three" component={require('./Three')} />
  </Tabs>
)

Options

TabBar props

  • hideTabBar ?boolean whether to display tab bar
  • tabBarStyle ?StyleSheet style override for the tab bar
  • renderTabBar ?Function callback which renders a bottom tab bar
  • tabBarPosition ?('top' | 'bottom') sets the position of the tab bar
  • tabStyle ?StyleSheet style override for the tab bar
  • tabBarIndicatorStyle ?StyleSheet style object for the tab indicator
  • tabTintColor ?string label and icon color of the tab
  • tabActiveTintColor ?string label and icon color of the active tab
  • label ?string text that appears on each item
  • labelStyle ?(StyleSheet | Function) styling text item
  • renderLabel ?Function callback which renders a label

<Tabs /> props

  • ... TabBar props props
  • style ?StyleSheet override or extend the default style for <View /> container
  • initialLayout optional object containing the initial height and width, can be passed to prevent the one frame delay in rendering
  • lazy ?boolean whether to load tabs lazily when you start switching

<Tab /> props