Make toast into its own component

src/app/(tabs)/home/index.tsx

@@ -1,13 +1,12 @@
 import { router } from 'expo-router';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Pressable, ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
 import Icon from '../../../../assets/icons';
 import ContentCard from '../../../components/ContentCard/ContentCard';
 import PreviewCard from '../../../components/PreviewCard/PreviewCard';
-// import RecentSearchCard from '../../../components/RecentSearchCard/RecentSearchCard';
 import { fetchUsername } from '../../../queries/profiles';
 import {
   fetchFeaturedStoriesDescription,

src/app/_layout.tsx

@@ -2,13 +2,7 @@ import { Stack } from 'expo-router';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { AuthContextProvider } from '../utils/AuthContext';
-import Toast, {
-  BaseToast,
-  BaseToastProps,
-  ToastConfig,
-} from 'react-native-toast-message';
-import { Icon } from 'react-native-elements';
-import colors from '../styles/colors';
+import ToastComponent from '../components/Toast/Toast';
 
 function StackLayout() {
   return (
@@ -21,26 +15,9 @@ function StackLayout() {
           <Stack.Screen name="auth" options={{ headerShown: false }} />
         </Stack>
       </AuthContextProvider>
-      <Toast config={toastConfig} />
+      <ToastComponent />
     </SafeAreaProvider>
   );
 }
 
-const toastConfig: ToastConfig = {
-  success: (props: BaseToastProps) => (
-    <BaseToast
-      {...props}
-      style={{ borderLeftColor: colors.white }}
-      renderLeadingIcon={() => (
-        <Icon
-          name="check-circle"
-          type="octicon"
-          color={colors.lime}
-          style={{ flex: 1, justifyContent: 'center', marginLeft: 10 }}
-        />
-      )}
-    />
-  ),
-};
-
 export default StackLayout;

src/app/auth/login/index.tsx

@@ -121,8 +121,8 @@ function LoginScreen() {
         </View>
 
         <Text style={[globalStyles.body1, styles.redirectText]}>
-          Don&apos;t have an account? {/* TODO Change back */}
-          <Link style={globalStyles.bodyBoldUnderline} href="/auth/verify">
+          Don&apos;t have an account?
+          <Link style={globalStyles.bodyBoldUnderline} href="/auth/signup">
             Sign Up
           </Link>
         </Text>

src/components/Toast/Toast.tsx

@@ -0,0 +1,27 @@
+import Toast, { BaseToast, BaseToastProps, ToastConfig } from "react-native-toast-message";
+import colors from '../../styles/colors'
+import { Icon } from "react-native-elements";
+import styles from "./styles";
+
+const toastConfig: ToastConfig = {
+  success: (props: BaseToastProps) => (
+    <BaseToast
+      {...props}
+      style={styles.toast}
+      renderLeadingIcon={() => (
+        <Icon
+          name="check-circle"
+          type="octicon"
+          color={colors.lime}
+          style={styles.icon}
+        />
+      )}
+    />
+  ),
+};
+
+function ToastComponent() {
+  return <Toast config={toastConfig} />
+}
+
+export default ToastComponent;

src/components/Toast/styles.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+import colors from '../../styles/colors';
+
+export default StyleSheet.create({
+  icon: {
+    flex: 1,
+    justifyContent: 'center',
+    marginLeft: 10
+  },
+  toast: {
+    borderLeftColor: colors.white
+  }
+})