Skip to content
This repository has been archived by the owner on Oct 27, 2021. It is now read-only.

Latest commit

 

History

History
49 lines (37 loc) · 2.14 KB

BOTTOM_NAVIGATION.md

File metadata and controls

49 lines (37 loc) · 2.14 KB

<BottomNavigation />

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

Example

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

const App = () => (
  <BottomNavigation lazy={false} tabActiveTintColor="blue">
    <Tab label="Feed" path="/feed" component={require('./Feed')} />
    <Tab label="Profile" path="/profile" component={require('./Profile')} />
  </BottomNavigation>
)

Options

TabBar props

  • hideTabBar ?boolean whether to display tab bar
  • tabBarStyle ?StyleSheet override style for the tab bar
  • renderTabBar ?Function callback which renders a tab bar
  • tabStyle ?StyleSheet override style for the tab item
  • 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
  • renderTabIcon ?Function optional callback which receives the current scene and returns a React Element to be used as an icon

<BottomNavigation /> props

  • ... TabBar 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