[navigation] revamp bottom tab bar and header (#81)

* what

* bruh

* [wip], did styling for bottom tab nav, working on headers

* did some work, really weird bug?

* some fixes

* weird fix, dont like it

* simplified bottomTabNav hiding

* pr reviewed

* [axe] remove the disappearing bottom tab bar functionality.

* [feat] create separate file for back button components.

* [refactor] move tab bar item to separate component file.

* [feat] create empty header placeholder; fix existing header options.

* [feat] apply headers to all screens in the Cases flow.

* [fix] fix header style to apply it to the profile screens.

* [fix] minor nits.

* [feat] apply headers to all profile tabs.

* [feat] apply headers to every screen in the auth flow.

* [fix] remove redundant back buttons from profile screens.

* [fix] bring deep link handler back.

---------

Co-authored-by: Ronnie Beggs <[email protected]>

src/Components/BackButtons/BackButtons.tsx

@@ -0,0 +1,30 @@
+import { router } from 'expo-router';
+import { Text, TouchableOpacity } from 'react-native';
+
+import styles from './styles';
+import CircleBackButton from '../../../assets/grey-circle-back-arrow.svg';
+import BackArrow from '../../../assets/red-left-caret.svg';
+
+interface backButtonProps {
+  backText: string;
+}
+
+export function BackButtonText({ backText }: backButtonProps) {
+  return (
+    <TouchableOpacity
+      onPress={() => router.back()}
+      style={styles.backButtonContainer}
+    >
+      <BackArrow />
+      <Text style={styles.headerText}>{backText}</Text>
+    </TouchableOpacity>
+  );
+}
+
+export function BackButtonNoText() {
+  return (
+    <TouchableOpacity onPress={() => router.back()}>
+      <CircleBackButton />
+    </TouchableOpacity>
+  );
+}

src/Components/BackButtons/styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+
+import { colors } from '../../styles/colors';
+
+export default StyleSheet.create({
+  backButtonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    columnGap: 10,
+  },
+  headerText: {
+    color: colors.midRed,
+    textAlign: 'center',
+    fontSize: 12,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: 24,
+    letterSpacing: -0.264,
+  },
+});

src/Components/HeaderComponents/HeaderComponents.tsx

@@ -0,0 +1,32 @@
+import { View, Image } from 'react-native';
+
+import styles from './styles';
+
+export function HeaderImage() {
+  return (
+    <Image
+      source={require('../../../assets/inline-logo.jpeg')}
+      style={{ width: 120, height: 15 }}
+    />
+  );
+}
+
+export function LeftAlignedHeader() {
+  return (
+    <View style={styles.fullHeaderContainer}>
+      <HeaderImage />
+    </View>
+  );
+}
+
+export function LeftAlignedHeaderLine() {
+  return (
+    <View style={[styles.fullHeaderContainer, styles.bottomLine]}>
+      <HeaderImage />
+    </View>
+  );
+}
+
+export function EmptyHeader() {
+  return <View />;
+}

src/Components/HeaderComponents/styles.tsx

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+import { colors } from '../../styles/colors';
+
+export default StyleSheet.create({
+  fullHeaderContainer: {
+    width: '92%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    paddingTop: 14,
+    paddingBottom: 14,
+  },
+  bottomLine: {
+    borderBottomWidth: 1,
+    borderBottomColor: colors.midGrey,
+  },
+  headerText: {
+    color: colors.midRed,
+    textAlign: 'center',
+    fontSize: 12,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: 24,
+    letterSpacing: -0.264,
+  },
+  backButtonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    columnGap: 10,
+  },
+});

src/Components/TabBarItem/TabBarItem.tsx

@@ -0,0 +1,46 @@
+import { View, Text } from 'react-native';
+
+import { colors } from '../../styles/colors';
+
+interface TabBarItemProps {
+  icon: React.ReactNode;
+  label: string;
+  focused: boolean;
+}
+
+//Inline styling required --> can't make a styles.ts in this directory otherwise it'll make a new bottom tab idk why
+export default function TabBarItem({ icon, label, focused }: TabBarItemProps) {
+  return (
+    <View
+      style={{
+        backgroundColor: focused ? colors.lightRed : 'transparent',
+        borderRadius: 10,
+        height: 55,
+        width: 66,
+        marginTop: 10,
+      }}
+    >
+      <View
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginTop: 8,
+        }}
+      >
+        {icon}
+        <Text
+          style={{
+            fontSize: 9,
+            fontStyle: 'normal',
+            fontWeight: '600',
+            lineHeight: 21,
+            color: focused ? colors.midRed : colors.midGrey,
+          }}
+        >
+          {label}
+        </Text>
+      </View>
+    </View>
+  );
+}

src/app/(Authentication)/Login/Email/index.tsx

@@ -31,9 +31,6 @@ export default function LoginScreen() {
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
-        <Text style={styles.backText}>Back</Text>
-      </TouchableOpacity>
       <Text style={styles.instructionText}>
         Please enter your email address.
       </Text>

src/app/(Authentication)/Login/Password/index.tsx

@@ -35,9 +35,6 @@ export default function LoginScreen() {
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
-        <Text style={styles.backText}>Back</Text>
-      </TouchableOpacity>
       <Text style={styles.instructionText}>Please enter your password.</Text>
 
       <View style={styles.inputBox}>

src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx

@@ -45,12 +45,6 @@ export default function OTPEmailInput() {
   return (
     <View style={styles.container}>
       <View style={styles.innerContainer}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => router.back()}
-        >
-          <Text style={styles.backText}>Back</Text>
-        </TouchableOpacity>
         <View>
           <Text style={styles.instructionText}>
             Please enter the email you used to create your account.

src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx

@@ -64,14 +64,6 @@ export default function SignUpScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => router.back()}
-        >
-          <Text style={styles.backText}>Back</Text>
-        </TouchableOpacity>
-      </View>
       <Text style={styles.instructionText}>Create a new password.</Text>
 
       <View style={styles.inputBox}>

src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx

@@ -50,11 +50,6 @@ export default function OTPFlow() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity onPress={() => router.back()}>
-          <Text style={styles.backText}>Back</Text>
-        </TouchableOpacity>
-      </View>
       <View style={styles.contentContainer}>
         <View style={styles.instructionContainer}>
           <Text style={styles.headerText}>Enter verification code.</Text>

src/app/(Authentication)/SignUp/Address/index.tsx

@@ -66,7 +66,6 @@ export default function SignUpScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header} />
       <Text style={styles.instructionText}>Last, enter your address.</Text>
 
       <View style={styles.inputBox}>

src/app/(Authentication)/SignUp/Email/index.tsx

@@ -58,14 +58,6 @@ export default function SignUpScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => router.back()}
-        >
-          <Text style={styles.backText}>Back</Text>
-        </TouchableOpacity>
-      </View>
       <Text style={styles.instructionText}>Create your account.</Text>
       <View style={styles.inputBox}>
         <AuthInput

src/app/(Authentication)/SignUp/Password/index.tsx

@@ -69,14 +69,6 @@ export default function SignUpScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => router.back()}
-        >
-          <Text style={styles.backText}>Back</Text>
-        </TouchableOpacity>
-      </View>
       <Text style={styles.instructionText}>Next, make a password.</Text>
 
       <View style={styles.inputBox}>

src/app/(Authentication)/Welcome/index.tsx

@@ -9,11 +9,6 @@ function WelcomeScreen() {
   return (
     <View style={styles.container}>
       <View style={styles.contentContainer}>
-        <Image
-          style={styles.image}
-          source={require('../../../../assets/inline-logo.jpeg')}
-        />
-
         <View style={styles.textContainer}>
           <Text style={styles.welcomeText}>Welcome to the Impact Fund!</Text>
         </View>