From 2335a21266ce843ac5c42e2428a74227a35b76c5 Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sun, 18 Apr 2021 17:07:44 -0300
Subject: [PATCH] Place a menu provider at the very root of the app to avoid
 duplicate mounts

---
 src/App.js                                  | 18 +++-
 src/components/navigation/navigators.js     | 91 ++++++++-------------
 src/components/pages/direct/conversation.js | 61 +++++++-------
 src/components/pages/view-comments.js       |  5 +-
 4 files changed, 80 insertions(+), 95 deletions(-)

diff --git a/src/App.js b/src/App.js
index 95c7949..ba57d55 100644
--- a/src/App.js
+++ b/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);
diff --git a/src/components/navigation/navigators.js b/src/components/navigation/navigators.js
index 6e43850..7bb8775 100644
--- a/src/components/navigation/navigators.js
+++ b/src/components/navigation/navigators.js
@@ -2,78 +2,53 @@ 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 }
-            </ScrollView>
-            <TrayJsx
-                    active = { props.active }
-                    navigation = { props.navigation } />
-            </View>
-        </ContextJsx>
+        <View style = { { flex: 1 } }>
+            <ScrollView>
+                { props.children }
+        </ScrollView>
+        <TrayJsx
+                active = { props.active }
+                navigation = { props.navigation } />
+        </View>
     );
 };
 
 export const ScreenWithBackBarJsx = (props) => {
     return (
-        <ContextJsx>
-            <View style = { { flex: 1 } }>
-                <BackBarJsx navigation = { props.navigation }>
-                    { props.renderBackBar != undefined
-                        ? props.renderBackBar()
-                        : <></>
-                    }
-                </BackBarJsx>
-                <ScrollView>
-                    { props.children }
-                </ScrollView>
-            </View>
-        </ContextJsx>
+        <View style = { { flex: 1 } }>
+            <BackBarJsx navigation = { props.navigation }>
+                { props.renderBackBar != undefined
+                    ? props.renderBackBar()
+                    : <></>
+                }
+            </BackBarJsx>
+            <ScrollView>
+                { props.children }
+            </ScrollView>
+        </View>
     );
 };
 
 export const ScreenWithFullNavigationJsx = (props) => {
     return (
-        <ContextJsx>
-            <View style = { { flex: 1 } }>
-                <BackBarJsx navigation = { props.navigation }>
-                    { props.renderBackBar != undefined
-                        ? props.renderBackBar()
-                        : <></>
-                    }
-                </BackBarJsx>
-                <ScrollView>
-                    { props.children }
-                </ScrollView>
-                <TrayJsx
-                    active = { props.active }
-                    navigation = { props.navigation } />
-            </View>
-        </ContextJsx>
+        <View style = { { flex: 1 } }>
+            <BackBarJsx navigation = { props.navigation }>
+                { props.renderBackBar != undefined
+                    ? props.renderBackBar()
+                : <></>
+                }
+            </BackBarJsx>
+            <ScrollView>
+                { props.children }
+            </ScrollView>
+            <TrayJsx
+                active = { props.active }
+                navigation = { props.navigation } />
+        </View>
     );
 };
-
-const providerStyles = {
-    backdrop: {
-        backgroundColor: "black",
-        opacity: 0.5
-    }
-}
diff --git a/src/components/pages/direct/conversation.js b/src/components/pages/direct/conversation.js
index d97c0ec..5ea0999 100644
--- a/src/components/pages/direct/conversation.js
+++ b/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,38 +48,36 @@ const TEST_MESSAGES = [
 ];
 
 const ConversationContainerJsx = (props) => (
-    <ContextJsx>
-        <View style = { { flex: 1 } }>
-            <BackBarJsx navigation = { props.navigation }>
-                { props.renderBackBar() }
-            </BackBarJsx>
-            <ScrollView>
-                { props.children }
-            </ScrollView>
-            <View style = { [ styles.row, styles.send.container ] }>
-                <TextInput
-                    placeholder = "Say something..."
-                    multiline
-                    value = { props.state.newMessage }
-                    style = { styles.input }
-                    onChangeText = {
-                        value => {
-                            props.setState({...props.state,
-                                newMessage: value,
-                            });
-                        }
-                    }/>
-                <TouchableOpacity
-                      style = { styles.send.button }
-                      onPress = { props.onSubmit }>
-                    <Ionicons
-                        name = "ios-send"
-                        size = { 24 }
-                        color = "black" />
-                </TouchableOpacity>
-            </View>
+    <View style = { { flex: 1 } }>
+        <BackBarJsx navigation = { props.navigation }>
+            { props.renderBackBar() }
+        </BackBarJsx>
+        <ScrollView>
+            { props.children }
+        </ScrollView>
+        <View style = { [ styles.row, styles.send.container ] }>
+            <TextInput
+                placeholder = "Say something..."
+                multiline
+                value = { props.state.newMessage }
+                style = { styles.input }
+                onChangeText = {
+                    value => {
+                        props.setState({...props.state,
+                            newMessage: value,
+                        });
+                    }
+                }/>
+            <TouchableOpacity
+                  style = { styles.send.button }
+                  onPress = { props.onSubmit }>
+                <Ionicons
+                    name = "ios-send"
+                    size = { 24 }
+                    color = "black" />
+            </TouchableOpacity>
         </View>
-    </ContextJsx>
+    </View>
 );
 
 const ComposeJsx = ({ navigation }) => {
diff --git a/src/components/pages/view-comments.js b/src/components/pages/view-comments.js
index 0814476..ed17a8e 100644
--- a/src/components/pages/view-comments.js
+++ b/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>
     );
 }