Use external library to render header buttons

package.json

@@ -28,6 +28,8 @@
     "@react-navigation/native": "^5.0.9",
     "@react-navigation/stack": "^5.1.1",
     "expo": "^37.0.0",
+    "expo-barcode-scanner": "~8.1.0",
+    "expo-camera": "latest",
     "expo-linear-gradient": "~8.1.0",
     "expo-localization": "~8.1.0",
     "expo-permissions": "~8.1.0",
@@ -50,8 +52,7 @@
     "react-native-safe-area-context": "0.7.3",
     "react-native-screens": "~2.2.0",
     "react-native-webview": "8.1.1",
-    "expo-barcode-scanner": "~8.1.0",
-    "expo-camera": "latest"
+    "react-navigation-header-buttons": "^3.0.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

src/components/Custom/HeaderButton.js

@@ -1,22 +1,37 @@
-import * as React from 'react';
-import {IconButton, withTheme} from 'react-native-paper';
+// @flow
 
-/**
- * Component used to display a header button
- *
- * @param props Props to pass to the component
- * @return {*}
- */
-function HeaderButton(props) {
-    const {colors} = props.theme;
+import * as React from 'react';
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+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
+        {...props}
+        IconComponent={MaterialCommunityIcons}
+        iconSize={26}
+        color={props.theme.colors.text}
+        background={Touchable.Ripple(props.theme.colors.ripple, true)}
+    />
+);
+
+const MaterialHeaderButtons = (props: Object) => {
     return (
-        <IconButton
-            icon={props.icon}
-            size={26}
-            color={props.color !== undefined ? props.color : colors.text}
-            onPress={props.onPress}
+        <HeaderButtons
+            {...props}
+            HeaderButtonComponent={withTheme(MaterialHeaderButton)}
+            OverflowIcon={
+                <MaterialCommunityIcons
+                    name="dots-vertical"
+                    size={26}
+                    color={props.theme.colors.text}
+                />
+            }
         />
     );
-}
+};
 
-export default withTheme(HeaderButton);
+export default withTheme(MaterialHeaderButtons);
+
+export {Item} from 'react-navigation-header-buttons';

src/components/Screens/WebViewScreen.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import WebView from "react-native-webview";
-import HeaderButton from "../Custom/HeaderButton";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 import ErrorView from "../Custom/ErrorView";
-import {ERROR_TYPE} from "../../managers/ConnectionManager";
+import {ERROR_TYPE} from "../../utils/WebData";
+import MaterialHeaderButtons, {Item} from '../Custom/HeaderButton';
 
 type Props = {
     navigation: Object,
@@ -55,7 +55,11 @@ class WebViewScreen extends React.PureComponent<Props> {
      * @return {*}
      */
     getRefreshButton() {
-        return <HeaderButton icon={'refresh'} onPress={this.onRefreshClicked}/>
+        return (
+            <MaterialHeaderButtons>
+                <Item title="refresh" iconName="refresh" onPress={this.onRefreshClicked}/>
+            </MaterialHeaderButtons>
+        );
     };
 
     /**

src/managers/ThemeManager.js

@@ -34,6 +34,7 @@ export default class ThemeManager {
                 tabIcon: "#929292",
                 card: "rgb(255, 255, 255)",
                 dividerBackground: '#e2e2e2',
+                ripple: "rgba(0,0,0,0.2)",
                 textDisabled: '#c1c1c1',
                 icon: '#5d5d5d',
                 subtitle: '#707070',
@@ -91,6 +92,7 @@ export default class ThemeManager {
                 tabIcon: "#6d6d6d",
                 card: "rgb(18, 18, 18)",
                 dividerBackground: '#222222',
+                ripple: "rgba(255,255,255,0.2)",
                 textDisabled: '#5b5b5b',
                 icon: '#b3b3b3',
                 subtitle: '#aaaaaa',

src/navigation/DrawerNavigator.js

@@ -13,7 +13,6 @@ import TetrisScreen from "../screens/Tetris/TetrisScreen";
 import DebugScreen from '../screens/About/DebugScreen';
 import Sidebar from "../components/Sidebar/Sidebar";
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
-import HeaderButton from "../components/Custom/HeaderButton";
 import i18n from "i18n-js";
 import LoginScreen from "../screens/Amicale/LoginScreen";
 import ProfileScreen from "../screens/Amicale/ProfileScreen";
@@ -22,6 +21,7 @@ import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
 import VoteScreen from "../screens/Amicale/VoteScreen";
 import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
+import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
 
 const defaultScreenOptions = {
     gestureEnabled: true,
@@ -31,7 +31,9 @@ const defaultScreenOptions = {
 
 function getDrawerButton(navigation: Object) {
     return (
-        <HeaderButton icon={'menu'} onPress={navigation.openDrawer}/>
+        <MaterialHeaderButtons left={true}>
+            <Item title="menu" iconName="menu" onPress={navigation.openDrawer}/>
+        </MaterialHeaderButtons>
     );
 }
 
@@ -365,7 +367,8 @@ export default class DrawerNavigator extends React.Component<Props> {
     constructor(props: Object) {
         super(props);
 
-        this.createTabNavigator = () => <TabNavigator defaultRoute={props.defaultRoute} defaultData={props.defaultData}/>
+        this.createTabNavigator = () => <TabNavigator defaultRoute={props.defaultRoute}
+                                                      defaultData={props.defaultData}/>
     }
 
     render() {

src/navigation/MainTabNavigator.js

@@ -13,11 +13,11 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Websites/PlanexScreen';
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import AsyncStorageManager from "../managers/AsyncStorageManager";
-import HeaderButton from "../components/Custom/HeaderButton";
 import {withTheme} from 'react-native-paper';
 import i18n from "i18n-js";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ScannerScreen from "../screens/ScannerScreen";
+import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
 
 
 const TAB_ICONS = {
@@ -36,7 +36,9 @@ const defaultScreenOptions = {
 
 function getDrawerButton(navigation: Object) {
     return (
-        <HeaderButton icon={'menu'} onPress={navigation.openDrawer}/>
+        <MaterialHeaderButtons left={true}>
+            <Item title="menu" iconName="menu" onPress={navigation.openDrawer}/>
+        </MaterialHeaderButtons>
     );
 }
 
@@ -231,7 +233,7 @@ type Props = {
     defaultData: Object
 }
 
-class TabNavigator extends React.Component<Props>{
+class TabNavigator extends React.Component<Props> {
 
     createHomeStackComponent: Object;
 

src/screens/Amicale/Clubs/ClubListScreen.js

@@ -8,7 +8,7 @@ import i18n from "i18n-js";
 import ClubListItem from "../../../components/Lists/ClubListItem";
 import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
 import ClubListHeader from "../../../components/Lists/ClubListHeader";
-import HeaderButton from "../../../components/Custom/HeaderButton";
+import MaterialHeaderButtons, {Item} from "../../../components/Custom/HeaderButton";
 
 type Props = {
     navigation: Object,
@@ -72,7 +72,9 @@ class ClubListScreen extends React.Component<Props, State> {
      */
     getHeaderButtons = () => {
         const onPress = () => this.props.navigation.navigate("club-about");
-        return <HeaderButton icon={'information'} onPress={onPress}/>;
+        return <MaterialHeaderButtons>
+            <Item title="main" iconName="information" onPress={onPress}/>
+        </MaterialHeaderButtons>;
     };
 
     /**

src/screens/Amicale/ProfileScreen.js

@@ -5,9 +5,9 @@ import {FlatList, StyleSheet, View} from "react-native";
 import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
 import {openBrowser} from "../../utils/WebBrowser";
-import HeaderButton from "../../components/Custom/HeaderButton";
 import i18n from 'i18n-js';
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
 
 type Props = {
     navigation: Object,
@@ -47,7 +47,9 @@ class ProfileScreen extends React.Component<Props, State> {
 
     hideDisconnectDialog = () => this.setState({dialogVisible: false});
 
-    getHeaderButton = () => <HeaderButton icon={'logout'} onPress={this.showDisconnectDialog}/>;
+    getHeaderButton = () => <MaterialHeaderButtons>
+        <Item title="logout" iconName="logout" onPress={this.showDisconnectDialog}/>
+    </MaterialHeaderButtons>;
 
     getScreen = (data: Object) => {
         this.data = data[0];

src/screens/HomeScreen.js

@@ -12,9 +12,9 @@ import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardI
 import {stringToDate} from "../utils/Planning";
 import {openBrowser} from "../utils/WebBrowser";
 import ActionsDashBoardItem from "../components/Home/ActionsDashboardItem";
-import HeaderButton from "../components/Custom/HeaderButton";
 import ConnectionManager from "../managers/ConnectionManager";
 import {CommonActions} from '@react-navigation/native';
+import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
 // import DATA from "../dashboard_data.json";
 
 
@@ -96,11 +96,9 @@ class HomeScreen extends React.Component<Props> {
             ? "account"
             : "login";
         const onPress = () => this.props.navigation.navigate(screen);
-        return <HeaderButton
-            icon={icon}
-            onPress={onPress}
-            color={this.isLoggedIn ? undefined : this.colors.primary}
-        />;
+        return <MaterialHeaderButtons>
+            <Item title="main" iconName={icon} onPress={onPress}/>
+        </MaterialHeaderButtons>;
     };
 
     onProxiwashClick = () => this.props.navigation.navigate('proxiwash');

src/screens/Proximo/ProximoListScreen.js

@@ -7,7 +7,7 @@ import CustomModal from "../../components/Custom/CustomModal";
 import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
 import {stringMatchQuery} from "../../utils/Search";
 import ProximoListItem from "../../components/Lists/ProximoListItem";
-import HeaderButton from "../../components/Custom/HeaderButton";
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
 
 function sortPrice(a, b) {
     return a.price - b.price;
@@ -102,7 +102,9 @@ class ProximoListScreen extends React.Component<Props, State> {
      * @return {*}
      */
     getSortMenuButton = () => {
-        return <HeaderButton icon="sort" onPress={this.onSortMenuPress}/>;
+        return <MaterialHeaderButtons>
+            <Item title="main" iconName="sort" onPress={this.onSortMenuPress}/>
+        </MaterialHeaderButtons>;
     };
 
     /**

src/screens/Proximo/ProximoMainScreen.js

@@ -5,7 +5,7 @@ import {View} from 'react-native'
 import i18n from "i18n-js";
 import WebSectionList from "../../components/Lists/WebSectionList";
 import {List, withTheme} from 'react-native-paper';
-import HeaderButton from "../../components/Custom/HeaderButton";
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
 const LIST_ITEM_HEIGHT = 84;
@@ -111,15 +111,10 @@ class ProximoMainScreen extends React.Component<Props, State> {
      * @return {*}
      */
     getHeaderButtons() {
-        return (
-            <View
-                style={{
-                    flexDirection: 'row',
-                }}>
-                <HeaderButton icon={'magnify'} onPress={this.onPressSearchBtn}/>
-                <HeaderButton icon={'information'} onPress={this.onPressAboutBtn}/>
-            </View>
-        );
+        return <MaterialHeaderButtons>
+            <Item title="magnify" iconName="magnify" onPress={this.onPressSearchBtn}/>
+            <Item title="information" iconName="information" onPress={this.onPressAboutBtn}/>
+        </MaterialHeaderButtons>;
     }
 
     /**

src/screens/Proxiwash/ProxiwashScreen.js

@@ -8,11 +8,11 @@ import * as Notifications from "../../utils/Notifications";
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import * as Expo from "expo";
 import {Avatar, Banner, Button, Card, Text, withTheme} from 'react-native-paper';
-import HeaderButton from "../../components/Custom/HeaderButton";
 import ProxiwashListItem from "../../components/Lists/ProxiwashListItem";
 import ProxiwashConstants from "../../constants/ProxiwashConstants";
 import CustomModal from "../../components/Custom/CustomModal";
 import AprilFoolsManager from "../../managers/AprilFoolsManager";
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
 
@@ -152,7 +152,9 @@ class ProxiwashScreen extends React.Component<Props, State> {
      * @return {*}
      */
     getAboutButton() {
-        return <HeaderButton icon={'information'} onPress={this.onAboutPress}/>;
+        return <MaterialHeaderButtons>
+            <Item title="information" iconName="information" onPress={this.onAboutPress}/>
+        </MaterialHeaderButtons>;
     }
 
     /**

src/screens/Tetris/TetrisScreen.js

@@ -6,9 +6,9 @@ import {IconButton, Text, withTheme} from 'react-native-paper';
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import GameLogic from "./GameLogic";
 import Grid from "./components/Grid";
-import HeaderButton from "../../components/Custom/HeaderButton";
 import Preview from "./components/Preview";
 import i18n from "i18n-js";
+import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
 
 type Props = {
     navigation: Object,
@@ -62,14 +62,9 @@ class TetrisScreen extends React.Component<Props, State> {
     }
 
     getRightButton() {
-        return (
-            <View
-                style={{
-                    flexDirection: 'row',
-                }}>
-                <HeaderButton icon={'pause'} onPress={() => this.togglePause()}/>
-            </View>
-        );
+        return <MaterialHeaderButtons>
+            <Item title="pause" iconName="pause" onPress={() => this.togglePause()}/>
+        </MaterialHeaderButtons>;
     }
 
     /**