app/_layout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { router, Stack } from 'expo-router';
 
 export const unstable_settings = {
@@ -8,10 +8,24 @@ export const unstable_settings = {
 
 export default function App() {
 
+  const [auth, setAuth] = useState(false);
+
   useEffect(() => {
+    if (auth) {
+      router.replace('/explore');
+    } else {
       router.replace('/login');
+    }
   }, []);
 
+  useEffect(() => {
+    if (auth) {
+      router.replace('/explore');
+    } else {
+      router.replace('/login');
+    }
+  }, [auth]);
+
   return (
     <Stack
       screenOptions={{
@@ -20,6 +34,7 @@ export default function App() {
     >
       <Stack.Screen name="login" />
       <Stack.Screen name="register" />
+      <Stack.Screen name="explore" />
     </Stack>
   );
 }

app/helpers.jsx

@@ -3,13 +3,13 @@ import Constants from 'expo-constants';
 import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { Picker } from '@react-native-picker/picker';
+import { Children } from 'react';
 
 const StatusBarHeight = Constants.statusBarHeight;
 
 export const StyledContainer = styled.View`
   flex: 1;
   padding: 25px;
-  padding-top: ${StatusBarHeight + 10}px;
 `;
 
 export const InnerContainer = styled.View`
@@ -117,6 +117,18 @@ export const TextLinkContent = styled.Text`
   font-size: 15px;
 `
 
+export const PageHeader = ({
+  children 
+}) => {
+  return (
+    <View style={{ position: 'sticky', top: 0, backgroundColor: '#ECEDEE', zIndex: 1, marginBottom: -80 }}>
+      <View style={{ flexDirection: 'row', height: 80, alignItems: 'flex-end' }}>
+        {children}
+      </View>
+    </View>
+  )
+}
+
 export const LoginTextInput = ({
   label, 
   icon, 

app/login.jsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
+import { router } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import { useFormik } from 'formik';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Tabs, Link } from 'expo-router';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import {
+  PageHeader,
   StyledContainer,
   InnerContainer,
   StyledFormArea,
@@ -23,6 +25,8 @@ import {
 
 export default function TabLayout() {
     const colorScheme = useColorScheme();
+    const [hidePassword, setHidePassword] = useState(true);
+    const [loginButtonDisabled, setLoginButtonDisabled] = useState(true);
 
     const formik = useFormik({
       initialValues: {
@@ -37,10 +41,6 @@ export default function TabLayout() {
 
     const formValues = formik.values;
 
-    const [login, setLogin] = useState(false);
-    const [hidePassword, setHidePassword] = useState(true);
-    const [loginButtonDisabled, setLoginButtonDisabled] = useState(true);
-
     useEffect(() => {
       if (formValues) {
         if (formValues.number.length === 14 && formValues.password) {
@@ -53,31 +53,7 @@ export default function TabLayout() {
   
     return (
       <React.Fragment>
-        {login ? (
-          <Tabs
-            screenOptions={{
-              tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint
-            }}>
-            <Tabs.Screen
-              name="index"
-              options={{
-                title: 'Home',
-                tabBarIcon: ({ color, focused }) => (
-                  <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
-                ),
-              }}
-            />
-            <Tabs.Screen
-              name="explore"
-              options={{
-                title: 'Explore',
-                tabBarIcon: ({ color, focused }) => (
-                  <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
-                ),
-              }}
-            />
-          </Tabs>
-        ) : (
+        <PageHeader />
         <StyledContainer>
           <StatusBar style="dark" />
           <SafeAreaView />
@@ -124,7 +100,6 @@ export default function TabLayout() {
             </StyledFormArea>
           </InnerContainer>
         </StyledContainer>
-        )}
       </React.Fragment>
     );
   }

app/register.jsx

@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { ScrollView } from 'react-native';
+import { router } from 'expo-router';
+import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import { useFormik, Formik } from 'formik';
+import { useFormik } from 'formik';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
 import {
+  PageHeader,
   StyledContainer,
   InnerContainer,
   StyledFormArea,
@@ -64,6 +67,13 @@ export default function Register() {
   }, [formValues])
 
   return (
+    <View>
+      <PageHeader>
+        <TouchableOpacity onPress={router.back} style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Ionicons name="arrow-back-outline" size={30} color="red" style={{ paddingLeft: 20 }} />
+          <Text style={{ color: 'red', fontWeight: 600 }}>Back to Login</Text>
+        </TouchableOpacity>
+      </PageHeader>
       <ScrollView>
         <StyledContainer>
           <StatusBar style="dark" />
@@ -152,5 +162,6 @@ export default function Register() {
           </InnerContainer>
         </StyledContainer>
       </ScrollView>
+    </View>
   )
 }

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.0.1",
       "dependencies": {
         "@expo/vector-icons": "^14.0.2",
-        "@react-native-picker/picker": "^2.7.7",
+        "@react-native-picker/picker": "2.7.5",
         "@react-navigation/native": "^6.0.2",
         "expo": "~51.0.24",
         "expo-constants": "~16.0.2",
@@ -5866,9 +5866,9 @@
       }
     },
     "node_modules/@react-native-picker/picker": {
-      "version": "2.7.7",
-      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.7.7.tgz",
-      "integrity": "sha512-CTHthVmx8ujlH/u5AnxLQfsheh/DoEbo+Kbx0HGTlbKVLC1eZ4Kr9jXIIUcwB7JEgOXifdZIPQCsoTc/7GQ0ag==",
+      "version": "2.7.5",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.7.5.tgz",
+      "integrity": "sha512-vhMaOLkXSUb+YKVbukMJToU4g+89VMhBG2U9+cLYF8X8HtFRidrHjohGqT8/OyesDuKIXeLIP+UFYI9Q9CRA9Q==",
       "peerDependencies": {
         "react": "*",
         "react-native": "*"

package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
-    "@react-native-picker/picker": "^2.7.7",
+    "@react-native-picker/picker": "2.7.5",
     "@react-navigation/native": "^6.0.2",
     "expo": "~51.0.24",
     "expo-constants": "~16.0.2",