Updated libraries

App.js

@@ -16,6 +16,7 @@ import ConnectionManager from "./src/managers/ConnectionManager";
 import URLHandler from "./src/utils/URLHandler";
 import {setSafeBounceHeight} from "react-navigation-collapsible";
 import SplashScreen from 'react-native-splash-screen'
+import {OverflowMenuProvider} from "react-navigation-header-buttons";
 
 // Native optimizations https://reactnavigation.org/docs/react-native-screens
 // Crashes app when navigating away from webview on android 9+
@@ -189,14 +190,16 @@ export default class App extends React.Component<Props, State> {
         } else {
             return (
                 <PaperProvider theme={this.state.currentTheme}>
-                    <View style={{backgroundColor: ThemeManager.getCurrentTheme().colors.background, flex: 1}}>
-                        <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
-                            <MainNavigator
-                                defaultHomeRoute={this.defaultHomeRoute}
-                                defaultHomeData={this.defaultHomeData}
-                            />
-                        </NavigationContainer>
-                    </View>
+                    <OverflowMenuProvider>
+                        <View style={{backgroundColor: ThemeManager.getCurrentTheme().colors.background, flex: 1}}>
+                            <NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
+                                <MainNavigator
+                                    defaultHomeRoute={this.defaultHomeRoute}
+                                    defaultHomeData={this.defaultHomeData}
+                                />
+                            </NavigationContainer>
+                        </View>
+                    </OverflowMenuProvider>
                 </PaperProvider>
             );
         }

package.json

@@ -43,8 +43,8 @@
     "react-native-keychain": "^6.0.0",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-localize": "^1.4.0",
-    "react-native-modalize": "^1.3.6",
-    "react-native-paper": "^3.9.0",
+    "react-native-modalize": "^2.0.4",
+    "react-native-paper": "^3.10.1",
     "react-native-permissions": "^2.1.4",
     "react-native-push-notification": "^3.3.1",
     "react-native-reanimated": "^1.8.0",
@@ -54,8 +54,8 @@
     "react-native-splash-screen": "^3.2.0",
     "react-native-vector-icons": "^6.6.0",
     "react-native-webview": "^9.4.0",
-    "react-navigation-collapsible": "^5.5.0",
-    "react-navigation-header-buttons": "^3.0.5"
+    "react-navigation-collapsible": "^5.6.0",
+    "react-navigation-header-buttons": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",

src/components/Overrides/CustomHeaderButton.js

@@ -6,26 +6,20 @@ import {HeaderButton, HeaderButtons} from 'react-navigation-header-buttons';
 import {withTheme} from "react-native-paper";
 import * as Touchable from "react-native/Libraries/Components/Touchable/TouchableNativeFeedback.android";
 
-const MaterialHeaderButton = (props: Object) => <HeaderButton
+const MaterialHeaderButton = (props: Object) =>
+    <HeaderButton
+        {...props}
         IconComponent={MaterialCommunityIcons}
         iconSize={26}
         color={props.color != null ? props.color : props.theme.colors.text}
         background={Touchable.Ripple(props.theme.colors.ripple, true)}
-        {...props}
     />;
 
 const MaterialHeaderButtons = (props: Object) => {
     return (
         <HeaderButtons
-            HeaderButtonComponent={withTheme(MaterialHeaderButton)}
-            OverflowIcon={
-                <MaterialCommunityIcons
-                    name="dots-vertical"
-                    size={26}
-                    color={props.theme.colors.text}
-                />
-            }
             {...props}
+            HeaderButtonComponent={withTheme(MaterialHeaderButton)}
         />
     );
 };

src/components/Screens/WebViewScreen.js

@@ -6,16 +6,22 @@ import BasicLoadingScreen from "./BasicLoadingScreen";
 import ErrorView from "./ErrorView";
 import {ERROR_TYPE} from "../../utils/WebData";
 import MaterialHeaderButtons, {Item} from '../Overrides/CustomHeaderButton';
-import {HiddenItem} from "react-navigation-header-buttons";
+import {Divider, HiddenItem, OverflowMenu} from "react-navigation-header-buttons";
 import i18n from 'i18n-js';
 import {Animated, BackHandler, Linking} from "react-native";
 import {withCollapsible} from "../../utils/withCollapsible";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import {withTheme} from "react-native-paper";
+import type {CustomTheme} from "../../managers/ThemeManager";
+import {StackNavigationProp} from "@react-navigation/stack";
+import {Collapsible} from "react-navigation-collapsible";
 
 type Props = {
-    navigation: Object,
+    navigation: StackNavigationProp,
+    theme: CustomTheme,
     url: string,
     customJS: string,
-    collapsibleStack: Object,
+    collapsibleStack: Collapsible,
     onMessage: Function,
     onScroll: Function,
     showAdvancedControls: boolean,
@@ -104,19 +110,28 @@ class WebViewScreen extends React.PureComponent<Props> {
                 <Item
                     title="refresh"
                     iconName="refresh"
-                    onPress={this.onRefreshClicked}/>
-                <HiddenItem
-                    title={i18n.t("general.goBack")}
-                    iconName="arrow-left"
-                    onPress={this.onGoBackClicked}/>
-                <HiddenItem
-                    title={i18n.t("general.goForward")}
-                    iconName="arrow-right"
-                    onPress={this.onGoForwardClicked}/>
-                <HiddenItem
-                    title={i18n.t("general.openInBrowser")}
-                    iconName="web"
-                    onPress={this.onOpenClicked}/>
+                    onPress={this.onRefreshClicked}
+                />
+                <OverflowMenu
+                    style={{marginHorizontal: 10}}
+                    OverflowIcon={
+                        <MaterialCommunityIcons
+                            name="dots-vertical"
+                            size={26}
+                            color={this.props.theme.colors.text}
+                        />}
+                >
+                    <HiddenItem
+                        title={i18n.t("general.goBack")}
+                        onPress={this.onGoBackClicked}/>
+                    <HiddenItem
+                        title={i18n.t("general.goForward")}
+                        onPress={this.onGoForwardClicked}/>
+                    <Divider/>
+                    <HiddenItem
+                        title={i18n.t("general.openInBrowser")}
+                        onPress={this.onOpenClicked}/>
+                </OverflowMenu>
             </MaterialHeaderButtons>
         );
     }
@@ -179,4 +194,4 @@ class WebViewScreen extends React.PureComponent<Props> {
     }
 }
 
-export default withCollapsible(WebViewScreen);
+export default withCollapsible(withTheme(WebViewScreen));