locaft_mobile/components/BottomTab.js

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 RegisterUserScreen from './RegisterUserScreen';
import LoginUserScreen from './LoginUserScreen';
import UserProfile from './UserProfile';
import HouseLocation from './HouseLocation'
import {Icon} from 'react-native-elements';


const Tab = createBottomTabNavigator();

function BottomTab() {
  return (
    <Tab.Navigator
      screenOptions={{
	title: '',
 gestureEnabled: true,
            animationEnabled: false,
        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"
            />
          ),
	  headerShown:false,
        }}
      />
      <Tab.Screen
        name="s"
        component={LoginUserScreen}
        options={{
          tabBarIcon: ({focused}) => (
            <Icon
              name="search-outline"
              type="ionicon"
              size={36}
              color="#206ba5"
            />
          ),
	  headerShown:false,
        }}
      />
      <Tab.Screen
        name="r"
        component={UserProfile}
        options={{
          tabBarIcon: ({focused}) => (
            <Icon name="sliders" type="feather" size={36} color="#206ba5" />
          ),
	  headerShown:false,
        }}
      />
      <Tab.Screen
        name="t"
        component={HouseLocation}
        options={{
          tabBarIcon: ({focused}) => (
            <Icon
              name="person-circle-outline"
              type="ionicon"
              size={36}
              color="#206ba5"
            />
          ),
	  headerShown:false,
        }}
      />
    </Tab.Navigator>
  );
}

export default BottomTab;