fly-up navigation button

components/ToggleNavigationButton.js

@@ -0,0 +1,14 @@
+
+import React from 'react';
+import {useNavigation} from '@react-navigation/native';
+import {TouchableOpacity} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+export default function ToggleNavigationButton() {
+    const navigation = useNavigation();
+
+    return <TouchableOpacity onPress={() => navigation.toggleDrawer()} style={{backgroundColor: '#333333',
+        borderColor: '#777777', borderStyle: 'solid', borderWidth: 1, padding: 5}}>
+        <Icon name="menu" size={20} color="#ffffff" />
+    </TouchableOpacity>;
+}

screens/CameraScreen.js

@@ -23,6 +23,8 @@ import {getRtspAddressByCredentials} from '../lib/util';
 
 import PlayerError from '../components/PlayerError';
 
+import ToggleNavigationButton from '../components/ToggleNavigationButton';
+
 const Stack = createStackNavigator();
 
 
@@ -142,6 +144,9 @@ function PlayerScreen({navigation}) {
             {screens.map(([target], index) =>
                 <ScreenButton key={index} name={target} active={index === activeScreen} onPress={() => setActiveScreen(index)} />)}
         </View>
+        <View style={{position: 'absolute', top:10, left:20}}>
+            <ToggleNavigationButton />
+        </View>
     </View>);
 }
 
@@ -225,7 +230,7 @@ export function CameraScreen() {
 
 export function DirectCameraScreen() {
     return (<Stack.Navigator>
-            <Stack.Screen name="DeviceShowCamera" options={{title: 'Show Camera'}} component={ShowCameraScreen} />
+        <Stack.Screen name="DeviceShowCamera" options={{title: 'Show Camera', headerLeft: () => <View style={{paddingLeft:15}}><ToggleNavigationButton /></View>}} component={ShowCameraScreen} />
             <Stack.Screen name="DeviceDirectPlay" options={{headerShown: false}}  component={DirectPlayScreen} />
         </Stack.Navigator>);
 }

screens/EventScreen.js

@@ -15,6 +15,8 @@ import SessionContext from '../session-context';
 import {Menu, MenuOption, MenuOptions, MenuTrigger} from "react-native-popup-menu";
 import Icon from "react-native-vector-icons/MaterialIcons";
 
+import ToggleNavigationButton from '../components/ToggleNavigationButton';
+
 const Stack = createStackNavigator();
 
 function Player({uri}) {
@@ -106,7 +108,7 @@ function EventVideoPlayer({route: {params: {eventId}}, navigation}) {
 
 export default function EventScreen() {
     return (<Stack.Navigator>
-        <Stack.Screen name="EventList" options={{title: 'Events'}} component={EventList} />
+        <Stack.Screen name="EventList" options={{title: 'Events', headerLeft: () => <View style={{paddingLeft:15}}><ToggleNavigationButton /></View>}} component={EventList} />
         <Stack.Screen name="EventVideoPlayer" options={{headerShown: false}} component={EventVideoPlayer} />
     </Stack.Navigator>);
 }