auth stack

vanGalilea · Feb 2, 2024 · ee17736 · ee17736
1 parent cccf3e1
commit ee17736
Show file tree

Hide file tree

Showing 9 changed files with 1,323 additions and 31 deletions.
diff --git a/apps/rn-expo-app/app/_layout.tsx b/apps/rn-expo-app/app/_layout.tsx
@@ -1,29 +1,122 @@
-import {Tabs} from 'expo-router';
+import { Tabs, useLocalSearchParams, useRootNavigationState, useRouter, useSegments } from "expo-router";
 import '../global.css';
+import {Center, Icon, NativeBaseProvider, Pressable, Text} from 'native-base';
+import {MaterialCommunityIcons} from '@expo/vector-icons';
+import {BottomTabBarButtonProps} from '@react-navigation/bottom-tabs/lib/typescript/src/types';
+import {usePathname} from 'expo-router/build/hooks';
+
 export default function Layout() {
+  const pathname = usePathname();
+
   return (
-    <Tabs>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Home',
-          tabBarLabel: 'Home',
-        }}
-      />
-      <Tabs.Screen
-        name="blogs"
-        options={{
-          title: 'Blogs',
-          tabBarLabel: 'Blogs',
-        }}
-      />
-      <Tabs.Screen
-        name="settings"
-        options={{
-          title: 'Settings',
-          tabBarLabel: 'Settings',
-        }}
+    <NativeBaseProvider>
+      <Tabs
+        screenOptions={{
+          headerLeft: HeaderLeft,
+          unmountOnBlur: true,
+        }}>
+        <Tabs.Screen
+          name="index"
+          options={{
+            headerTitle: 'Home',
+            tabBarButton: ({onPress}) => (
+              <TabBarButton
+                isSelected={pathname === '/'}
+                label={'Home'}
+                onPress={onPress}
+                iconName={'home'}
+              />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="blogs"
+          options={{
+            headerTitle: 'Blogs',
+            tabBarButton: ({onPress}) => (
+              <TabBarButton
+                isSelected={pathname.includes('/blogs')}
+                label={'Blogs'}
+                onPress={onPress}
+                iconName={'book-open'}
+              />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="settings"
+          options={{
+            headerTitle: 'Settings',
+            tabBarButton: ({onPress}) => (
+              <TabBarButton
+                isSelected={pathname.includes('/settings')}
+                label={'Settings'}
+                onPress={onPress}
+                iconName={'account-settings'}
+              />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="auth"
+          options={{
+            href: null,
+          }}
+        />
+      </Tabs>
+    </NativeBaseProvider>
+  );
+}
+
+const TabBarButton = ({
+  isSelected,
+  onPress,
+  label,
+  iconName,
+}: {
+  isSelected: boolean;
+  onPress: BottomTabBarButtonProps['onPress'];
+  label: string;
+  iconName: string;
+}) => {
+  return (
+    <Pressable opacity={isSelected ? 1 : 0.5} py="3" flex={1} onPress={onPress}>
+      <Center>
+        <Icon
+          mb="1"
+          as={
+            <MaterialCommunityIcons
+              // @ts-ignore
+              name={isSelected ? iconName : `${iconName}-outline`}
+            />
+          }
+          color="black"
+          size="sm"
+        />
+        <Text color="black" fontSize="12">
+          {label}
+        </Text>
+      </Center>
+    </Pressable>
+  );
+};
+
+const HeaderLeft = () => {
+  const {back} = useRouter();
+  const pathname = usePathname();
+  const isNestedStack = pathname.split('/').length - 1 > 1;
+  if(!isNestedStack) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      onPress={back}>
+      <Icon
+        as={<MaterialCommunityIcons name="keyboard-backspace" />}
+        color="black"
+        size="sm"
       />
-    </Tabs>
+    </Pressable>
   );
 }
diff --git a/apps/rn-expo-app/app/auth/_layout.tsx b/apps/rn-expo-app/app/auth/_layout.tsx
@@ -0,0 +1,5 @@
+import {Stack} from 'expo-router';
+
+export default function Layout() {
+  return <Stack />;
+}
diff --git a/apps/rn-expo-app/app/auth/login.tsx b/apps/rn-expo-app/app/auth/login.tsx
@@ -0,0 +1,56 @@
+import { Text, Box, Button, Center, FormControl, Heading, HStack, Input, Link, VStack } from "native-base";
+
+
+export default function Page() {
+  return (
+    <Center w="100%">
+      <Box safeArea p="2" py="8" w="90%" maxW="290">
+        <Heading size="lg" fontWeight="600" color="coolGray.800" _dark={{
+          color: "warmGray.50"
+        }}>
+          Welcome
+        </Heading>
+        <Heading mt="1" _dark={{
+          color: "warmGray.200"
+        }} color="coolGray.600" fontWeight="medium" size="xs">
+          Sign in to continue!
+        </Heading>
+
+        <VStack space={3} mt="5">
+          <FormControl>
+            <FormControl.Label>Email ID</FormControl.Label>
+            <Input />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Password</FormControl.Label>
+            <Input type="password" />
+            <Link _text={{
+              fontSize: "xs",
+              fontWeight: "500",
+              color: "indigo.500"
+            }} alignSelf="flex-end" mt="1">
+              Forget Password?
+            </Link>
+          </FormControl>
+          <Button mt="2" colorScheme="indigo">
+            Sign in
+          </Button>
+          <HStack mt="6" justifyContent="center">
+            <Text fontSize="sm" color="coolGray.600" _dark={{
+              color: "warmGray.200"
+            }}>
+              I'm a new user.{" "}
+            </Text>
+            <Link _text={{
+              color: "indigo.500",
+              fontWeight: "medium",
+              fontSize: "sm"
+            }} href="#">
+              Sign Up
+            </Link>
+          </HStack>
+        </VStack>
+      </Box>
+    </Center>
+  );
+}
diff --git a/apps/rn-expo-app/app/auth/signup.tsx b/apps/rn-expo-app/app/auth/signup.tsx
@@ -0,0 +1,54 @@
+import {
+  Box,
+  Button,
+  Center,
+  FormControl,
+  Heading,
+  Input,
+  VStack,
+} from 'native-base';
+
+export default function Page() {
+  return (
+    <Center w="100%">
+      <Box safeArea p="2" w="90%" maxW="290" py="8">
+        <Heading
+          size="lg"
+          color="coolGray.800"
+          _dark={{
+            color: 'warmGray.50',
+          }}
+          fontWeight="semibold">
+          Welcome
+        </Heading>
+        <Heading
+          mt="1"
+          color="coolGray.600"
+          _dark={{
+            color: 'warmGray.200',
+          }}
+          fontWeight="medium"
+          size="xs">
+          Sign up to continue!
+        </Heading>
+        <VStack space={3} mt="5">
+          <FormControl>
+            <FormControl.Label>Email</FormControl.Label>
+            <Input />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Password</FormControl.Label>
+            <Input type="password" />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Confirm Password</FormControl.Label>
+            <Input type="password" />
+          </FormControl>
+          <Button mt="2" colorScheme="indigo">
+            Sign up
+          </Button>
+        </VStack>
+      </Box>
+    </Center>
+  );
+}
diff --git a/apps/rn-expo-app/app/blogs/_layout.tsx b/apps/rn-expo-app/app/blogs/_layout.tsx
@@ -1,5 +1,11 @@
 import {Stack} from 'expo-router';
 
 export default function Layout() {
-  return <Stack />;
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+      }}
+    />
+  );
 }
diff --git a/apps/rn-expo-app/app/index.tsx b/apps/rn-expo-app/app/index.tsx
@@ -1,13 +1,63 @@
-import { Text, View } from "react-native";
+import { Text, Box, Button, Center, FormControl, Heading, HStack, Input, Link, VStack } from "native-base";
 
 export default function Page() {
   return (
-    <View className="flex 1 bg-amber-300">
+    <Box className="flex 1 bg-auto">
       <Text>RN Media Group</Text>
       <Text>Trending</Text>
       <Text>For you</Text>
       <Text>Following</Text>
       <Text>Listen</Text>
-    </View>
+
+      <Center w="100%">
+        <Box safeArea p="2" py="8" w="90%" maxW="290">
+          <Heading size="lg" fontWeight="600" color="coolGray.800" _dark={{
+            color: "warmGray.50"
+          }}>
+            Welcome
+          </Heading>
+          <Heading mt="1" _dark={{
+            color: "warmGray.200"
+          }} color="coolGray.600" fontWeight="medium" size="xs">
+            Sign in to continue!
+          </Heading>
+
+          <VStack space={3} mt="5">
+            <FormControl>
+              <FormControl.Label>Email ID</FormControl.Label>
+              <Input />
+            </FormControl>
+            <FormControl>
+              <FormControl.Label>Password</FormControl.Label>
+              <Input type="password" />
+              <Link _text={{
+                fontSize: "xs",
+                fontWeight: "500",
+                color: "indigo.500"
+              }} alignSelf="flex-end" mt="1">
+                Forget Password?
+              </Link>
+            </FormControl>
+            <Button mt="2" colorScheme="indigo">
+              Sign in
+            </Button>
+            <HStack mt="6" justifyContent="center">
+              <Text fontSize="sm" color="coolGray.600" _dark={{
+                color: "warmGray.200"
+              }}>
+                I'm a new user.{" "}
+              </Text>
+              <Link _text={{
+                color: "indigo.500",
+                fontWeight: "medium",
+                fontSize: "sm"
+              }} href="#">
+                Sign Up
+              </Link>
+            </HStack>
+          </VStack>
+        </Box>
+      </Center>
+    </Box>
   );
 }
diff --git a/apps/rn-expo-app/app/settings/_layout.tsx b/apps/rn-expo-app/app/settings/_layout.tsx
@@ -1,5 +1,11 @@
 import {Stack} from 'expo-router';
 
 export default function Layout() {
-  return <Stack />;
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+      }}
+    />
+  );
 }
diff --git a/apps/rn-expo-app/package.json b/apps/rn-expo-app/package.json
@@ -20,12 +20,14 @@
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.6",
     "expo-status-bar": "~1.11.1",
+    "native-base": "^3.4.28",
     "nativewind": "^4.0.23",
     "react": "18.2.0",
     "react-native": "0.73.1",
     "react-native-reanimated": "^3.6.2",
-    "react-native-safe-area-context": "4.8.2",
+    "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.29.0",
+    "react-native-svg": "12.1.1",
     "react-native-vector-icons": "^10.0.3",
     "tailwindcss": "^3.4.1"
   },