Revize b7014ba2

Drawer navigation design template
re #10345

App.tsx

@@ -1 @@
-import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, Text, View } from 'react-native'
+import 'react-native-gesture-handler'
+import { StyleSheet} from 'react-native'
 import { NativeBaseProvider, Box } from "native-base"
-import LoginPage from './src/pages/LoginPage'
 import { Provider } from "react-redux"
 import store from "./src/stores/store"
+import Navigation from "./src/components/Navigation"
 
 export default function App() {
   return (
       <Provider store={store}>
           <NativeBaseProvider>
-            <LoginPage />
+              <Navigation/>
           </NativeBaseProvider>
       </Provider>
   )

babel.config.js

@@ -1 +1 @@
 module.exports = function(api) {
-  api.cache(true);
+  api.cache(false);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
   };
 };

package.json

@@ -9 +9 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-navigation/drawer": "^6.6.2",
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.12",
     "@reduxjs/toolkit": "^1.9.3",
     "axios": "^1.3.4",
     "expo": "~48.0.9",
@@ -16 +19 @@
     "native-base": "^3.4.28",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.71.4",
+    "react-native": "0.71.6",
     "react-native-deck-swiper": "^2.0.13",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",

src/components/Navigation.tsx

@@ +1 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack"
+import { NavigationContainer } from "@react-navigation/native"
+import HomePage from "../pages/HomePage"
+import LoginPage from "../pages/LoginPage"
+import { IconButton } from "native-base"
+import { AntDesign } from "@expo/vector-icons"
+import SearchPage from "../pages/SearchPage"
+import { createDrawerNavigator } from "@react-navigation/drawer"
+import { useSelector } from "react-redux"
+import { RootState } from "../stores/store"
+
+const Navigation = () => {
+    const Drawer = createDrawerNavigator()
+    const loggedIn = useSelector((state: RootState) => state.user.loggedIn)
+
+    return (
+        <NavigationContainer>
+            <Drawer.Navigator useLegacyImplementation
+                screenOptions={({ navigation }) => ({
+                    headerStyle: {
+                        backgroundColor: '#f4511e',
+                    },
+                    headerTintColor: '#fff',
+                    headerTitleStyle: {
+                        fontWeight: 'bold',
+                    },
+                    headerRight: () => (
+                        <IconButton
+                            onPress={() => navigation.navigate("Search")}
+                            title="Info"
+                            color="#fff"
+                            _icon={{
+                                as: AntDesign,
+                                name: "search1",
+                                color: "white"
+                            }}
+                        />
+                    ),
+                })}
+            >
+                {loggedIn ? (
+                    <>
+                        <Drawer.Screen
+                            name="Home"
+                            component={HomePage}
+                            options={{
+                                title: 'My home'
+                            }}
+                        />
+                        <Drawer.Screen
+                            name="Search"
+                            component={SearchPage}
+                        />
+                    </>
+                ) : (
+                    <Drawer.Screen
+                        name="Login"
+                        component={LoginPage}
+                        options={({ navigation }) => ({
+                            headerRight: () => (
+                                <></>
+                            )
+                        })}
+                    />
+                )}
+            </Drawer.Navigator>
+        </NavigationContainer>
+    )
+
+}
+
+export default Navigation

src/pages/HomePage.tsx

@@ +1 @@
+import { Center, Image, Text } from "native-base"
+
+const HomePage = () => {
+    return (
+        <Center>
+            <Text>Home Page</Text>
+            <Image
+                source={{uri: "http:/147.228.173.159/static/home/Rudolf-Aachen-crop.png"}}
+                w={"100%"}
+                h={"50%"}
+                alt={"Rudolf-Aachen"}
+            />
+        </Center>
+    )
+}
+
+export default HomePage

src/pages/SearchPage.tsx

@@ +1 @@
+import { Center, Text } from "native-base"
+
+const SearchPage = () => {
+
+    return (
+        <Center>
+            <Text>Search Page</Text>
+        </Center>
+    )
+}
+
+export default SearchPage