Merge pull request #86 from dsc-sookmyung/feature/home

Feature/home

react-native/App.tsx

@@ -14,7 +14,6 @@ import JoinScreen from './screens/JoinScreen';
 import HomeScreen from './screens/HomeScreen';
 import TranslateScreen from './screens/TranslateScreen';
 import SearchScreen from './screens/SearchScreen';
-import LogoutButton from './components/LogoutButton';
 import SearchResultScreen from './screens/SearchResultScreen';
 import IntrodcutionScreen from './screens/IntroductionScreen'
 
@@ -76,10 +75,8 @@ export default function App() {
               component={HomeScreen}
               options={{
                 headerStyle: { backgroundColor: theme.colors.primary },
-                title: "NotiNote",
+                title: "Home",
                 headerBackVisible: false,
-                headerRight: () => <LogoutButton/>,
-
                 headerTitle: (props) => ( // App Logo
                   <Image
                     style={{ width: 90, height: 50 }}
@@ -96,6 +93,13 @@ export default function App() {
                 title: i18n.t('translate'),
                 headerStyle: { backgroundColor: theme.colors.primary },
                 headerTintColor: '#fff',
+                headerTitle: (props) => ( // App Logo
+                  <Image
+                    style={{ width: 90, height: 50 }}
+                    source={require('./assets/images/notinote-icon-white.png')}
+                    resizeMode='contain'
+                  />
+                ),
               }}
             />
             <Stack.Screen
@@ -105,6 +109,13 @@ export default function App() {
                 title: i18n.t('search'),
                 headerStyle: { backgroundColor: theme.colors.primary },
                 headerTintColor: '#fff',
+                headerTitle: (props) => ( // App Logo
+                  <Image
+                    style={{ width: 90, height: 50 }}
+                    source={require('./assets/images/notinote-icon-white.png')}
+                    resizeMode='contain'
+                  />
+                ),
               }}
             />
             <Stack.Screen

react-native/components/Home/HomeMenu.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { View, Text, Image, TouchableOpacity } from "react-native";
+import { useAuth } from "../../contexts/Auth";
+import { useNavigation, StackActions } from '@react-navigation/native';
+import { Menu, MenuItem } from "react-native-material-menu";
+
+export default function HomeMenu() {
+  const auth = useAuth();
+  const navigation = useNavigation();
+  const [isMenuVisible, setMenuVisibility] = React.useState(false);
+
+  const showMenu = () => {
+    setMenuVisibility(true);
+  };
+  const hideMenu = () => {
+    setMenuVisibility(false);
+  };
+
+  const logout = () => {
+    auth.signOut();
+    navigation.dispatch(StackActions.popToTop())
+  }
+
+  return (
+    <Menu
+      visible={isMenuVisible}
+      anchor={
+        <TouchableOpacity onPress={showMenu}>
+          <Image
+            style={{ width: 32, height: 32 }}
+            source={require(`../../assets/images/profile-images/profile-1.png`)}
+          />
+        </TouchableOpacity>
+      }
+      onRequestClose={hideMenu}
+    >
+      <MenuItem onPress={logout}>Logout</MenuItem>
+    </Menu>
+  );
+}

react-native/components/Home/NoEventBox.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { View, Image, StyleSheet } from "react-native";
+import { Text } from 'native-base'
+
+export default function NoEventBox() {
+  return (
+    <View style={[styles.container]}>
+        <Image source={require("../../assets/images/no-event.png")} style={styles.imageStyle} />
+        <Text color="#666" fontSize="md">There's no events today!</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    imageStyle: {
+        width: 180,
+        height: 180,
+    }
+});

react-native/package.json

@@ -16,6 +16,7 @@
     "@react-navigation/native": "^6.0.8",
     "@react-navigation/native-stack": "^6.5.0",
     "@types/i18n-js": "^3.8.2",
+    "@types/react-native-material-menu": "^1.0.6",
     "axios": "^0.27.2",
     "expo": "~44.0.0",
     "expo-app-loading": "~1.3.0",
@@ -40,7 +41,9 @@
     "react-native-dotenv": "^3.3.1",
     "react-native-element-dropdown": "^1.8.11",
     "react-native-elements": "^3.4.2",
+    "react-native-material-menu": "^2.0.0",
     "react-native-modal-datetime-picker": "^13.1.0",
+    "react-native-popup-menu": "^0.15.12",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.10.1",
     "react-native-splash-screen": "^3.3.0",