text4u-app/app/(pages)/_layout.tsx

import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function ScreenLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarIconStyle: {
          marginTop: 10,
        },
        tabBarStyle: Platform.select({
          ios: {
            position: 'absolute',
            height: 70,
          },
          default: {
            backgroundColor: '#396868',
            height: 70,
            borderTopWidth: 0,
            paddingVertical: 10
          },
        }),
      }}
      >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <Icon name="home" size={25} color={color} />,
        }}
      />
      <Tabs.Screen
        name="notify"
        options={{
          title: 'Notify',
          tabBarIcon: ({ color }) => <Icon name="edit-document" size={25} color={color} />,
        }}
      />

      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color }) => <Icon name="person" size={25} color={color} />,
        }}
      />

    </Tabs>
  );
}