tab_bar_2.js

import * as React from 'react';
import _ from 'lodash';

import { TabNavigator } from 'react-navigation';

import { Image, TouchableOpacity, Platform } from 'react-native';

import {Text, Footer, FooterTab, Icon } from "native-base";

import Home from './home';
import Search from './search';
import Camera from './camera_mock';
import Notifications from './notifications';
import Profile from './profile';

import Style from '../services/styles';
import i18n from '../services/i18n';

import FooterButton from '../components/footer_button';

const icons = {
    profile: require('../assets/img/profile-icon.png'),
    notifications: require('../assets/img/notifications-icon.png'),
    home: require('../assets/img/home-icon.png'),
    search: require('../assets/img/search-icon.png'),
    plus: require('../assets/img/plus-rainbow-button.png')
}

export default TabNavigator(
    {
        Home: { 
            screen: Home,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) =>
                    <Image
                        source={icons.home}
                        style={{tintColor: tintColor}}
                    />
            }, 
        },
        Search: { 
            screen: Search,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) =>
                    <Image
                        source={icons.search}
                    />
            }, 
        },
        Camera: { 
            screen: Camera,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) =>
                    <Image
                        source={ Platform.OS === 'ios' ? icons.plus 
                        : require('../assets/img/plus-rainbow-button.png')}
                    />
            }, 
        },
        Notifications: { 
            screen: Notifications,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) =>
                    <Image
                        source={icons.notifications}
                        style={{tintColor: tintColor}}
                    />
            },
        },
        Profile: { 
            screen: Profile,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) =>
                    <Image
                        source={icons.profile}
                        style={{tintColor: tintColor}}
                    />
            },
        },
    },
    {
        tabBarPosition: 'bottom',
        tabBarOptions: {
            showLabel: false,
            showIcon: Platform.OS !== 'ios' ? true : true,
            activeTintColor: '#404040',
            inactiveTintColor: '#a6a6a6',
            labelStyle: {
                fontSize: 12,
            },
            style: {
                backgroundColor: Platform.OS === 'ios' ? 'white' : '#ffffff',
                height: 55,
            },
        },
        lazyLoad:true
    }
);