How to use react-navigation-tabs - 10 common examples

)(TabBarIcon)

// The default container has some `hitSlop` set which messes up the clickable
// area
const TabBarIconContainer = props => (
  
    
  
)

// globalColors automatically respects dark mode pref
const getBg = () => Styles.globalColors.white

const BlankScreen = () => null

const VanillaTabNavigator = createBottomTabNavigator(
  tabs.reduce(
    (map, tab) => {
      map[tab] = createStackNavigator(Shim.shim(routes), {
        bgOnlyDuringTransition: Styles.isAndroid ? getBg : undefined,
        cardStyle: Styles.isAndroid ? {backgroundColor: 'rgba(0,0,0,0)'} : undefined,
        defaultNavigationOptions,
        headerMode,
        initialRouteName: tabRoots[tab],
        initialRouteParams: undefined,
        transitionConfig: () => ({
          transitionSpec: {
            // the 'accurate' ios one is very slow to stop so going back leads to a missed taps
            duration: 250,
            easing: Kb.NativeEasing.bezier(0.2833, 0.99, 0.31833, 0.99),
            timing: Kb.NativeAnimated.timing,
          },

)(TabBarIcon)

// The default container has some `hitSlop` set which messes up the clickable
// area
const TabBarIconContainer = props => (
  
    
  
)

// globalColors automatically respects dark mode pref
const getBg = () => Styles.globalColors.white

const BlankScreen = () => null

const VanillaTabNavigator = createBottomTabNavigator(
  tabs.reduce(
    (map, tab) => {
      map[tab] = createStackNavigator(Shim.shim(routes), {
        bgOnlyDuringTransition: Styles.isAndroid ? getBg : undefined,
        cardStyle: Styles.isAndroid ? {backgroundColor: 'rgba(0,0,0,0)'} : undefined,
        defaultNavigationOptions,
        headerMode,
        initialRouteName: tabRoots[tab],
        initialRouteParams: undefined,
        transitionConfig: () => ({
          transitionSpec: {
            // the 'accurate' ios one is very slow to stop so going back leads to a missed taps
            duration: 250,
            easing: Kb.NativeEasing.bezier(0.2833, 0.99, 0.31833, 0.99),
            timing: Kb.NativeAnimated.timing,
          },

const AccountsStack = createStackNavigator(
  {
    Accounts,
    // $FlowFixMe
    Account,
  },
  stackNavigatorConfig,
);
AccountsStack.navigationOptions = {
  header: null,
  tabBarIcon: (props: *) => (
    
  ),
};

const Main = createBottomTabNavigator(
  {
    Portfolio: {
      screen: Portfolio,
      navigationOptions: {
        tabBarIcon: (props: *) => (
          
        ),
      },
    },
    AccountsStack,
    Transfer,
    ManagerStack,
    SettingsStack,
  },
  {
    tabBarOptions: {

import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createStackNavigator } from 'react-navigation-stack'
import ArtistList from "./containers/ArtistList";
import Config from "./containers/Config";
import PlaylistList from "./containers/PlaylistList";
import Search from "./containers/Search";
import ArtistView from './containers/ArtistView';
import SongView from './containers/SongView';
import PlaylistView from './containers/PlaylistView';
import SongList from './containers/SongList';

const AppNavigation = createBottomTabNavigator({
  ArtistList: createStackNavigator({
    ArtistList,
    ArtistView,
    SongView
  }),
  SongList: createStackNavigator({
    SongList,
    SongView
  }),
  //PlaylistList: createStackNavigator({
  //  PlaylistList,
  //  PlaylistView,
  //  SongView
  //}),
  //Search,
  Config,

import React from 'react'
import { createBottomTabNavigator } from 'react-navigation-tabs';
import TabBarItem from "../view/TabBarItem";
import Images from "../app/Images";
import OrderScreen from "../screen/main/OrderScreen";
import MyScreen from "../screen/main/MyScreen";
import Color from "../app/Color";
import HomeScreen from '../screen/main/HomeScreen';
import FindScreen from '../screen/main/FindScreen';

export const Tabs = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: ({navigation}) => ({
        tabBarLabel: '外卖',
        tabBarIcon: ({focused, tintColor}) => (
          
        )
      }),
    },

return (
    
      {text}
    
  );
};

// TAB NAVIGATION FLOW
const tabNavigation = createBottomTabNavigator(
  {
    [HOME_TAB]: {
      screen: homeFlow,
      navigationOptions: ({ navigation, screenProps }) => ({
        tabBarIcon: tabBarIcon({
          iconActive: iconHomeActive,
          icon: iconHome,
          hasIndicator: !navigation.isFocused() && (screenProps.hasUnreadNotifications
            || !!screenProps.intercomNotificationsCount),
          theme: screenProps.theme,
        }),
        tabBarLabel: tabBarLabel({ text: 'Home', theme: screenProps.theme }),
      }),
    },
    [ASSETS]: {
      screen: assetsFlow,

import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { colors } from '../constants';

// navigation stacks
import HomeStack from './HomeStack';
import MultiStack from './MultiStack';
import StatsStack from './StatsStack';
import SettingsStack from './SettingsStack';

const TabNavigator = createBottomTabNavigator(
  {
    HomeStack,
    MultiStack,
    StatsStack,
    SettingsStack
  },
  {
    initialRouteName: 'HomeStack',
    tabBarOptions: {
      activeTintColor: {
        light: colors.darkColor,
        dark: colors.grey
      },
      inactiveTintColor: {
        light: colors.grey,
        dark: colors.white20

Login,
  Notification,
  Post,
  Profile,
  ProfileEdit,
  Reblogs,
  Redeem,
  SearchResult,
  Settings,
  SpinGame,
  Transfer,
  Voters,
  Wallet,
} from '../screens';

const bottomTabNavigator = createBottomTabNavigator(
  {
    [ROUTES.TABBAR.FEED]: {
      screen: Feed,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => (
          
        ),
      }),
    },
    [ROUTES.TABBAR.NOTIFICATION]: {
      screen: Notification,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => (

const SearchStack = createStackNavigator({
  [NAVIGATION_SEARCH_SCREEN_PATH]: SearchScreen,
  [NAVIGATION_SEARCH_PRODUCT_PATH]: Product,
}, {
  navigationOptions: defaultHeader,
});

const CartStack = createStackNavigator({
  [NAVIGATION_CART_PATH]: Cart,
  [NAVIGATION_CHECKOUT_PATH]: Checkout,
}, {
  navigationOptions: defaultHeader,
});

const MainAppNavigator = createBottomTabNavigator(
  {
    [NAVIGATION_HOME_STACK_PATH]: {
      screen: HomeStack,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => ,
      }),
    },
    [NAVIGATION_SEARCH_SCREEN_PATH]: {
      screen: SearchStack,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => ,
      }),
    },
    [NAVIGATION_AUTH_STACK_PATH]: {
      screen: AccountSwitch,
      navigationOptions: () => ({

const ProfileStackNavigator = createStackNavigator(
  {
    profile: ProfileScreen,
  },
  {
    headerMode: 'none',
    navigationOptions: ({ navigation }) => {
      return {
        tabBarVisible: navigation.state.routes.length > 1 ? false : true,
      };
    },
  },
);

const TabBarNavigator = createBottomTabNavigator(
  {
    about: AboutStackNavigator,
    profile: ProfileStackNavigator,
  },
  {
    initialRouteName: '',
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'about') {
          iconName = `ios-notifications`;
        } else if (routeName === 'Home') {
          iconName = `ios-home`;
        } else if (routeName === 'profile') {
          iconName = `ios-people`;