83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
//This file serves as the index.tsx file (main)
|
|
|
|
|
|
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
|
import { Link, Tabs } from 'expo-router';
|
|
import { Pressable } from 'react-native';
|
|
|
|
import { appTheme } from "../../theme";
|
|
|
|
|
|
import Colors from '../../constants/Colors';
|
|
|
|
// creatign tab bar icons and passing establishing properties to be passed during exectution
|
|
// see more icon families at https://icons.expo.fyi/
|
|
|
|
function TabBarIcon(props: {
|
|
name: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
|
|
color: string;
|
|
}) {
|
|
return <MaterialCommunityIcons size={28} style={{ marginBottom: -3 }} {...props} />;
|
|
}
|
|
|
|
// Creating the tab bar at the bottom
|
|
|
|
export default function TabLayout() {
|
|
// const colorScheme = useColorScheme();
|
|
|
|
return (
|
|
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: appTheme["color-primary-500"],
|
|
}}>
|
|
|
|
|
|
<Tabs.Screen
|
|
name="search_tab" //defining which tab should be rendered, this tab will call a screen component from the component folder
|
|
options={{
|
|
title: '',
|
|
tabBarLabel: 'Search',
|
|
tabBarIcon: ({ color }) => <TabBarIcon name="magnify" color={color} />, //using the tabBarIcon option within tabs and calling the TabBarIcon function created above to pass the established properties to it
|
|
|
|
// Info circle at the top right
|
|
// headerRight: () => (
|
|
// <Link href="/modal" asChild>
|
|
// <Pressable>
|
|
// {({ pressed }) => (
|
|
// <FontAwesome
|
|
// name="info-circle"
|
|
// size={25}
|
|
// color={Colors[colorScheme ?? 'light'].text}
|
|
// style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
|
|
// />
|
|
// )}
|
|
// </Pressable>
|
|
// </Link>
|
|
// ),
|
|
|
|
}}
|
|
/>
|
|
|
|
<Tabs.Screen
|
|
name="saved_tab"
|
|
options={{
|
|
title: '',
|
|
tabBarLabel: 'Saved',
|
|
tabBarIcon: ({ color }) => <TabBarIcon name="heart-outline" color={color} />,
|
|
}}
|
|
/>
|
|
|
|
<Tabs.Screen
|
|
name="account_tab"
|
|
options={{
|
|
title: '',
|
|
tabBarLabel: 'Account',
|
|
tabBarIcon: ({ color }) => <TabBarIcon name="account-circle-outline" color={color} />,
|
|
}}
|
|
/>
|
|
|
|
</Tabs>
|
|
);
|
|
}
|