Added PagerView and Loader and Fixed Tab Bar

app.json

@@ -12,6 +12,10 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
+    "updates": {
+      "fallbackToCacheTimeout": 10000,
+      // "url": "https://u.expo.dev/f4b56fb1-b6cc-4fb3-aeb8-2443be51c4dc"
+    },
     "assetBundlePatterns": ["**/*"],
     "ios": {
       // "supportsTablet": true,

app/(auth)/Reset.tsx

@@ -1,46 +1,5 @@
-import React, { useState } from 'react';
-import { router } from 'expo-router';
-import { validateEmail } from '@/validations/validateEmail';
-import Background from '@/widgets/Background';
-import BackButton from '@/widgets/BackButton';
-import Logo from '@/widgets/Logo';
-import Header from '@/widgets/Header';
-import TextInput from '@/widgets/TextInput';
-import Button from '@/widgets/Button';
+import Reset from '@/boards/Reset';
 
-export default function ResetPasswordScreen() {
-  const [email, setEmail] = useState({ value: '', error: '' });
-
-  const sendResetPasswordEmail = () => {
-    const emailError = validateEmail(email.value);
-    if (emailError) {
-      setEmail({ ...email, error: emailError });
-      return;
-    }
-    router.push('/Login');
-  };
-
-  return (
-    <Background>
-      <BackButton />
-      <Logo />
-      <Header>Reset your password.</Header>
-      <TextInput
-        label='Email'
-        returnKeyType='done'
-        value={email.value}
-        onChangeText={(text) => setEmail({ value: text, error: '' })}
-        error={!!email.error}
-        errorText={email.error}
-        autoCapitalize='none'
-        autoCompleteType='email'
-        textContentType='emailAddress'
-        keyboardType='email-address'
-        description='You will receive an email with the reset link.'
-      />
-      <Button mode='contained' onPress={sendResetPasswordEmail} style={{ marginTop: 16 }}>
-        Continue
-      </Button>
-    </Background>
-  );
+export default function Reset_Route() {
+  return <Reset />
 }

app/(main)/Home.tsx

@@ -1,66 +1,5 @@
-import executeAuth from "@/events/executeAuth";
-import Background from "@/widgets/Background";
-import Button from "@/widgets/Button";
-import Header from "@/widgets/Header";
-import Logo from "@/widgets/Logo";
-import Paragraph from "@/widgets/Paragraph";
-import Snackbar from "@/widgets/Snackbar";
-import { useState } from "react";
+import Home from '@/boards/Home';
 
-import { bottom } from "bottoms";
-import { router } from "expo-router";
-
-import SomeComponent from "@/components/SomeComponent";
-
-export default function Home() {
-
-  const [error, setError] = useState('')
-
-  const { executeLogout } = executeAuth();
-
-  const logout = async () => {
-    try {
-      await executeLogout()
-    } catch (error : any ){
-      setError(error.message)
-    }
-  }
-
-  const openModal = () => {
-    bottom.open('Two');
-  }
-  const openModal2 = () => {
-    bottom.open('Two');
-  }
-  const data = {
-    '1':'293'
-  }
-
-  return (
-    <Background>
-      {/* <Logo /> */}
-      <Header>Home</Header>
-      <Paragraph>Expo Router Test</Paragraph>
-      <Paragraph> router.push('/(modal)/Modal') </Paragraph>
-      <Button mode='contained' onPress={() => {
-        router.setParams(data)
-        router.push(`/(main)/post/id`)}}>
-        To Modal
-      </Button>
-      <Paragraph>Navigate to Modal Directly </Paragraph>
-      <Paragraph> router.push('/(modal)/Modal') </Paragraph>
-      <SomeComponent />
-      {/* 
-      <Button mode='contained' onPress={openModal}>
-        Bottom Sheet One
-      </Button>
-      <Button mode='contained' onPress={openModal2}>
-        Bottom Sheet Two
-      </Button>
-      <Button style={{}} mode='outlined' onPress={logout}>
-        Sign out
-      </Button>
-      <Snackbar snackbarText={error} visible={error.length > 0} /> */}
-    </Background>
-  );
+export default function Home_Route() {
+  return <Home />
 }

app/(main)/List.tsx

@@ -2,13 +2,10 @@ import { StyleSheet, Text, View } from 'react-native'
 import React from 'react'
 import Background from '@/widgets/Background'
 import Header from '@/widgets/Header';
+import ExampleAnimated from '@/boards/ExampleAnimated';
 
 export default function ListRoute(): React.JSX.Element {
-  return (
-      <Background>
-        <Header>Second Tab</Header>
-      </Background>
-  );
+  return <ExampleAnimated />
 }
 
 const styles = StyleSheet.create({})

app/(main)/Tiktok.tsx

@@ -0,0 +1,5 @@
+import ExampleTiktok from '@/boards/ExampleTiktok';
+
+export default function Home_Route() {
+  return <ExampleTiktok />;
+}

app/(main)/_layout.tsx

@@ -1,13 +1,44 @@
 /** ========= TABS NAVIGATION ========= */
 import { Stack, Tabs } from 'expo-router';
 import React from 'react';
+import { BlurView } from 'expo-blur';
+import { StyleSheet } from 'react-native';
+import { Icon, useTheme } from 'react-native-paper';
 
 export default function Tabs_Layout() {
+  const colors = useTheme()
+
+  const mode = colors.mode
   return (
-    <Tabs screenOptions={{headerShown: false }}>
-      <Tabs.Screen name='Home' />
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+
+        tabBarActiveTintColor: colors.colors.primary,
+        tabBarInactiveTintColor: colors.colors.secondary,
+        tabBarShowLabel: true,
+        tabBarStyle: [
+          {
+            position: 'absolute',
+            elevation: 0,
+            borderRadius: 20,
+            height: 60,
+          },
+        ],
+        // tabBarBackground: () => (
+        //   <BlurView tint={mode} intensity={100} style={StyleSheet.absoluteFill} />
+        // ),
+      }}
+    >
+      <Tabs.Screen
+        name='Home'
+        options={{
+          tabBarIcon: ({ color, focused }) => <Icon source='heart' size={focused ? 32 : 24} color={color} />,
+        }}
+      />
       <Tabs.Screen name='List' />
-      <Tabs.Screen name='post' options={{href: null}} />
+      <Tabs.Screen name='Tiktok' />
+      <Tabs.Screen name='post' options={{ href: null }} />
     </Tabs>
   );
 }

app/(modals)/Settings.tsx

@@ -0,0 +1,5 @@
+import Settings from "@/boards/Settings";
+
+export default function Settings_Route() {
+  return <Settings/>
+}

app/index.tsx

@@ -1,12 +1,12 @@
 import Logo from '@/widgets/Logo'
 import { View } from 'react-native'
-import { Text } from 'react-native-paper'
+import { FacebookLoader, InstagramLoader } from 'react-native-easy-content-loader';
 
 export default function Splash() {
   return (
-    <View style={{ flex:1, justifyContent: 'center', alignItems:'center'}}>
-      {/* <Logo /> */}
-      <Text>Splash</Text>
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Logo />
+      {/* <FacebookLoader active /> */}
     </View>
-  )
+  );
 }

app/setup.tsx

@@ -17,8 +17,9 @@ export default function Setup(): React.JSX.Element {
       <Stack.Screen name='(auth)/Reset' options={{ animation: 'none' }} />
       <Stack.Screen name='(auth)/Register' options={{ animation: 'none' }} />
       <Stack.Screen name='(auth)/Welcome' options={{ animation: 'fade_from_bottom' }} />
-      {/* === Introduce Screens === */}
+      {/* === Modals Screens === */}
       <Stack.Screen name='(modals)/AModal' options={{ presentation: 'modal' }} />
+      <Stack.Screen name='(modals)/Settings' options={{ presentation: 'modal' }} />
     </Stack>
   );
 }