Merge pull request #4 from Task-Terriers/feature/TAS-42@service-detai…

…l-page

[TAS-42]: add services detail page

TaskTerriers/App.tsx

@@ -3,8 +3,10 @@ import { StatusBar } from 'expo-status-bar'
 import { Col, Span } from './src/StyleToProps'
 import * as SplashScreen from 'expo-splash-screen'
 import useFonts from './hooks/useFonts'
-import { BottomTabs } from './navigation/BottomTabNavigator'
+import { BottomTabNavigation } from './src/navigation/BottomTabNavigator'
 import { NavigationContainer } from '@react-navigation/native'
+import RootStack from './src/navigation/RootStack'
+import { TaskTerriersNavigationRef } from './src/navigation/NavigationModule'
 
 export default function App() {
   const [IsReady, SetIsReady] = useState(false)
@@ -50,8 +52,8 @@ export default function App() {
   return (
     <Col flex onLayout={onLayoutRootView} bgNeutral100>
       <StatusBar style={'dark'} backgroundColor={'white'} />
-      <NavigationContainer>
-        <BottomTabs />
+      <NavigationContainer ref={TaskTerriersNavigationRef}>
+        <RootStack />
       </NavigationContainer>
     </Col>
   )

TaskTerriers/package.json

@@ -15,10 +15,12 @@
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/core": "^6.4.10",
     "@react-navigation/native": "^6.1.9",
+    "@react-navigation/stack": "^6.3.20",
     "@types/react": "~18.2.14",
     "eslint-config-prettier": "^9.0.0",
     "expo": "~49.0.15",
     "expo-image": "^1.5.1",
+    "expo-navigation-bar": "^2.5.0",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "prettier": "^3.1.0",

TaskTerriers/src/Screens/ServiceDetailScreen.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react'
+import { SafeAreaView, View, StyleSheet, Text, TouchableOpacity } from 'react-native'
+import NavigationBar from '../components/NavigationBar'
+import { IconNames } from '../components/types'
+import { TaskTerriersNavigationModule } from '../navigation/NavigationModule'
+
+interface Props { }
+
+
+const ServiceDetailScreen = ({ navigation, route }) => {
+
+    /*********
+    * recoil
+    *********/
+
+    /**************************
+    * props, navigation prams
+    **************************/
+
+    /*************
+    * state, ref
+    *************/
+
+    const [isRendering, setIsRendering] = useState<boolean>(true)
+
+    /**************
+    * life cycles
+    **************/
+
+    useEffect(() => {
+        // ComponentDidMount
+
+        // setIsRendering(false)
+        return () => {
+            // ComponentWillUnmount
+        }
+    }, [])
+
+    /************
+    * functions
+    ************/
+
+    const onPressReturn = () => {
+        TaskTerriersNavigationModule.goBack()
+    }
+
+    /*********
+    * render
+    *********/
+
+    const renderNavBar = () => {
+        return <NavigationBar title={'detail page'} iconName={IconNames['Return']} hasDivider iconAction={onPressReturn} />
+    }
+
+    /***********
+    * render()
+    ***********/
+
+    return (
+        <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
+            {renderNavBar()}
+        </SafeAreaView>
+    )
+
+}
+
+export default ServiceDetailScreen

TaskTerriers/src/Screens/ServicesTab.tsx

@@ -5,10 +5,13 @@ import { Col } from '../StyleToProps/Col'
 import { Span } from '../StyleToProps'
 import NavigationBar from '../components/NavigationBar'
 import { IconNames } from '../components/types'
+import { UniversalButton } from '../components/Buttons'
+import { TaskTerriersNavigationModule } from '../navigation/NavigationModule'
+import { Root } from '../navigation/type'
 
-interface Props {}
+interface Props { }
 
-const ServicesTab = ({ navigation, route }) => {
+const ServicesTab = ({ route }) => {
   /*********
    * recoil
    *********/
@@ -40,24 +43,36 @@ const ServicesTab = ({ navigation, route }) => {
    * functions
    ************/
 
+  const onPressButton = () => {
+    return (
+      TaskTerriersNavigationModule.navigate('ServiceDetailScreen')
+    )
+  }
+
   /*********
    * render
    *********/
 
-  // if (isRendering === true) {
-  // return null
-  // }
+  const renderNavigationBar = () => {
+    return <NavigationBar iconName={IconNames['Service']} title={route.name} />
+  }
+
+  const renderButton = () => {
+    console.log('Clicked button')
+    return <UniversalButton size='medium' text={{ value: 'Go to Detail Screen' }} onPress={onPressButton} />
+  }
 
   /***********
    * render()
    ***********/
 
   return (
-    <TaskTerriersSafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
-      <NavigationBar iconName={IconNames['Service']} title={route.name} />
-      <Col bgAlertMinor>
-        <Span> this is the ServicesTab</Span>
+    <TaskTerriersSafeAreaView style={{ flex: 1 }}>
+      {renderNavigationBar()}
+      <Col p16>
+        {renderButton()}
       </Col>
+
     </TaskTerriersSafeAreaView>
   )
 }

TaskTerriers/src/Views/TaskTerriersSafeAreaView.tsx

@@ -63,7 +63,7 @@ const TaskTerriersSafeAreaView: React.FC<Props> = (props: Props) => {
         style={[
           {
             flex: 1,
-            backgroundColor: props?.backgroundColor || NeutralColor['neutral-100'],
+            backgroundColor: props?.backgroundColor || NeutralColor['neutral-80'],
             paddingBottom: props.hasBottomSpace ? bottom : undefined,
           },
           props.style,

TaskTerriers/src/components/Divider/Divider.tsx

@@ -14,7 +14,7 @@ const Divider: React.FC<DividerComponentProps> = ({ color, margin }) => {
     return { marginLeft: 16, marginRight: 16 }
   }
 
-  return <View style={[{ height: 1, backgroundColor: color || NeutralColor['neutral-90'] }, getMargin()]} />
+  return <View style={[{ height: 1, backgroundColor: color || NeutralColor['neutral-70'] }, getMargin()]} />
 }
 
 export { Divider }

TaskTerriers/src/components/NavigationBar.tsx

@@ -10,10 +10,11 @@ interface NavigationBarProps {
   title: TypographyType.Value
   hasDivider?: boolean
   iconName?: IconName.Value
+  iconAction?: () => void
   backgroundColor?: UniversalColorType.Value
 }
 
-const NavigationBar: React.FC<NavigationBarProps> = ({ title, hasDivider, iconName, backgroundColor }) => {
+const NavigationBar: React.FC<NavigationBarProps> = ({ title, hasDivider, iconName, backgroundColor, iconAction }) => {
   /**************************
    * props, navigation prams
    **************************/
@@ -44,14 +45,26 @@ const NavigationBar: React.FC<NavigationBarProps> = ({ title, hasDivider, iconNa
     if (backgroundColor) return backgroundColor
     return '#ffffff'
   }
+  const getHeight = () => {
+    return 54
+  }
 
   /*********
    * render
    *********/
 
   const renderIcon = () => {
     if (!iconName) return null
-    return <Ionicons name={iconName} size={24} color="#2D2926" />
+    if (iconAction) {
+      return (
+        <Col onPress={iconAction}>
+          <Ionicons name={iconName} size={24} color="#2D2926" />
+        </Col>
+      )
+
+    } else {
+      return <Ionicons name={iconName} size={24} color="#2D2926" />
+    }
   }
 
   const renderTitle = () => {
@@ -62,19 +75,22 @@ const NavigationBar: React.FC<NavigationBarProps> = ({ title, hasDivider, iconNa
     )
   }
 
-  const getHeight = () => {
-    return 54
+  const renderDivider = () => {
+    if (hasDivider) return <Divider margin={{ left: -16, right: -16 }} />
   }
 
   /***********
    * render()
    ***********/
 
   return (
-    <Row h={getHeight()} ph16 alignCenter style={{ backgroundColor: getBackgroundColor() }}>
-      {renderIcon()}
-      {renderTitle()}
-    </Row>
+    <>
+      <Row h={getHeight()} ph16 alignCenter style={{ backgroundColor: getBackgroundColor() }}>
+        {renderIcon()}
+        {renderTitle()}
+      </Row>
+      {renderDivider()}
+    </>
   )
 }
 

TaskTerriers/src/components/types.tsx

@@ -24,6 +24,7 @@ export const IconNames = {
   MessageOutline: 'chatbox-ellipses-outline',
   Setting: 'settings-sharp',
   SettingOutline: 'settings-outline',
+  Return: 'chevron-back'
 } as const
 
 declare namespace IconName {
@@ -149,7 +150,7 @@ const ListItemPaddingVerticalMap: Record<ComponentStyle.Size, number> = {
   xxlarge: 0,
   xxxlarge: 0,
 } as const
-declare namespace ListItemType {}
+declare namespace ListItemType { }
 
 declare namespace TabBarType {
   type Value = Attr | string