drawer

App.js

@@ -1,11 +1,14 @@
 import "react-native-gesture-handler";
 import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
-import HomeScreen from "./src/Pages/Home";
+import { StyleSheet } from "react-native";
+import HomeScreen from "./src/Screens/Home";
 import { NativeBaseProvider } from "native-base";
-import { NavigationContainer } from "@react-navigation/native";
 import { createDrawerNavigator } from "@react-navigation/drawer";
-import TestScreen from "./src/Pages/Test";
+import TestScreen from "./src/Screens/Test";
+import { NavigationContainer } from "@react-navigation/native";
+import SideBar from "./src/Components/SideBar";
+import FaqScreen from "./src/Screens/FAQ";
+import FeedbackScreen from "./src/Screens/Feedback";
 
 // fix: https://github.com/GeekyAnts/NativeBase/issues/5758
 
@@ -15,13 +18,14 @@ export default function App() {
   return (
     <NativeBaseProvider>
       <NavigationContainer>
-        <Drawer.Navigator>
-          <Drawer.Screen name="Home" component={HomeScreen} />
-          <Drawer.Screen name="Test" component={TestScreen} />
+        <Drawer.Navigator drawerContent={(props) => <SideBar {...props} />}>
+          <Drawer.Screen name="Spinner V6" component={HomeScreen} />
+          <Drawer.Screen name="FAQ" component={FaqScreen} />
+          <Drawer.Screen name="Feedback" component={FeedbackScreen} />
         </Drawer.Navigator>
-
-        <StatusBar style="dark" />
       </NavigationContainer>
+
+      <StatusBar style="dark" />
     </NativeBaseProvider>
   );
 }

README.md

@@ -0,0 +1,7 @@
+# Clear cache on startup
+
+npx expo start -c
+
+# Icons
+
+https://pictogrammers.com/library/mdi/

src/Components/SideBar/index.js

@@ -0,0 +1,51 @@
+import {
+  DrawerContentScrollView,
+  DrawerItem,
+  DrawerItemList,
+} from "@react-navigation/drawer";
+import { Icon, Text } from "native-base";
+import { Image, StyleSheet, View } from "react-native";
+import { Divider } from "react-native-paper";
+
+export default function Sidebar(props) {
+  return (
+    <>
+      {console.log(props.descriptors)}
+      <Image
+        source={require("../../../assets/image.png")}
+        style={styles.image}
+      />
+      <Text fontSize="md" style={{ fontWeight: "bold", marginLeft: 10 }}>
+        Geräte
+      </Text>
+      <DrawerContentScrollView contentContainerStyle={{ paddingTop: 0 }}>
+        {["Spinner V6"].map((item, i) => (
+          <DrawerItem
+            key={i}
+            label={item}
+            onPress={() => props.navigation.navigate(item)}
+          />
+        ))}
+      </DrawerContentScrollView>
+
+      <View style={{ justifyContent: "flex-end" }}>
+        <Divider style={{ marginLeft: 10, marginRight: 10 }} />
+        <DrawerItem
+          label={"FAQ"}
+          onPress={() => props.navigation.navigate("FAQ")}
+        />
+        <DrawerItem
+          label={"Feedback geben"}
+          onPress={() => props.navigation.navigate("Feedback")}
+        />
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: "100%",
+    height: 250,
+  },
+});

src/Screens/FAQ/index.js

@@ -0,0 +1,5 @@
+import { Text } from "react-native";
+
+export default function FaqScreen() {
+  return <Text>FAQ</Text>;
+}

src/Screens/Feedback/index.js

@@ -0,0 +1,5 @@
+import { Text } from "react-native";
+
+export default function FeedbackScreen() {
+  return <Text>Feedback</Text>;
+}

src/Screens/Home/index.js

@@ -5,7 +5,7 @@ import { Avatar, Button } from "react-native-paper";
 export default function HomeScreen() {
   return (
     <View style={styles.container}>
-      <Avatar.Icon size={82} icon="frequently-asked-questions" />
+      <Avatar.Icon size={82} icon="help" />
       <Text fontSize="xl" style={{ marginBottom: 10 }}>
         Kein Gerät gefunden
       </Text>

src/Screens/Test/index.js

@@ -1,4 +1,4 @@
-import { Text } from "react-native";
+import { Text, View } from "react-native";
 
 export default function TestScreen() {
   return (

src/utils.js

@@ -1,10 +1,8 @@
 const Styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: "#fff",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-  });
-
-  export function Styles 
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});