Place a menu provider at the very root of the app to avoid duplicate mounts

src/App.js

@@ -1,8 +1,9 @@
 import 'react-native-gesture-handler';
-
+import React from "react";
 
 import { createAppContainer } from 'react-navigation';
 import { createStackNavigator } from "react-navigation-stack";
+import { MenuProvider } from "react-native-popup-menu";
 
 import { registerRootComponent } from 'expo';
 
@@ -45,6 +46,19 @@ const Stack = createStackNavigator({
     }
 });
 
-const App = createAppContainer(Stack);
+const AppContainer = createAppContainer(Stack);
+
+const App = (props) => {
+    const providerStyles = {
+        backdrop: {
+            backgroundColor: "black",
+            opacity: 0.5
+        }
+    };
+
+    return <MenuProvider style = { providerStyles }>
+        <AppContainer />
+    </MenuProvider>;
+};
 
 export default registerRootComponent(App);

src/components/navigation/navigators.js

@@ -2,24 +2,11 @@ import React from "react";
 import { View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 
-import { MenuProvider } from "react-native-popup-menu";
-
 import BackBarJsx from "./back-bar";
 import TrayJsx from "src/components/navigation/tray";
 
-// Provider for context menus
-// Allows for establishing global styling of context menus
-export const ContextJsx = (props) => {
-    return (
-        <MenuProvider customStyles = { providerStyles }>
-            { props.children }
-        </MenuProvider>
-    );
-};
-
 export const ScreenWithTrayJsx = (props) => {
     return (
-        <ContextJsx>
         <View style = { { flex: 1 } }>
             <ScrollView>
                 { props.children }
@@ -28,13 +15,11 @@ export const ScreenWithTrayJsx = (props) => {
                 active = { props.active }
                 navigation = { props.navigation } />
         </View>
-        </ContextJsx>
     );
 };
 
 export const ScreenWithBackBarJsx = (props) => {
     return (
-        <ContextJsx>
         <View style = { { flex: 1 } }>
             <BackBarJsx navigation = { props.navigation }>
                 { props.renderBackBar != undefined
@@ -46,13 +31,11 @@ export const ScreenWithBackBarJsx = (props) => {
                 { props.children }
             </ScrollView>
         </View>
-        </ContextJsx>
     );
 };
 
 export const ScreenWithFullNavigationJsx = (props) => {
     return (
-        <ContextJsx>
         <View style = { { flex: 1 } }>
             <BackBarJsx navigation = { props.navigation }>
                 { props.renderBackBar != undefined
@@ -67,13 +50,5 @@ export const ScreenWithFullNavigationJsx = (props) => {
                 active = { props.active }
                 navigation = { props.navigation } />
         </View>
-        </ContextJsx>
     );
 };
-
-const providerStyles = {
-    backdrop: {
-        backgroundColor: "black",
-        opacity: 0.5
-    }
-}

src/components/pages/direct/conversation.js

@@ -25,7 +25,6 @@ import {
 const { SlideInMenu } = renderers;
 
 import BackBarJsx from "src/components/navigation/back-bar";
-import { ContextJsx } from "src/components/navigation/navigators";
 
 import { timeToAge } from "src/interface/rendering";
 
@@ -49,7 +48,6 @@ const TEST_MESSAGES = [
 ];
 
 const ConversationContainerJsx = (props) => (
-    <ContextJsx>
     <View style = { { flex: 1 } }>
         <BackBarJsx navigation = { props.navigation }>
             { props.renderBackBar() }
@@ -80,7 +78,6 @@ const ConversationContainerJsx = (props) => (
             </TouchableOpacity>
         </View>
     </View>
-    </ContextJsx>
 );
 
 const ComposeJsx = ({ navigation }) => {

src/components/pages/view-comments.js

@@ -7,7 +7,6 @@ import { timeToAge } from "src/interface/rendering";
 import { activeOrNot } from "src/interface/interactions";
 
 import TimelineViewJsx from "src/components/posts/timeline-view";
-import { ContextJsx } from "src/components/navigation/navigators";
 import BackBarJsx from "src/components/navigation/back-bar";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
@@ -224,7 +223,7 @@ const ViewCommentsJsx = (props) => {
     }, []);
 
     return (
-        <ContextJsx>
+        <View>
             { state.loaded ?
                 <View style = { { flex: 1 } }>
                     <BackBarJsx navigation = { props.navigation }/>
@@ -284,7 +283,7 @@ const ViewCommentsJsx = (props) => {
                 </View>
                 : <></>
             }
-        </ContextJsx>
+        </View>
     );
 }