Nav bar

app/(tabs)/_layout.tsx

@@ -1,17 +1,56 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { Feather, Octicons } from '@expo/vector-icons';
 import { Link, Tabs } from 'expo-router';
-import { Pressable, useColorScheme } from 'react-native';
-
+import { Pressable, TouchableOpacity, useColorScheme, Text, View } from 'react-native';
+import TabBar from '../../components/TabBar';
 import Colors from '../../constants/Colors';
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { LinearGradient } from 'expo-linear-gradient';
 
-/**
- * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
- */
 function TabBarIcon(props: {
-  name: React.ComponentProps<typeof FontAwesome>['name'];
+  name: React.ComponentProps<typeof Feather | typeof Octicons>['name'];
   color: string;
+  size?: number;
+  IconComponent: any;
+  isFocused?: boolean;
+  title: string;
 }) {
-  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
+  const { IconComponent, name, color, size = 28, isFocused, title } = props;
+  // If focused, wrap the icon with the gradient background
+  if (isFocused && title === "profile") {
+    return (
+      <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <LinearGradient
+          colors={['#D372E5', '#5731D6']}
+          start={{ x: 0, y: 1 }}
+          end={{ x: 1, y: 0 }}
+          style={{
+            width: size,
+            height: size,
+            alignItems: 'center',
+            justifyContent: 'center',
+
+            borderRadius: size / 2,
+          }}
+        >
+          <IconComponent name={name} size={size - 8} color={color} style={{ marginTop: 1 }} />
+        </LinearGradient>
+      </View>
+
+    );
+  }
+
+  // Default icon without the gradient
+  return (
+    <View style={{
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center',
+
+    }}>
+      <IconComponent name={name} size={size - 4} color={color} />
+    </View>
+  );
 }
 
 export default function TabLayout() {
@@ -21,35 +60,28 @@ export default function TabLayout() {
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-      }}>
+        headerShown: false
+      }}
+      tabBar={(props: BottomTabBarProps) => <TabBar {...props} />}
+    >
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Tab One',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-          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>
+          title: 'Home',
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon IconComponent={Feather} name="home" color={color} size={40} isFocused={focused} title="home" />
           ),
         }}
       />
       <Tabs.Screen
-        name="two"
+        name="profile"
         options={{
-          title: 'Tab Two',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          title: 'Profile',
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon IconComponent={Octicons} name="feed-person" color={color} size={44} isFocused={focused} title="profile" />
+          ),
         }}
       />
     </Tabs>
   );
-}
+}

app/(tabs)/add.tsx

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+
+import EditScreenInfo from "../../components/EditScreenInfo";
+import { Text, View } from "../../components/Themed";
+
+export default function AddScreen() {
+  return (
+    <View className="flex-row flex-1 justify-center items-center">
+      <Text>
+        Add Screen
+      </Text>
+
+    </View>
+  );
+}

app/(tabs)/index.tsx

@@ -3,33 +3,13 @@ import { StyleSheet } from "react-native";
 import EditScreenInfo from "../../components/EditScreenInfo";
 import { Text, View } from "../../components/Themed";
 
-export default function TabOneScreen() {
+export default function HomeScreen() {
   return (
-    <View style={styles.container}>
-      <Text className="text-xl font-bold text-blue-700">Tab One</Text>
-      <View
-        style={styles.separator}
-        lightColor="#eee"
-        darkColor="rgba(255,255,255,0.1)"
-      />
-      <EditScreenInfo path="app/(tabs)/index.tsx" />
+    <View className="flex-row flex-1 justify-center items-center">
+      <Text>
+        Home Screen
+      </Text>
+
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: "bold",
-  },
-  separator: {
-    marginVertical: 30,
-    height: 1,
-    width: "80%",
-  },
-});

app/(tabs)/profile.tsx

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+import EditScreenInfo from '../../components/EditScreenInfo';
+import { Text, View } from '../../components/Themed';
+
+export default function ProfileScreen() {
+  return (
+    <View className="flex-row flex-1 justify-center items-center">
+      <Text>
+        Profile Screen
+      </Text>
+
+    </View>
+  );
+}

app/[...missing].tsx

@@ -10,7 +10,7 @@ export default function NotFoundScreen() {
       <View style={styles.container}>
         <Text style={styles.title}>This screen doesn't exist.</Text>
 
-        <Link href="/" style={styles.link}>
+        <Link href="/home" style={styles.link}>
           <Text style={styles.linkText}>Go to home screen!</Text>
         </Link>
       </View>