From cec72be88c27da09778699e9f1ea91134a22ba2b Mon Sep 17 00:00:00 2001
From: keplyx <keplyx@gmail.com>
Date: Thu, 5 Mar 2020 21:48:37 +0100
Subject: [PATCH] Use expo material icons instead of custom class

---
 App.js                                    | 21 ++++----
 components/BaseContainer.js               |  7 +--
 components/CustomHeader.js                | 12 +++--
 components/CustomIntroSlider.js           |  7 ++-
 components/CustomMaterialIcon.js          | 61 ---------------------
 components/DashboardItem.js               | 13 ++---
 components/Sidebar.js                     | 36 ++++---------
 components/WebSectionList.js              |  9 ++--
 components/WebViewScreen.js               | 13 ++---
 navigation/DrawerNavigator.js             | 64 ++++++++---------------
 navigation/MainTabNavigator.js            | 13 ++---
 package.json                              |  1 +
 screens/About/AboutScreen.js              | 32 +++++++-----
 screens/DebugScreen.js                    |  4 +-
 screens/HomeScreen.js                     |  8 +--
 screens/Proximo/ProximoAboutScreen.js     | 10 ++--
 screens/Proximo/ProximoListScreen.js      | 19 ++++---
 screens/Proximo/ProximoMainScreen.js      | 27 ++++++----
 screens/Proxiwash/ProxiwashAboutScreen.js | 30 +++++++----
 screens/Proxiwash/ProxiwashScreen.js      | 28 +++++-----
 screens/SettingsScreen.js                 | 14 +++--
 21 files changed, 186 insertions(+), 243 deletions(-)
 delete mode 100644 components/CustomMaterialIcon.js

diff --git a/App.js b/App.js
index b50c13f..3c146e9 100644
--- a/App.js
+++ b/App.js
@@ -9,12 +9,11 @@ import {clearThemeCache} from 'native-base-shoutem-theme';
 import AsyncStorageManager from "./utils/AsyncStorageManager";
 import CustomIntroSlider from "./components/CustomIntroSlider";
 import {SplashScreen} from 'expo';
-import NotificationsManager from "./utils/NotificationsManager";
 import ThemeManager from './utils/ThemeManager';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import DrawerNavigator from './navigation/DrawerNavigator';
-import { enableScreens } from 'react-native-screens';
+import NotificationsManager from "./utils/NotificationsManager";
 
 type Props = {};
 
@@ -36,10 +35,12 @@ export default class App extends React.Component<Props, State> {
         currentTheme: null,
     };
 
-    constructor(props: Object) {
-        super(props);
+    onIntroDone: Function;
+
+    constructor() {
+        super();
         LocaleManager.initTranslations();
-        enableScreens();
+        this.onIntroDone = this.onIntroDone.bind(this);
     }
 
     /**
@@ -81,23 +82,21 @@ export default class App extends React.Component<Props, State> {
 
     async loadAssetsAsync() {
         // Wait for custom fonts to be loaded before showing the app
-        console.log("loading Fonts");
+        // console.log("loading Fonts");
         SplashScreen.preventAutoHide();
         await Font.loadAsync({
             'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
         });
-        console.log("loading preferences");
+        // console.log("loading preferences");
         await AsyncStorageManager.getInstance().loadPreferences();
         ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
-        console.log("loading Expo token");
+        // console.log("loading Expo token");
         await NotificationsManager.initExpoToken();
-        console.log("loaded");
         this.onLoadFinished();
     }
 
     onLoadFinished() {
-
-        console.log("finished");
+        // console.log("finished");
         // Only show intro if this is the first time starting the app
         this.setState({
             isLoading: false,
diff --git a/components/BaseContainer.js b/components/BaseContainer.js
index 1d7563d..582c492 100644
--- a/components/BaseContainer.js
+++ b/components/BaseContainer.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import {Container} from "native-base";
 import CustomHeader from "./CustomHeader";
-import CustomMaterialIcon from "./CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import {Platform, View} from "react-native";
 import ThemeManager from "../utils/ThemeManager";
 import Touchable from "react-native-platform-touchable";
@@ -66,9 +66,10 @@ export default class BaseContainer extends React.Component<Props, State> {
                             <Touchable
                                 style={{padding: 6}}
                                 onPress={this.onDrawerPress}>
-                                <CustomMaterialIcon
+                                <MaterialCommunityIcons
                                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                                    icon="menu"/>
+                                    size={26}
+                                    name="menu"/>
                             </Touchable>
                         }
                         rightButton={this.props.headerRightButton}
diff --git a/components/CustomHeader.js b/components/CustomHeader.js
index 1a9f738..e567575 100644
--- a/components/CustomHeader.js
+++ b/components/CustomHeader.js
@@ -6,7 +6,7 @@ import {Platform, StyleSheet, View} from "react-native";
 import {getStatusBarHeight} from "react-native-status-bar-height";
 import Touchable from 'react-native-platform-touchable';
 import ThemeManager from "../utils/ThemeManager";
-import CustomMaterialIcon from "./CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import i18n from "i18n-js";
 
 type Props = {
@@ -76,8 +76,9 @@ export default class CustomHeader extends React.Component<Props> {
                         width: '100%',
                         marginBottom: 7
                     }}>
-                    <CustomMaterialIcon
-                        icon={'magnify'}
+                    <MaterialCommunityIcons
+                        name={'magnify'}
+                        size={26}
                         color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
                     <Input
                         ref="searchInput"
@@ -116,9 +117,10 @@ export default class CustomHeader extends React.Component<Props> {
                 <Touchable
                     style={{padding: 6}}
                     onPress={this.onPressBack}>
-                    <CustomMaterialIcon
+                    <MaterialCommunityIcons
                         color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                        icon={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"}/>
+                        name={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"}
+                        size={26}/>
                 </Touchable>;
         else
             button = this.props.leftButton;
diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js
index 1ad4221..55552a8 100644
--- a/components/CustomIntroSlider.js
+++ b/components/CustomIntroSlider.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import {LinearGradient} from "expo-linear-gradient";
 import {Image, StyleSheet, View} from "react-native";
-import CustomMaterialIcon from "./CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import {Text} from "native-base";
 import i18n from 'i18n-js';
 import AppIntroSlider from "react-native-app-intro-slider";
@@ -131,7 +131,10 @@ export default class CustomIntroSlider extends React.Component<Props> {
             >
                 {item.image !== undefined ?
                     <Image source={item.image} style={styles.image}/>
-                    : <CustomMaterialIcon icon={item.icon} color={'#fff'} fontSize={200} width={200}/>}
+                    : <MaterialCommunityIcons
+                        name={item.icon}
+                        color={'#fff'}
+                        size={200}/>}
                 <View style={{marginTop: 20}}>
                     <Text style={styles.title}>{item.title}</Text>
                     <Text style={styles.text}>{item.text}</Text>
diff --git a/components/CustomMaterialIcon.js b/components/CustomMaterialIcon.js
deleted file mode 100644
index 4792b81..0000000
--- a/components/CustomMaterialIcon.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import {Icon} from "native-base";
-import ThemeManager from '../utils/ThemeManager';
-
-type Props = {
-    active: boolean,
-    icon: string,
-    color: ?string,
-    fontSize: number,
-    width: number | string,
-}
-
-/**
- * Custom component defining a material icon using native base
- *
- * @prop active {boolean} Whether to set the icon color to active
- * @prop icon {string} The icon string to use from MaterialCommunityIcons
- * @prop color {string} The icon color. Use default theme color if unspecified
- * @prop fontSize {number} The icon size. Use 26 if unspecified
- * @prop width {number} The icon width. Use 30 if unspecified
- */
-export default class CustomMaterialIcon extends React.Component<Props> {
-
-    static defaultProps = {
-        active: false,
-        color: undefined,
-        fontSize: 26,
-        width: 30,
-    };
-
-    shouldComponentUpdate(nextProps: Props): boolean {
-        return nextProps.icon !== this.props.icon ||
-            nextProps.active !== this.props.active ||
-            nextProps.width !== this.props.width ||
-            nextProps.fontSize !== this.props.fontSize ||
-            nextProps.color !== this.props.color;
-    }
-
-    render() {
-        // console.log("rendering icon " + this.props.icon);
-        return (
-            <Icon
-                active
-                name={this.props.icon}
-                type={'MaterialCommunityIcons'}
-                style={{
-                    color:
-                        this.props.color !== undefined ?
-                            this.props.color :
-                            this.props.active ?
-                                ThemeManager.getCurrentThemeVariables().brandPrimary :
-                                ThemeManager.getCurrentThemeVariables().customMaterialIconColor,
-                    fontSize: this.props.fontSize,
-                    width: this.props.width
-                }}
-            />
-        );
-    }
-}
diff --git a/components/DashboardItem.js b/components/DashboardItem.js
index 7695cae..1d5b2f4 100644
--- a/components/DashboardItem.js
+++ b/components/DashboardItem.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base";
-import CustomMaterialIcon from "./CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import {View} from "react-native";
 import ThemeManager from "../utils/ThemeManager";
 import HTML from "react-native-render-html";
@@ -132,7 +132,9 @@ export default class DashboardItem extends React.Component<Props> {
                                     }}>
                                         {i18n.t("homeScreen.dashboard.seeMore")}
                                     </Text>
-                                    <CustomMaterialIcon icon={'chevron-right'}/>
+                                    <MaterialCommunityIcons
+                                        name={'chevron-right'}
+                                        size={26}/>
                                 </View>
                             </LinearGradient>
                         </Body>
@@ -145,15 +147,14 @@ export default class DashboardItem extends React.Component<Props> {
 
     getIcon() {
         return (
-            <CustomMaterialIcon
-                icon={this.props.icon}
+            <MaterialCommunityIcons
+                name={this.props.icon}
                 color={
                     this.props.isAvailable ?
                         this.props.color :
                         ThemeManager.getCurrentThemeVariables().textDisabledColor
                 }
-                fontSize={this.props.isSquare ? 50 : 40}
-                width={this.props.isSquare ? 50 : 40}/>
+                size={this.props.isSquare ? 50 : 40}/>
         );
     }
 
diff --git a/components/Sidebar.js b/components/Sidebar.js
index a91cf46..72db945 100644
--- a/components/Sidebar.js
+++ b/components/Sidebar.js
@@ -1,17 +1,15 @@
 // @flow
 
 import * as React from 'react';
-import {Dimensions, FlatList, Image, Linking, Platform, StyleSheet} from 'react-native';
-import {Badge, Container, Left, ListItem, Right, Text} from "native-base";
+import {Dimensions, FlatList, Image,Platform, StyleSheet} from 'react-native';
+import {Container, Left, ListItem, Text} from "native-base";
 import i18n from "i18n-js";
-import CustomMaterialIcon from '../components/CustomMaterialIcon';
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import ThemeManager from "../utils/ThemeManager";
 import * as WebBrowser from 'expo-web-browser';
 
 const deviceWidth = Dimensions.get("window").width;
 
-const drawerCover = require("../assets/drawer-cover.png");
-
 type Props = {
     navigation: Object,
 };
@@ -134,7 +132,7 @@ export default class SideBar extends React.Component<Props, State> {
 
     getRenderItem({item}: Object) {
         const onListItemPress = this.onListItemPress.bind(this, item);
-
+        // return <View/>;
         if (item.icon !== undefined) {
             return (
                 <ListItem
@@ -144,29 +142,15 @@ export default class SideBar extends React.Component<Props, State> {
                     onPress={onListItemPress}
                 >
                     <Left>
-                        <CustomMaterialIcon
-                            icon={item.icon}
-                            active={this.state.active === item.route}
+                        <MaterialCommunityIcons
+                            name={item.icon}
+                            size={26}
+                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
                         />
                         <Text style={styles.text}>
                             {item.name}
                         </Text>
                     </Left>
-                    {item.types &&
-                    <Right style={{flex: 1}}>
-                        <Badge
-                            style={{
-                                borderRadius: 3,
-                                height: 25,
-                                width: 72,
-                                backgroundColor: item.bg
-                            }}
-                        >
-                            <Text
-                                style={styles.badgeText}
-                            >{`${item.types} Types`}</Text>
-                        </Badge>
-                    </Right>}
                 </ListItem>
             );
         } else {
@@ -180,12 +164,12 @@ export default class SideBar extends React.Component<Props, State> {
     }
 
     render() {
-        // console.log("rendering SideBar");
+        console.log("rendering SideBar");
         return (
             <Container style={{
                 backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
             }}>
-                <Image source={drawerCover} style={styles.drawerCover}/>
+                <Image source={require("../assets/drawer-cover.png")} style={styles.drawerCover}/>
                 <FlatList
                     data={this.dataSet}
                     extraData={this.state}
diff --git a/components/WebSectionList.js b/components/WebSectionList.js
index 9a57c50..812196e 100644
--- a/components/WebSectionList.js
+++ b/components/WebSectionList.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import {H3, Spinner, View} from "native-base";
 import ThemeManager from '../utils/ThemeManager';
 import WebDataManager from "../utils/WebDataManager";
-import CustomMaterialIcon from "./CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import i18n from "i18n-js";
 import {RefreshControl, SectionList} from "react-native";
 
@@ -150,10 +150,9 @@ export default class WebSectionList extends React.Component<Props, State> {
                     {this.state.refreshing ?
                         <Spinner/>
                         :
-                        <CustomMaterialIcon
-                            icon={item.icon}
-                            fontSize={100}
-                            width={100}
+                        <MaterialCommunityIcons
+                            name={item.icon}
+                            size={100}
                             color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>}
                 </View>
 
diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js
index 69aa465..87c2d55 100644
--- a/components/WebViewScreen.js
+++ b/components/WebViewScreen.js
@@ -5,7 +5,7 @@ import {Linking, Platform, View} from 'react-native';
 import {Body, Footer, Left, Right, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base';
 import WebView from "react-native-webview";
 import Touchable from "react-native-platform-touchable";
-import CustomMaterialIcon from "../components/CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import ThemeManager from "../utils/ThemeManager";
 import BaseContainer from "../components/BaseContainer";
 
@@ -59,9 +59,10 @@ export default class WebViewScreen extends React.Component<Props> {
             <Touchable
                 style={{padding: 6}}
                 onPress={clickAction}>
-                <CustomMaterialIcon
+                <MaterialCommunityIcons
                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                    icon={icon}/>
+                    name={icon}
+                    size={26}/>
             </Touchable>
         );
     }
@@ -144,10 +145,10 @@ export default class WebViewScreen extends React.Component<Props> {
             tabbedView.push(
                 <Tab heading={
                     <TabHeading>
-                        <CustomMaterialIcon
-                            icon={this.props.data[i]['icon']}
+                        <MaterialCommunityIcons
+                            name={this.props.data[i]['icon']}
                             color={ThemeManager.getCurrentThemeVariables().tabIconColor}
-                            fontSize={20}
+                            size={20}
                         />
                         <Text>{this.props.data[i]['name']}</Text>
                     </TabHeading>}
diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js
index c84af0b..d8a9a1a 100644
--- a/navigation/DrawerNavigator.js
+++ b/navigation/DrawerNavigator.js
@@ -11,6 +11,7 @@ import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
 import DebugScreen from '../screens/DebugScreen';
 import Sidebar from "../components/Sidebar";
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
+import PerfHomeScreen from '../screens/PerfHomeScreen';
 
 const AboutStack = createStackNavigator();
 
@@ -84,47 +85,24 @@ export default function DrawerNavigator() {
         </Drawer.Navigator>
     );
 }
-//
-// // Create a stack to use animations
-// function createDrawerStackWithInitialRoute(initialRoute: string) {
-//     return createStackNavigator({
-//             Main: createMaterialBottomTabNavigatorWithInitialRoute(initialRoute),
-//             SettingsScreen: {screen: SettingsScreen},
-//             AboutScreen: AboutStack,
-//             SelfMenuScreen: {screen: SelfMenuScreen},
-//             TutorInsaScreen: {screen: TutorInsaScreen},
-//             AmicaleScreen: {screen: AmicaleScreen},
-//             WiketudScreen: {screen: WiketudScreen},
-//             ElusEtudScreen: {screen: ElusEtudScreen},
-//             BlueMindScreen: {screen: BlueMindScreen},
-//             EntScreen: {screen: EntScreen},
-//             AvailableRoomScreen: {screen: AvailableRoomScreen},
-//         },
-//         {
-//             initialRouteName: "Main",
-//             mode: 'card',
-//             headerMode: "none",
-//             defaultNavigationOptions: {
-//                 gestureEnabled: true,
-//                 cardOverlayEnabled: true,
-//                 ...TransitionPresets.SlideFromRightIOS,
-//             },
-//         });
-// }
 
-// /**
-//  * Creates the drawer navigation stack
-//  */
-// function createDrawerNavigatorWithInitialRoute(initialRoute: string) {
-//     return createDrawerNavigator({
-//         Main: createDrawerStackWithInitialRoute(initialRoute),
-//     }, {
-//         contentComponent: Sidebar,
-//         initialRouteName: 'Main',
-//         backBehavior: 'initialRoute',
-//         drawerType: 'front',
-//         useNativeAnimations: true,
-//     });
-// }
-//
-// export {createDrawerNavigatorWithInitialRoute};
+const basicStack = createStackNavigator();
+
+function DrawerNavigator1() {
+    return (
+        <basicStack.Navigator
+            initialRouteName={'Main'}
+            mode='card'
+            screenOptions={{
+                gestureEnabled: true,
+                cardOverlayEnabled: true,
+                ...TransitionPresets.SlideFromRightIOS,
+            }}
+        >
+            <basicStack.Screen
+                name="Main"
+                component={TabNavigator}
+            />
+        </basicStack.Navigator>
+    );
+}
diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js
index 59cba2d..b9c2152 100644
--- a/navigation/MainTabNavigator.js
+++ b/navigation/MainTabNavigator.js
@@ -3,6 +3,7 @@ import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
 import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs";
 
 import HomeScreen from '../screens/HomeScreen';
+import PerfHomeScreen from '../screens/PerfHomeScreen';
 import PlanningScreen from '../screens/PlanningScreen';
 import PlanningDisplayScreen from '../screens/PlanningDisplayScreen';
 import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
@@ -11,12 +12,8 @@ import ProximoMainScreen from '../screens/Proximo/ProximoMainScreen';
 import ProximoListScreen from "../screens/Proximo/ProximoListScreen";
 import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Websites/PlanexScreen';
-import CustomMaterialIcon from "../components/CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import ThemeManager from "../utils/ThemeManager";
-import AboutScreen from "../screens/About/AboutScreen";
-import AboutDependenciesScreen from "../screens/About/AboutDependenciesScreen";
-import DebugScreen from "../screens/DebugScreen";
-import SettingsScreen from "../screens/SettingsScreen";
 import AsyncStorageManager from "../utils/AsyncStorageManager";
 
 const TAB_ICONS = {
@@ -145,12 +142,12 @@ export default function TabNavigator() {
         <Tab.Navigator
             initialRouteName={AsyncStorageManager.getInstance().preferences.defaultStartScreen.current}
             barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary}}
-            screenOptions={({ route }) => ({
-                tabBarIcon: ({ focused, color, size }) => {
+            screenOptions={({route}) => ({
+                tabBarIcon: ({focused, color, size}) => {
                     let icon = TAB_ICONS[route.name];
                     // tintColor is ignoring activeColor and inactiveColor for some reason
                     color = focused ? "#f0edf6" : "#4e1108";
-                    return <CustomMaterialIcon icon={icon} color={color}/>;
+                    return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
                 },
             })}
         >
diff --git a/package.json b/package.json
index 01a8847..90050a9 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@expo/vector-icons": "~10.0.0",
     "@react-native-community/masked-view": "0.1.5",
     "@react-navigation/bottom-tabs": "^5.1.1",
     "@react-navigation/drawer": "^5.1.1",
diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js
index aba7149..02a4ad3 100644
--- a/screens/About/AboutScreen.js
+++ b/screens/About/AboutScreen.js
@@ -7,7 +7,7 @@ import CustomHeader from "../../components/CustomHeader";
 import i18n from "i18n-js";
 import appJson from '../../app';
 import packageJson from '../../package';
-import CustomMaterialIcon from "../../components/CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
 import {Modalize} from "react-native-modalize";
 import ThemeManager from "../../utils/ThemeManager";
@@ -227,11 +227,10 @@ export default class AboutScreen extends React.Component<Props, State> {
             <Card>
                 <CardItem>
                     <Left>
-                        <CustomMaterialIcon
-                            icon={'account-multiple'}
-                            fontSize={40}
-                            width={40}
-                            color={ThemeManager.getCurrentThemeVariables().brandPrimary}/>
+                        <MaterialCommunityIcons
+                            name='account-multiple'
+                            size={40}
+                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
                         <Body>
                             <H1>{i18n.t('aboutScreen.team')}</H1>
                         </Body>
@@ -290,13 +289,18 @@ export default class AboutScreen extends React.Component<Props, State> {
                 <CardItem button
                           onPress={item.onPressCallback}>
                     <Left>
-                        <CustomMaterialIcon icon={item.icon}/>
+                        <MaterialCommunityIcons
+                            name={item.icon}
+                            size={26}
+                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
                         <Text>{item.text}</Text>
                     </Left>
                     {item.showChevron ?
                         <Right>
-                            <CustomMaterialIcon icon="chevron-right"
-                                                fontSize={20}/>
+                            <MaterialCommunityIcons
+                                name={'chevron-right'}
+                                size={26}
+                                color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
                         </Right>
                         :
                         <Right/>
@@ -344,8 +348,9 @@ export default class AboutScreen extends React.Component<Props, State> {
                             marginRight: 'auto',
                         }}
                         onPress={onPressMail}>
-                        <CustomMaterialIcon
-                            icon={'email'}
+                        <MaterialCommunityIcons
+                            name={'email'}
+                            size={26}
                             color={'#fff'}/>
                         <Text>{i18n.t('aboutScreen.bugsMail')}</Text>
                     </Button>
@@ -356,8 +361,9 @@ export default class AboutScreen extends React.Component<Props, State> {
                             marginRight: 'auto',
                         }}
                         onPress={onPressGit}>
-                        <CustomMaterialIcon
-                            icon={'git'}
+                        <MaterialCommunityIcons
+                            name={'git'}
+                            size={26}
                             color={'#fff'}/>
                         <Text>{i18n.t('aboutScreen.bugsGit')}</Text>
                     </Button>
diff --git a/screens/DebugScreen.js b/screens/DebugScreen.js
index ea2b33e..85b22eb 100644
--- a/screens/DebugScreen.js
+++ b/screens/DebugScreen.js
@@ -23,7 +23,7 @@ import {
 import CustomHeader from "../components/CustomHeader";
 import ThemeManager from '../utils/ThemeManager';
 import i18n from "i18n-js";
-import CustomMaterialIcon from "../components/CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import {Alert, Clipboard, View} from "react-native";
 import AsyncStorageManager from "../utils/AsyncStorageManager";
 import NotificationsManager from "../utils/NotificationsManager";
@@ -64,7 +64,7 @@ export default class DebugScreen extends React.Component<Props, State> {
             >
                 {icon !== undefined ?
                     <Left>
-                        <CustomMaterialIcon icon={icon}/>
+                        <MaterialCommunityIcons name={icon} size={26}/>
                     </Left>
                     : <View/>
                 }
diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
index 03a4cbd..a7799e0 100644
--- a/screens/HomeScreen.js
+++ b/screens/HomeScreen.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import {Image, TouchableOpacity, View} from 'react-native';
 import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base';
 import i18n from "i18n-js";
-import CustomMaterialIcon from '../components/CustomMaterialIcon';
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import Autolink from 'react-native-autolink';
 import ThemeManager from "../utils/ThemeManager";
 import DashboardItem from "../components/DashboardItem";
@@ -551,10 +551,10 @@ export default class HomeScreen extends React.Component<Props> {
                     <Left>
                         <Button transparent
                                 onPress={onOutLinkPress}>
-                            <CustomMaterialIcon
-                                icon="facebook"
+                            <MaterialCommunityIcons
+                                name="facebook"
                                 color="#57aeff"
-                                width={20}/>
+                                size={26}/>
                             <Text>En savoir plus</Text>
                         </Button>
                     </Left>
diff --git a/screens/Proximo/ProximoAboutScreen.js b/screens/Proximo/ProximoAboutScreen.js
index 65a19cf..fa2abcf 100644
--- a/screens/Proximo/ProximoAboutScreen.js
+++ b/screens/Proximo/ProximoAboutScreen.js
@@ -5,7 +5,7 @@ import {Image, View} from 'react-native';
 import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base';
 import CustomHeader from "../../components/CustomHeader";
 import i18n from "i18n-js";
-import CustomMaterialIcon from "../../components/CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 
 type Props = {
     navigation: Object,
@@ -39,7 +39,9 @@ export default class ProximoAboutScreen extends React.Component<Props> {
                     <Card>
                         <CardItem>
                             <Left>
-                                <CustomMaterialIcon icon={'clock-outline'}/>
+                                <MaterialCommunityIcons
+                                    name={'clock-outline'}
+                                    size={30}/>
                                 <H2>{i18n.t('proximoScreen.openingHours')}</H2>
                             </Left>
                         </CardItem>
@@ -50,7 +52,9 @@ export default class ProximoAboutScreen extends React.Component<Props> {
                     <Card>
                         <CardItem>
                             <Left>
-                                <CustomMaterialIcon icon={'cash'}/>
+                                <MaterialCommunityIcons
+                                    name={'cash'}
+                                    size={30}/>
                                 <H2>{i18n.t('proximoScreen.paymentMethods')}</H2>
                             </Left>
                         </CardItem>
diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js
index 23887aa..bfbf925 100644
--- a/screens/Proximo/ProximoListScreen.js
+++ b/screens/Proximo/ProximoListScreen.js
@@ -7,7 +7,7 @@ import {FlatList, Image, Platform, View} from "react-native";
 import Touchable from 'react-native-platform-touchable';
 import Menu, {MenuItem} from 'react-native-material-menu';
 import i18n from "i18n-js";
-import CustomMaterialIcon from "../../components/CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import ThemeManager from "../../utils/ThemeManager";
 import {Modalize} from 'react-native-modalize';
 
@@ -182,11 +182,15 @@ export default class ProximoListScreen extends React.Component<Props, State> {
      */
     setupSortIcons(mode: string, isReverse: boolean) {
         const downSortIcon =
-            <CustomMaterialIcon
-                icon={'sort-descending'}/>;
+            <MaterialCommunityIcons
+                name={'sort-descending'}
+                color={'#000'}
+                size={26}/>;
         const upSortIcon =
-            <CustomMaterialIcon
-                icon={'sort-ascending'}/>;
+            <MaterialCommunityIcons
+                name={'sort-ascending'}
+                color={'#000'}
+                size={26}/>;
         switch (mode) {
             case sortMode.price:
                 this.setState({sortNameIcon: ''});
@@ -297,9 +301,10 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                     <Touchable
                         style={{padding: 6}}
                         onPress={this.onSortMenuPress}>
-                        <CustomMaterialIcon
+                        <MaterialCommunityIcons
                             color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                            icon={'sort'}/>
+                            name={'sort'}
+                            size={26}/>
                     </Touchable>
                 }
             >
diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js
index 328782c..5297b2e 100644
--- a/screens/Proximo/ProximoMainScreen.js
+++ b/screens/Proximo/ProximoMainScreen.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import {Platform, View} from 'react-native'
 import {Body, Left, ListItem, Right, Text} from 'native-base';
 import i18n from "i18n-js";
-import CustomMaterialIcon from "../../components/CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import ThemeManager from "../../utils/ThemeManager";
 import Touchable from "react-native-platform-touchable";
 import BaseContainer from "../../components/BaseContainer";
@@ -155,16 +155,18 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
                 <Touchable
                     style={{padding: 6}}
                     onPress={this.onPressSearchBtn}>
-                    <CustomMaterialIcon
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                        icon="magnify"/>
+                    <MaterialCommunityIcons
+                        name="magnify"
+                        size={26}
+                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
                 </Touchable>
                 <Touchable
                     style={{padding: 6}}
                     onPress={this.onPressAboutBtn}>
-                    <CustomMaterialIcon
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                        icon="information"/>
+                    <MaterialCommunityIcons
+                        name="information"
+                        size={26}
+                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
                 </Touchable>
             </View>
         );
@@ -184,9 +186,9 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
                     onPress={onPress}
                 >
                     <Left>
-                        <CustomMaterialIcon
-                            icon={item.type.icon}
-                            fontSize={30}
+                        <MaterialCommunityIcons
+                            name={item.type.icon}
+                            size={30}
                             color={ThemeManager.getCurrentThemeVariables().brandPrimary}
                         />
                     </Left>
@@ -199,7 +201,10 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
                         </Text>
                     </Body>
                     <Right>
-                        <CustomMaterialIcon icon="chevron-right"/>
+                        <MaterialCommunityIcons
+                            icon="chevron-right"
+                            size={26}
+                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
                     </Right>
                 </ListItem>
             );
diff --git a/screens/Proxiwash/ProxiwashAboutScreen.js b/screens/Proxiwash/ProxiwashAboutScreen.js
index 86dda4f..0bcafce 100644
--- a/screens/Proxiwash/ProxiwashAboutScreen.js
+++ b/screens/Proxiwash/ProxiwashAboutScreen.js
@@ -5,7 +5,7 @@ import {Image, View} from 'react-native';
 import {Body, Card, CardItem, Container, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base';
 import CustomHeader from "../../components/CustomHeader";
 import i18n from "i18n-js";
-import CustomMaterialIcon from "../../components/CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import ThemeManager from "../../utils/ThemeManager";
 
 type Props = {
@@ -32,10 +32,10 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                     <Tab
                         heading={
                             <TabHeading>
-                                <CustomMaterialIcon
-                                    icon={'information'}
+                                <MaterialCommunityIcons
+                                    name={'information'}
                                     color={ThemeManager.getCurrentThemeVariables().tabIconColor}
-                                    fontSize={20}
+                                    size={20}
                                 />
                                 <Text>{i18n.t('proxiwashScreen.informationTab')}</Text>
                             </TabHeading>
@@ -60,7 +60,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                             <Card>
                                 <CardItem>
                                     <Left>
-                                        <CustomMaterialIcon icon={'tumble-dryer'}/>
+                                        <MaterialCommunityIcons
+                                            name={'tumble-dryer'}
+                                            size={26}/>
                                         <H2>{i18n.t('proxiwashScreen.dryer')}</H2>
                                     </Left>
                                 </CardItem>
@@ -80,7 +82,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                             <Card>
                                 <CardItem>
                                     <Left>
-                                        <CustomMaterialIcon icon={'washing-machine'}/>
+                                        <MaterialCommunityIcons
+                                            name={'washing-machine'}
+                                            size={26}/>
                                         <H2>{i18n.t('proxiwashScreen.washer')}</H2>
                                     </Left>
                                 </CardItem>
@@ -102,10 +106,10 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                     <Tab
                         heading={
                             <TabHeading>
-                                <CustomMaterialIcon
-                                    icon={'cash'}
+                                <MaterialCommunityIcons
+                                    name={'cash'}
                                     color={ThemeManager.getCurrentThemeVariables().tabIconColor}
-                                    fontSize={20}
+                                    size={20}
                                 />
                                 <Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>
                             </TabHeading>
@@ -116,7 +120,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                             <Card>
                                 <CardItem>
                                     <Left>
-                                        <CustomMaterialIcon icon={'coins'}/>
+                                        <MaterialCommunityIcons
+                                            name={'coins'}
+                                            size={26}/>
                                         <H2>{i18n.t('proxiwashScreen.tariffs')}</H2>
                                     </Left>
                                 </CardItem>
@@ -130,7 +136,9 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                             <Card>
                                 <CardItem>
                                     <Left>
-                                        <CustomMaterialIcon icon={'cash'}/>
+                                        <MaterialCommunityIcons
+                                            name={'cash'}
+                                            size={26}/>
                                         <H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2>
                                     </Left>
                                 </CardItem>
diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js
index 46be088..d26b4bf 100644
--- a/screens/Proxiwash/ProxiwashScreen.js
+++ b/screens/Proxiwash/ProxiwashScreen.js
@@ -5,7 +5,7 @@ import {Alert, Platform, View} from 'react-native';
 import {Body, Card, CardItem, Left, Right, Text} from 'native-base';
 import ThemeManager from '../../utils/ThemeManager';
 import i18n from "i18n-js";
-import CustomMaterialIcon from "../../components/CustomMaterialIcon";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import WebSectionList from "../../components/WebSectionList";
 import NotificationsManager from "../../utils/NotificationsManager";
 import PlatformTouchable from "react-native-platform-touchable";
@@ -288,9 +288,10 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
             <Touchable
                 style={{padding: 6}}
                 onPress={this.onAboutPress}>
-                <CustomMaterialIcon
+                <MaterialCommunityIcons
                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
-                    icon="information"/>
+                    name="information"
+                    size={26}/>
             </Touchable>
         );
     }
@@ -320,7 +321,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
      * @param section The object describing the current SectionList section
      * @returns {React.Node}
      */
-    getRenderItem({item, section} : Object) {
+    getRenderItem({item, section}: Object) {
         let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"];
         let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number;
         let isDryer = section.title === i18n.t('proxiwashScreen.dryers');
@@ -361,18 +362,19 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
                         <View/>
                     </PlatformTouchable>
                     <Left style={{marginLeft: 10}}>
-                        <CustomMaterialIcon
-                            icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
-                            fontSize={30}
+                        <MaterialCommunityIcons
+                            name={isDryer ? 'tumble-dryer' : 'washing-machine'}
+                            size={30}
+                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
                         />
                         <Body>
                             <Text>
                                 {machineName + ' '}
                                 {this.isMachineWatched(item.number) ?
-                                    <CustomMaterialIcon
-                                        icon='bell-ring'
+                                    <MaterialCommunityIcons
+                                        name='bell-ring'
                                         color={ThemeManager.getCurrentThemeVariables().brandPrimary}
-                                        fontSize={20}
+                                        size={20}
                                     /> : ''}
                             </Text>
                             <Text note>
@@ -386,8 +388,10 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
                         >
                             {stateStrings[MACHINE_STATES[item.state]]}
                         </Text>
-                        <CustomMaterialIcon icon={stateIcons[MACHINE_STATES[item.state]]}
-                                            fontSize={25}
+                        <MaterialCommunityIcons
+                            name={stateIcons[MACHINE_STATES[item.state]]}
+                            size={25}
+                            color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
                         />
                     </Right>
                 </CardItem>
diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js
index 53b7d68..ce49bc2 100644
--- a/screens/SettingsScreen.js
+++ b/screens/SettingsScreen.js
@@ -18,8 +18,8 @@ import {
 import CustomHeader from "../components/CustomHeader";
 import ThemeManager from '../utils/ThemeManager';
 import i18n from "i18n-js";
-import {NavigationActions, StackActions} from "react-navigation";
-import CustomMaterialIcon from "../components/CustomMaterialIcon";
+import {NavigationActions, StackActions} from "@react-navigation/native";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
 import AsyncStorageManager from "../utils/AsyncStorageManager";
 import NotificationsManager from "../utils/NotificationsManager";
 
@@ -69,7 +69,10 @@ export default class SettingsScreen extends React.Component<Props, State> {
                 thumbnail
             >
                 <Left>
-                    <CustomMaterialIcon icon={icon}/>
+                    <MaterialCommunityIcons
+                        name={icon}
+                        size={26}
+                        color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
                 </Left>
                 <Body>
                     <Text>
@@ -201,7 +204,10 @@ export default class SettingsScreen extends React.Component<Props, State> {
                 onPress={onPressCallback}
             >
                 <Left>
-                    <CustomMaterialIcon icon={icon}/>
+                    <MaterialCommunityIcons
+                        name={icon}
+                        size={26}
+                        color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
                 </Left>
                 <Body>
                     <Text>