import React, { Component } from 'react';
import { Button, Image, StyleSheet, ScrollView, View, Text, TouchableOpacity } from 'react-native';
import { Icon } from 'react-native-elements';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import A from './screen/Home';
import b from './screen/Member';
import C from './screen/Setting';
import D from './screen/Booking';

// import D from './screen/Tabs4';
// import E from './screen/Tabs5';

const App = createBottomTabNavigator(
  {
    Home: { screen: A},
    Account: { screen: b},
    Setting: { screen: C },
    // Booking: { screen: D}

    // Tabs5: { screen: E},
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({

      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        if (routeName === 'Home') {
          return (
            // <Icon name="rowing" />

            <Image
              source={
                focused
                 ? require('./asset/images/home.png')
                 : require('./asset/images/color/home.png')
              }
              style={{
                width: 30,
                height: 30,
              }}
            />

          );
        } else if (routeName === 'Account') {
          return (
            <Image
              source={
                focused
                 ? require('./asset/images/man-user.png')
                 : require('./asset/images/color/user.png')
              }
              style={{
                width: 30,
                height: 30,
              }}
            />
          );
        }  else if (routeName === 'Setting') {
            return (
                <Image
                source={
                    focused
                    ? require('./asset/images/setting.png')
                    : require('./asset/images/color/settings.png')
                }
                style = {{
                    width: 30,
                    height: 30,
                }}
                />
            );
        } else if (routeName === 'Booking') {

        }
    }



    }),

    tabBarOptions: {
      activeTintColor: '#fff',
      inactiveTintColor: 'white',
      style: {
          backgroundColor: '#E91E63',
          color: '#E91E63',
          fontWeight: 'bold',
          fontSize: 20,
           height: 70,
        //    borderTopLeftRadius: 20,
        // borderTopRightRadius: 20,
      },

    },

  }
);
export default createAppContainer(App);