Registration Edits

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(() => {
-    router.replace('/login');
+    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,78 +53,53 @@ 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>
-        ) : (
-          <StyledContainer>
-            <StatusBar style="dark" />
-            <SafeAreaView />
-            <InnerContainer>
-              <PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
-              <Title>Tones</Title>
-              <SubTitle>Account Login</SubTitle>
-              <StyledFormArea>
-                <LoginTextInput 
-                  label="Phone Number"
-                  icon="call-outline"
-                  placeholder="123-456-7890"
-                  placeholderTextColor="gray"
-                  onChangeText={formik.handleChange('number')}
-                  onBlur={formik.handleBlur('number')}
-                  value={formik.values.number.replace(/^(\d{3})(\d{3})(\d+)$/, "($1) $2-$3")}
-                  keyboardType="number-pad"
-                  maxLength={14}
-                />
-                <LoginTextInput 
-                  label="Password"
-                  icon="lock-closed-outline"
-                  placeholder="* * * * * *"
-                  placeholderTextColor="gray"
-                  onChangeText={formik.handleChange('password')}
-                  onBlur={formik.handleBlur('password')}
-                  value={formik.values.password}
-                  secureTextEntry={hidePassword}
-                  isPassword
-                  hidePassword={hidePassword}
-                  setHidePassword={setHidePassword}
-                />
-                <MessageBox>...</MessageBox>
-                <StyledButton onPress={formik.handleSubmit} disabled={loginButtonDisabled} style={loginButtonDisabled ? {backgroundColor: 'grey'} : {}}>
-                  <ButtonText>Login</ButtonText>
-                </StyledButton>
-                <Line />
-                <ExtraView>
-                  <ExtraText>Don't have an account already? </ExtraText>
-                  <Link href='./register'>
-                    <TextLinkContent>Register</TextLinkContent>
-                  </Link>
-                </ExtraView>
-              </StyledFormArea>
-            </InnerContainer>
-          </StyledContainer>
-        )}
+        <PageHeader />
+        <StyledContainer>
+          <StatusBar style="dark" />
+          <SafeAreaView />
+          <InnerContainer>
+            <PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
+            <Title>Tones</Title>
+            <SubTitle>Account Login</SubTitle>
+            <StyledFormArea>
+              <LoginTextInput 
+                label="Phone Number"
+                icon="call-outline"
+                placeholder="123-456-7890"
+                placeholderTextColor="gray"
+                onChangeText={formik.handleChange('number')}
+                onBlur={formik.handleBlur('number')}
+                value={formik.values.number.replace(/^(\d{3})(\d{3})(\d+)$/, "($1) $2-$3")}
+                keyboardType="number-pad"
+                maxLength={14}
+              />
+              <LoginTextInput 
+                label="Password"
+                icon="lock-closed-outline"
+                placeholder="* * * * * *"
+                placeholderTextColor="gray"
+                onChangeText={formik.handleChange('password')}
+                onBlur={formik.handleBlur('password')}
+                value={formik.values.password}
+                secureTextEntry={hidePassword}
+                isPassword
+                hidePassword={hidePassword}
+                setHidePassword={setHidePassword}
+              />
+              <MessageBox>...</MessageBox>
+              <StyledButton onPress={formik.handleSubmit} disabled={loginButtonDisabled} style={loginButtonDisabled ? {backgroundColor: 'grey'} : {}}>
+                <ButtonText>Login</ButtonText>
+              </StyledButton>
+              <Line />
+              <ExtraView>
+                <ExtraText>Don't have an account already? </ExtraText>
+                <Link href='./register'>
+                  <TextLinkContent>Register</TextLinkContent>
+                </Link>
+              </ExtraView>
+            </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,93 +67,101 @@ export default function Register() {
   }, [formValues])
 
   return (
-    <ScrollView>
-      <StyledContainer>
-        <StatusBar style="dark" />
-        <SafeAreaView />
-        <InnerContainer>
-          <PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
-          <Title>Tones</Title>
-          <SubTitle>Account Register</SubTitle>
-          <StyledFormArea>
-            <LoginTextInput
-              label="First Name"
-              icon="person-outline"
-              placeholder="Bud"
-              placeholderTextColor="gray"
-              onChangeText={formik.handleChange('firstName')}
-              onBlur={formik.handleBlur('firstName')}
-              value={formik.values.firstName}
-            />
-            <LoginTextInput
-              label="Last Name"
-              icon="people-outline"
-              placeholder="Doble"
-              placeholderTextColor="gray"
-              onChangeText={formik.handleChange('lastName')}
-              onBlur={formik.handleBlur('lastName')}
-              value={formik.values.lastName}
-            />
-            <LoginTextInput 
-              label="Phone Number"
-              icon="call-outline"
-              placeholder="123-456-7890"
-              placeholderTextColor="gray"
-              onChangeText={formik.handleChange('number')}
-              onBlur={formik.handleBlur('number')}
-              value={formik.values.number.replace(/^(\d{3})(\d{3})(\d+)$/, "($1) $2-$3")}
-              keyboardType="number-pad"
-              maxLength={14}
-            />
-            <LoginDropdownInput
-              label="Cellular Provider"
-              selectedValue={formik.values.provider}
-              onValueChange={formik.handleChange('provider')}
-              items={providers}
-            />
-            <LoginTextInput 
-              label="Email Address"
-              icon="mail-outline"
-              placeholder="test@organization.com"
-              placeholderTextColor="gray"
-              onChangeText={formik.handleChange('email')}
-              onBlur={formik.handleBlur('email')}
-              value={formik.values.email}
-              keyboardType="email-address"
-            />
-            <LoginTextInput 
-              label="Password"
-              icon="lock-closed-outline"
-              placeholder="* * * * * *"
-              placeholderTextColor="gray"
-              onChangeText={formik.handleChange('password')}
-              onBlur={formik.handleBlur('password')}
-              value={formik.values.password}
-              secureTextEntry={hidePassword}
-              isPassword
-              hidePassword={hidePassword}
-              setHidePassword={setHidePassword}
-            />
-            <LoginTextInput 
-              label="Confirm Password"
-              icon="shield-checkmark-outline"
-              placeholder="* * * * * *"
-              placeholderTextColor="gray"
-              onChangeText={formik.handleChange('passwordConfirmation')}
-              onBlur={formik.handleBlur('passwordConfirmation')}
-              value={formik.values.passwordConfirmation}
-              secureTextEntry={hidePassword}
-              isPassword
-              hidePassword={hidePassword}
-              setHidePassword={setHidePassword}
-            />
-            <MessageBox>...</MessageBox>
-            <StyledButton onPress={formik.handleSubmit} style={registerButtonDisabled ? {backgroundColor: 'grey'} : {}}>
-              <ButtonText>Register</ButtonText>
-            </StyledButton>
-          </StyledFormArea>
-        </InnerContainer>
-      </StyledContainer>
-    </ScrollView>
+    <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" />
+          <SafeAreaView />
+          <InnerContainer>
+            <PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
+            <Title>Tones</Title>
+            <SubTitle>Account Register</SubTitle>
+            <StyledFormArea>
+              <LoginTextInput
+                label="First Name"
+                icon="person-outline"
+                placeholder="Bud"
+                placeholderTextColor="gray"
+                onChangeText={formik.handleChange('firstName')}
+                onBlur={formik.handleBlur('firstName')}
+                value={formik.values.firstName}
+              />
+              <LoginTextInput
+                label="Last Name"
+                icon="people-outline"
+                placeholder="Doble"
+                placeholderTextColor="gray"
+                onChangeText={formik.handleChange('lastName')}
+                onBlur={formik.handleBlur('lastName')}
+                value={formik.values.lastName}
+              />
+              <LoginTextInput 
+                label="Phone Number"
+                icon="call-outline"
+                placeholder="123-456-7890"
+                placeholderTextColor="gray"
+                onChangeText={formik.handleChange('number')}
+                onBlur={formik.handleBlur('number')}
+                value={formik.values.number.replace(/^(\d{3})(\d{3})(\d+)$/, "($1) $2-$3")}
+                keyboardType="number-pad"
+                maxLength={14}
+              />
+              <LoginDropdownInput
+                label="Cellular Provider"
+                selectedValue={formik.values.provider}
+                onValueChange={formik.handleChange('provider')}
+                items={providers}
+              />
+              <LoginTextInput 
+                label="Email Address"
+                icon="mail-outline"
+                placeholder="test@organization.com"
+                placeholderTextColor="gray"
+                onChangeText={formik.handleChange('email')}
+                onBlur={formik.handleBlur('email')}
+                value={formik.values.email}
+                keyboardType="email-address"
+              />
+              <LoginTextInput 
+                label="Password"
+                icon="lock-closed-outline"
+                placeholder="* * * * * *"
+                placeholderTextColor="gray"
+                onChangeText={formik.handleChange('password')}
+                onBlur={formik.handleBlur('password')}
+                value={formik.values.password}
+                secureTextEntry={hidePassword}
+                isPassword
+                hidePassword={hidePassword}
+                setHidePassword={setHidePassword}
+              />
+              <LoginTextInput 
+                label="Confirm Password"
+                icon="shield-checkmark-outline"
+                placeholder="* * * * * *"
+                placeholderTextColor="gray"
+                onChangeText={formik.handleChange('passwordConfirmation')}
+                onBlur={formik.handleBlur('passwordConfirmation')}
+                value={formik.values.passwordConfirmation}
+                secureTextEntry={hidePassword}
+                isPassword
+                hidePassword={hidePassword}
+                setHidePassword={setHidePassword}
+              />
+              <MessageBox>...</MessageBox>
+              <StyledButton onPress={formik.handleSubmit} style={registerButtonDisabled ? {backgroundColor: 'grey'} : {}}>
+                <ButtonText>Register</ButtonText>
+              </StyledButton>
+            </StyledFormArea>
+          </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",