import React from 'react';
import {
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen'
import {Icon} from 'react-native-elements';

const Tab = createBottomTabNavigator();

function BottomTab() {
  return (
    <Tab.Navigator
	screenOptions={{
		"tabBarShowLabel": false,
		"tabBarStyle": [{
		"position": 'absolute',
		"bottom": 10,
		"left": 20,
		"right": 20,
		"elevation": 0,
		"backgroundColor" : '#cdcdcd',
		"borderRadius": 25,
		"height": 50,
		"width": "90%"

		}]
	}}

	  >
      <Tab.Screen name="Home" component={HomeScreen} options={{

	      "tabBarIcon": ({focused}) => (

          <Icon name='home-outline'  type='ionicon' size={36} color='#206ba5' ></Icon>


	      )

      }}/>
      <Tab.Screen name="s" component={HomeScreen} options={{

	      "tabBarIcon": ({focused}) => (

          <Icon name='search-outline'  type='ionicon' size={36} color='#206ba5' ></Icon>


	      )

      }}/>
      <Tab.Screen name="r" component={HomeScreen} options={{

	      "tabBarIcon": ({focused}) => (

          <Icon name='sliders'  type='feather' size={36} color='#206ba5' ></Icon>


	      )

      }}/>
      <Tab.Screen name="t" component={HomeScreen} options={{

	      "tabBarIcon": ({focused}) => (

          <Icon name='person-circle-outline'  type='ionicon' size={36} color='#206ba5' ></Icon>


	      )

      }}/>
    </Tab.Navigator>
  );
}
export default BottomTab;