Improved theme handling and performance

2020-03-09 23:15:13 +01:00 · 2020-03-09 23:15:13 +01:00 · 7bac5a6ddc
commit 7bac5a6ddc
parent da24621c67
16 changed files with 183 additions and 176 deletions
--- a/components/PreviewEventDashboardItem.js
+++ b/components/PreviewEventDashboardItem.js
@ -1,11 +1,10 @@
 // @flow

 import * as React from 'react';
-import {MaterialCommunityIcons} from "@expo/vector-icons";
 import {View} from "react-native";
 import HTML from "react-native-render-html";
 import i18n from "i18n-js";
-import {Avatar, Card, Text, withTheme, Button} from 'react-native-paper';
+import {Avatar, Button, Card, withTheme} from 'react-native-paper';
 import PlanningEventManager from "../utils/PlanningEventManager";


--- a/components/ProxiwashListItem.js
+++ b/components/ProxiwashListItem.js
@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Card, Avatar, List, Text, withTheme} from 'react-native-paper';
+import {Avatar, Card, Text, withTheme} from 'react-native-paper';
 import {View} from "react-native";
 import ProxiwashConstants from "../constants/ProxiwashConstants";

--- a/components/Sidebar.js
+++ b/components/Sidebar.js
@ -21,7 +21,7 @@ type State = {
 /**
 * Class used to define a navigation drawer
 */
-export default class SideBar extends React.Component<Props, State> {
+export default class SideBar extends React.PureComponent<Props, State> {

    dataSet: Array<Object>;

@ -122,11 +122,6 @@ export default class SideBar extends React.Component<Props, State> {
        this.getRenderItem = this.getRenderItem.bind(this);
    }

-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
-        return nextState.active !== this.state.active;
-    }
-
-
    onListItemPress(item: Object) {
        if (item.link === undefined)
            this.props.navigation.navigate(item.route);
--- a/components/WebSectionList.js
+++ b/components/WebSectionList.js
@ -36,7 +36,7 @@ const MIN_REFRESH_TIME = 5  * 1000;
 * @prop fontSize {number} The icon size. Use 26 if unspecified
 * @prop width {number} The icon width. Use 30 if unspecified
 */
-export default class WebSectionList extends React.Component<Props, State> {
+export default class WebSectionList extends React.PureComponent<Props, State> {

    static defaultProps = {
        renderSectionHeader: null,
--- a/components/WebViewScreen.js
+++ b/components/WebViewScreen.js
@ -3,8 +3,7 @@
 import * as React from 'react';
 import {View} from 'react-native';
 import WebView from "react-native-webview";
-import ThemeManager from "../utils/ThemeManager";
-import {ActivityIndicator} from 'react-native-paper';
+import {ActivityIndicator, withTheme} from 'react-native-paper';
 import HeaderButton from "./HeaderButton";

 type Props = {
@ -24,28 +23,31 @@ type Props = {
 /**
 * Class defining a webview screen.
 */
-export default class WebViewScreen extends React.Component<Props> {
+class WebViewScreen extends React.PureComponent<Props> {

    static defaultProps = {
        hasBackButton: false,
        hasSideMenu: true,
        hasFooter: true,
    };
-    webviewArray: Array<WebView> = [];
+    webviewRef: Object;

    onRefreshClicked: Function;
    onWebviewRef: Function;
    onGoBackWebview: Function;
    onGoForwardWebview: Function;
-    onOpenWebLink: Function;
+    getRenderLoading: Function;

-    constructor() {
-        super();
+    colors: Object;
+
+    constructor(props) {
+        super(props);
        this.onRefreshClicked = this.onRefreshClicked.bind(this);
        this.onWebviewRef = this.onWebviewRef.bind(this);
        this.onGoBackWebview = this.onGoBackWebview.bind(this);
        this.onGoForwardWebview = this.onGoForwardWebview.bind(this);
-        this.onOpenWebLink = this.onOpenWebLink.bind(this);
+        this.getRenderLoading = this.getRenderLoading.bind(this);
+        this.colors = props.theme.colors;
    }

    componentDidMount() {
@ -73,38 +75,28 @@ export default class WebViewScreen extends React.Component<Props> {
    };

    onRefreshClicked() {
-        for (let view of this.webviewArray) {
-            if (view !== null)
-                view.reload();
-        }
+        if (this.webviewRef !== null)
+            this.webviewRef.reload();
    }

    onGoBackWebview() {
-        for (let view of this.webviewArray) {
-            if (view !== null)
-                view.goBack();
-        }
+        if (this.webviewRef !== null)
+            this.webviewRef.goBack();
    }

    onGoForwardWebview() {
-        for (let view of this.webviewArray) {
-            if (view !== null)
-                view.goForward();
-        }
+        if (this.webviewRef !== null)
+            this.webviewRef.goForward();
    }

-    onOpenWebLink() {
-        this.openWebLink(this.props.data[0]['url'])
-    }
-
-    onWebviewRef(ref: WebView) {
-        this.webviewArray.push(ref)
+    onWebviewRef(ref: Object) {
+        this.webviewRef = ref
    }

    getRenderLoading() {
        return (
            <View style={{
-                backgroundColor: ThemeManager.getCurrentThemeVariables().background,
+                backgroundColor: this.colors.background,
                position: 'absolute',
                top: 0,
                right: 0,
@ -117,34 +109,28 @@ export default class WebViewScreen extends React.Component<Props> {
                <ActivityIndicator
                    animating={true}
                    size={'large'}
-                    color={ThemeManager.getCurrentThemeVariables().primary}/>
+                    color={this.colors.primary}/>
            </View>
        );
    }

-    getWebview(obj: Object) {
-        return (
-            <WebView
-                ref={this.onWebviewRef}
-                source={{uri: obj['url']}}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                }}
-                startInLoadingState={true}
-                injectedJavaScript={obj['customJS']}
-                javaScriptEnabled={true}
-                renderLoading={this.getRenderLoading}
-            />
-        );
-    }
-
    render() {
        // console.log("rendering WebViewScreen");
-        this.webviewArray = [];
        return (
-            this.getWebview(this.props.data[0])
+            <WebView
+                ref={this.onWebviewRef}
+                source={{uri: this.props.data[0]['url']}}
+                style={{
+                    width: '100%',
+                    height: '100%',
+                }}
+                startInLoadingState={true}
+                injectedJavaScript={this.props.data[0]['customJS']}
+                javaScriptEnabled={true}
+                renderLoading={this.getRenderLoading}
+            />
        );
    }
 }

+export default withTheme(WebViewScreen);
--- a/screens/About/AboutScreen.js
+++ b/screens/About/AboutScreen.js
@ -6,8 +6,7 @@ import i18n from "i18n-js";
 import appJson from '../../app';
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
 import CustomModal from "../../components/CustomModal";
-import ThemeManager from "../../utils/ThemeManager";
-import {Avatar, Button, Card, List, Text, Title} from 'react-native-paper';
+import {Avatar, Button, Card, List, Text, Title, withTheme} from 'react-native-paper';

 const links = {
    appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
@ -59,7 +58,7 @@ function openWebLink(link) {
 /**
 * Class defining an about screen. This screen shows the user information about the app and it's author.
 */
-export default class AboutScreen extends React.Component<Props, State> {
+class AboutScreen extends React.Component<Props, State> {

    debugTapCounter = 0;
    modalRef: Object;
@ -188,11 +187,14 @@ export default class AboutScreen extends React.Component<Props, State> {
    getMainCard: Function;
    onModalRef: Function;

-    constructor(props: any) {
+    colors: object;
+
+    constructor(props) {
        super(props);
        this.getCardItem = this.getCardItem.bind(this);
        this.getMainCard = this.getMainCard.bind(this);
        this.onModalRef = this.onModalRef.bind(this);
+        this.colors = props.theme.colors;
    }

    getAppCard() {
@ -326,7 +328,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                    icon="email"
                    mode="contained"
                    dark={true}
-                    color={ThemeManager.getCurrentThemeVariables().primary}
+                    color={this.colors.primary}
                    style={{
                        marginTop: 20,
                        marginLeft: 'auto',
@ -339,7 +341,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                    icon="git"
                    mode="contained"
                    dark={true}
-                    color={ThemeManager.getCurrentThemeVariables().primary}
+                    color={this.colors.primary}
                    style={{
                        marginTop: 20,
                        marginLeft: 'auto',
@ -391,3 +393,5 @@ export default class AboutScreen extends React.Component<Props, State> {
        );
    }
 }
+
+export default withTheme(AboutScreen);
--- a/screens/About/DebugScreen.js
+++ b/screens/About/DebugScreen.js
@ -1,12 +1,11 @@
 // @flow

 import * as React from 'react';
-import ThemeManager from '../../utils/ThemeManager';
 import {Alert, Clipboard, ScrollView, View} from "react-native";
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
 import NotificationsManager from "../../utils/NotificationsManager";
 import CustomModal from "../../components/CustomModal";
-import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper';
+import {Button, Card, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';

 type Props = {
    navigation: Object,
@ -20,7 +19,7 @@ type State = {
 /**
 * Class defining the Debug screen. This screen allows the user to get detailed information on the app/device.
 */
-export default class DebugScreen extends React.Component<Props, State> {
+class DebugScreen extends React.Component<Props, State> {

    modalRef: Object;
    modalInputValue = '';
@ -31,9 +30,12 @@ export default class DebugScreen extends React.Component<Props, State> {

    onModalRef: Function;

-    constructor(props: any) {
+    colors: Object;
+
+    constructor(props) {
        super(props);
        this.onModalRef = this.onModalRef.bind(this);
+        this.colors = props.theme.colors;
    }

    static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
@ -103,14 +105,14 @@ export default class DebugScreen extends React.Component<Props, State> {
                    <Button
                        mode="contained"
                        dark={true}
-                        color={ThemeManager.getCurrentThemeVariables().success}
+                        color={this.colors.success}
                        onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.modalInputValue)}>
                        Save new value
                    </Button>
                    <Button
                        mode="contained"
                        dark={true}
-                        color={ThemeManager.getCurrentThemeVariables().danger}
+                        color={this.colors.danger}
                        onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.state.modalCurrentDisplayItem.default)}>
                        Reset to default
                    </Button>
@ -166,3 +168,5 @@ export default class DebugScreen extends React.Component<Props, State> {
        );
    }
 }
+
+export default withTheme(DebugScreen);
--- a/screens/HomeScreen.js
+++ b/screens/HomeScreen.js
@ -3,11 +3,10 @@
 import * as React from 'react';
 import {View} from 'react-native';
 import i18n from "i18n-js";
-import ThemeManager from "../utils/ThemeManager";
 import DashboardItem from "../components/EventDashboardItem";
 import * as WebBrowser from 'expo-web-browser';
 import WebSectionList from "../components/WebSectionList";
-import {Text} from 'react-native-paper';
+import {Text, withTheme} from 'react-native-paper';
 import FeedItem from "../components/FeedItem";
 import SquareDashboardItem from "../components/SquareDashboardItem";
 import PreviewEventDashboardItem from "../components/PreviewEventDashboardItem";
@ -26,12 +25,13 @@ const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds

 type Props = {
    navigation: Object,
+    theme: Object,
 }

 /**
 * Class defining the app's home screen
 */
-export default class HomeScreen extends React.Component<Props> {
+class HomeScreen extends React.Component<Props> {

    onProxiwashClick: Function;
    onTutorInsaClick: Function;
@ -40,14 +40,17 @@ export default class HomeScreen extends React.Component<Props> {
    getRenderItem: Function;
    createDataset: Function;

-    constructor() {
-        super();
+    colors : Object;
+
+    constructor(props) {
+        super(props);
        this.onProxiwashClick = this.onProxiwashClick.bind(this);
        this.onTutorInsaClick = this.onTutorInsaClick.bind(this);
        this.onMenuClick = this.onMenuClick.bind(this);
        this.onProximoClick = this.onProximoClick.bind(this);
        this.getRenderItem = this.getRenderItem.bind(this);
        this.createDataset = this.createDataset.bind(this);
+        this.colors = props.theme.colors;
    }

    /**
@ -338,35 +341,35 @@ export default class HomeScreen extends React.Component<Props> {
                margin: 10,
            }}>
                <SquareDashboardItem
-                    color={ThemeManager.getCurrentThemeVariables().proxiwashColor}
+                    color={this.colors.proxiwashColor}
                    icon={'washing-machine'}
                    clickAction={this.onProxiwashClick}
                    isAvailable={parseInt(proxiwashData['washers']) > 0}
                    badgeNumber={proxiwashData['washers']}
                />
                <SquareDashboardItem
-                    color={ThemeManager.getCurrentThemeVariables().proxiwashColor}
+                    color={this.colors.proxiwashColor}
                    icon={'tumble-dryer'}
                    clickAction={this.onProxiwashClick}
                    isAvailable={parseInt(proxiwashData['dryers']) > 0}
                    badgeNumber={proxiwashData['dryers']}
                />
                <SquareDashboardItem
-                    color={ThemeManager.getCurrentThemeVariables().tutorinsaColor}
+                    color={this.colors.tutorinsaColor}
                    icon={'school'}
                    clickAction={this.onTutorInsaClick}
                    isAvailable={tutorinsaData > 0}
                    badgeNumber={tutorinsaData}
                />
                <SquareDashboardItem
-                    color={ThemeManager.getCurrentThemeVariables().proximoColor}
+                    color={this.colors.proximoColor}
                    icon={'shopping'}
                    clickAction={this.onProximoClick}
                    isAvailable={parseInt(proximoData) > 0}
                    badgeNumber={parseInt(proximoData)}
                />
                <SquareDashboardItem
-                    color={ThemeManager.getCurrentThemeVariables().menuColor}
+                    color={this.colors.menuColor}
                    icon={'silverware-fork-knife'}
                    clickAction={this.onMenuClick}
                    isAvailable={menuData.length > 0}
@ -413,3 +416,5 @@ export default class HomeScreen extends React.Component<Props> {
        );
    }
 }
+
+export default withTheme(HomeScreen);
--- a/screens/Planning/PlanningDisplayScreen.js
+++ b/screens/Planning/PlanningDisplayScreen.js
@ -6,7 +6,7 @@ import ThemeManager from "../../utils/ThemeManager";
 import HTML from "react-native-render-html";
 import {Linking} from "expo";
 import PlanningEventManager from '../../utils/PlanningEventManager';
-import {Card} from 'react-native-paper';
+import {Card, withTheme} from 'react-native-paper';

 type Props = {
    navigation: Object,
@ -20,10 +20,17 @@ function openWebLink(event, link) {
 /**
 * Class defining an about screen. This screen shows the user information about the app and it's author.
 */
-export default class PlanningDisplayScreen extends React.Component<Props> {
+class PlanningDisplayScreen extends React.Component<Props> {

    displayData = this.props.route.params['data'];

+    colors: Object;
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
    render() {
        // console.log("rendering planningDisplayScreen");
        return (
@ -44,8 +51,8 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
                    <Card.Content>
                        <HTML html={"<div>" + this.displayData.description + "</div>"}
                              tagsStyles={{
-                                  p: {color: ThemeManager.getCurrentThemeVariables().text,},
-                                  div: {color: ThemeManager.getCurrentThemeVariables().text}
+                                  p: {color: this.colors.text,},
+                                  div: {color: this.colors.text}
                              }}
                              onLinkPress={openWebLink}/>
                    </Card.Content>
@ -54,3 +61,5 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
        );
    }
 }
+
+export default withTheme(PlanningDisplayScreen);
--- a/screens/Proximo/ProximoAboutScreen.js
+++ b/screens/Proximo/ProximoAboutScreen.js
@ -3,7 +3,7 @@
 import * as React from 'react';
 import {Image, ScrollView, View} from 'react-native';
 import i18n from "i18n-js";
-import {Text, Card, List, Paragraph} from 'react-native-paper';
+import {Card, List, Paragraph, Text} from 'react-native-paper';

 type Props = {
    navigation: Object,
--- a/screens/Proximo/ProximoListScreen.js
+++ b/screens/Proximo/ProximoListScreen.js
@ -3,9 +3,8 @@
 import * as React from 'react';
 import {FlatList, Image, ScrollView, View} from "react-native";
 import i18n from "i18n-js";
-import ThemeManager from "../../utils/ThemeManager";
 import CustomModal from "../../components/CustomModal";
-import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title} from "react-native-paper";
+import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";

 function sortPrice(a, b) {
    return a.price - b.price;
@ -45,7 +44,7 @@ type State = {
 /**
 * Class defining proximo's article list of a certain category.
 */
-export default class ProximoListScreen extends React.Component<Props, State> {
+class ProximoListScreen extends React.Component<Props, State> {

    modalRef: Object;
    originalData: Array<Object>;
@ -56,7 +55,9 @@ export default class ProximoListScreen extends React.Component<Props, State> {
    renderItem: Function;
    onModalRef: Function;

-    constructor(props: any) {
+    colors: Object;
+
+    constructor(props) {
        super(props);
        this.originalData = this.props.route.params['data']['data'];
        this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar'];
@ -70,6 +71,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
        this.onSortMenuPress = this.onSortMenuPress.bind(this);
        this.renderItem = this.renderItem.bind(this);
        this.onModalRef = this.onModalRef.bind(this);
+        this.colors = props.theme.colors;
    }


@ -133,11 +135,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
    getStockColor(availableStock: number) {
        let color: string;
        if (availableStock > 3)
-            color = ThemeManager.getCurrentThemeVariables().success;
+            color = this.colors.success;
        else if (availableStock > 0)
-            color = ThemeManager.getCurrentThemeVariables().warning;
+            color = this.colors.warning;
        else
-            color = ThemeManager.getCurrentThemeVariables().danger;
+            color = this.colors.danger;
        return color;
    }

@ -270,7 +272,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
        return (
            <IconButton
                icon="sort"
-                color={ThemeManager.getCurrentThemeVariables().text}
+                color={this.colors.text}
                size={26}
                onPress={this.onSortMenuPress}
            />
@ -322,3 +324,5 @@ export default class ProximoListScreen extends React.Component<Props, State> {
        );
    }
 }
+
+export default withTheme(ProximoListScreen);
--- a/screens/Proximo/ProximoMainScreen.js
+++ b/screens/Proximo/ProximoMainScreen.js
@ -3,9 +3,8 @@
 import * as React from 'react';
 import {View} from 'react-native'
 import i18n from "i18n-js";
-import ThemeManager from "../../utils/ThemeManager";
 import WebSectionList from "../../components/WebSectionList";
-import {IconButton, List} from 'react-native-paper';
+import {List, withTheme} from 'react-native-paper';
 import HeaderButton from "../../components/HeaderButton";

 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
@ -22,7 +21,7 @@ type State = {
 * Class defining the main proximo screen. This screen shows the different categories of articles
 * offered by proximo.
 */
-export default class ProximoMainScreen extends React.Component<Props, State> {
+class ProximoMainScreen extends React.Component<Props, State> {

    articles: Object;

@ -31,12 +30,15 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
    getRenderItem: Function;
    createDataset: Function;

-    constructor() {
-        super();
+    colors: Object;
+
+    constructor(props) {
+        super(props);
        this.onPressSearchBtn = this.onPressSearchBtn.bind(this);
        this.onPressAboutBtn = this.onPressAboutBtn.bind(this);
        this.getRenderItem = this.getRenderItem.bind(this);
        this.createDataset = this.createDataset.bind(this);
+        this.colors = props.theme.colors;
    }

    static sortFinalData(a: Object, b: Object) {
@ -180,7 +182,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
                    left={props => <List.Icon
                        {...props}
                        icon={item.type.icon}
-                        color={ThemeManager.getCurrentThemeVariables().primary}/>}
+                        color={this.colors.primary}/>}
                    right={props => <List.Icon {...props} icon={'chevron-right'}/>}
                />
            );
@ -202,3 +204,4 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
    }
 }

+export default withTheme(ProximoMainScreen);
--- a/screens/Proxiwash/ProxiwashAboutScreen.js
+++ b/screens/Proxiwash/ProxiwashAboutScreen.js
@ -1,7 +1,7 @@
 // @flow

 import * as React from 'react';
-import {Image, View, ScrollView} from 'react-native';
+import {Image, ScrollView, View} from 'react-native';
 import i18n from "i18n-js";
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';

--- a/screens/Proxiwash/ProxiwashScreen.js
+++ b/screens/Proxiwash/ProxiwashScreen.js
@ -7,12 +7,11 @@ import WebSectionList from "../../components/WebSectionList";
 import NotificationsManager from "../../utils/NotificationsManager";
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
 import * as Expo from "expo";
-import {Avatar, Banner, Button, Card, Text} from 'react-native-paper';
+import {Avatar, Banner, Button, Card, Text, withTheme} from 'react-native-paper';
 import HeaderButton from "../../components/HeaderButton";
 import ProxiwashListItem from "../../components/ProxiwashListItem";
 import ProxiwashConstants from "../../constants/ProxiwashConstants";
 import CustomModal from "../../components/CustomModal";
-import ThemeManager from "../../utils/ThemeManager";

 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";

@ -24,6 +23,7 @@ const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds

 type Props = {
    navigation: Object,
+    theme: Object,
 }

 type State = {
@ -39,7 +39,7 @@ type State = {
 * Class defining the app's proxiwash screen. This screen shows information about washing machines and
 * dryers, taken from a scrapper reading proxiwash website
 */
-export default class ProxiwashScreen extends React.Component<Props, State> {
+class ProxiwashScreen extends React.Component<Props, State> {

    modalRef: Object;

@ -51,6 +51,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
    onModalRef: Function;

    fetchedData: Object;
+    colors: Object;

    state = {
        refreshing: false,
@ -65,8 +66,8 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
    /**
     * Creates machine state parameters using current theme and translations
     */
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
        stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished');
        stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
        stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running');
@ -92,6 +93,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
        this.createDataset = this.createDataset.bind(this);
        this.onHideBanner = this.onHideBanner.bind(this);
        this.onModalRef = this.onModalRef.bind(this);
+        this.colors = props.theme.colors;
    }

    onHideBanner() {
@ -301,7 +303,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
                    title={title}
                    left={() => <Avatar.Icon
                        icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
-                        color={ThemeManager.getCurrentThemeVariables().text}
+                        color={this.colors.text}
                        style={{backgroundColor: 'transparent'}}/>}

                />
@ -338,41 +340,6 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
        this.modalRef = ref;
    }

-    render() {
-        const nav = this.props.navigation;
-        return (
-            <View>
-                <Banner
-                    visible={this.state.bannerVisible}
-                    actions={[
-                        {
-                            label: 'OK',
-                            onPress: this.onHideBanner,
-                        },
-                    ]}
-                    icon={() => <Avatar.Icon
-                        icon={'information'}
-                        size={40}
-                    />}
-                >
-                    {i18n.t('proxiwashScreen.enableNotificationsTip')}
-                </Banner>
-                <CustomModal onRef={this.onModalRef}>
-                    {this.state.modalCurrentDisplayItem}
-                </CustomModal>
-                <WebSectionList
-                    createDataset={this.createDataset}
-                    navigation={nav}
-                    fetchUrl={DATA_URL}
-                    renderItem={this.getRenderItem}
-                    renderSectionHeader={this.getRenderSectionHeader}
-                    autoRefreshTime={REFRESH_TIME}
-                    refreshOnFocus={true}/>
-            </View>
-
-        );
-    }
-
    getMachineAvailableNumber(isDryer: boolean) {
        let data;
        if (isDryer)
@ -403,7 +370,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
                    subtitle={subtitle}
                    left={() => <Avatar.Icon
                        icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
-                        color={ThemeManager.getCurrentThemeVariables().primary}
+                        color={this.colors.primary}
                        style={{backgroundColor: 'transparent'}}
                    />}
                />
@ -440,4 +407,41 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
            />
        );
    }
+
+    render() {
+        const nav = this.props.navigation;
+        return (
+            <View>
+                <Banner
+                    visible={this.state.bannerVisible}
+                    actions={[
+                        {
+                            label: 'OK',
+                            onPress: this.onHideBanner,
+                        },
+                    ]}
+                    icon={() => <Avatar.Icon
+                        icon={'information'}
+                        size={40}
+                    />}
+                >
+                    {i18n.t('proxiwashScreen.enableNotificationsTip')}
+                </Banner>
+                <CustomModal onRef={this.onModalRef}>
+                    {this.state.modalCurrentDisplayItem}
+                </CustomModal>
+                <WebSectionList
+                    createDataset={this.createDataset}
+                    navigation={nav}
+                    fetchUrl={DATA_URL}
+                    renderItem={this.getRenderItem}
+                    renderSectionHeader={this.getRenderSectionHeader}
+                    autoRefreshTime={REFRESH_TIME}
+                    refreshOnFocus={true}/>
+            </View>
+
+        );
    }
+}
+
+export default withTheme(ProxiwashScreen);
--- a/screens/SelfMenuScreen.js
+++ b/screens/SelfMenuScreen.js
@ -2,10 +2,9 @@

 import * as React from 'react';
 import {View} from 'react-native';
-import ThemeManager from "../utils/ThemeManager";
 import i18n from "i18n-js";
 import WebSectionList from "../components/WebSectionList";
-import {Card, Text} from 'react-native-paper';
+import {Card, Text, withTheme} from 'react-native-paper';
 import AprilFoolsManager from "../utils/AprilFoolsManager";

 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
@ -18,7 +17,7 @@ type Props = {
 * Class defining the app's menu screen.
 * This screen fetches data from etud to render the RU menu
 */
-export default class SelfMenuScreen extends React.Component<Props> {
+class SelfMenuScreen extends React.Component<Props> {

    // Hard code strings as toLocaleDateString does not work on current android JS engine
    daysOfWeek = [];
@ -27,9 +26,10 @@ export default class SelfMenuScreen extends React.Component<Props> {
    getRenderItem: Function;
    getRenderSectionHeader: Function;
    createDataset: Function;
+    colors: Object;

-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
        this.daysOfWeek.push(i18n.t("date.daysOfWeek.monday"));
        this.daysOfWeek.push(i18n.t("date.daysOfWeek.tuesday"));
        this.daysOfWeek.push(i18n.t("date.daysOfWeek.wednesday"));
@ -54,6 +54,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
        this.getRenderItem = this.getRenderItem.bind(this);
        this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this);
        this.createDataset = this.createDataset.bind(this);
+        this.colors = props.theme.colors;
    }

    getKeyExtractor(item: Object) {
@ -138,7 +139,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
                    marginLeft: 'auto',
                    marginRight: 'auto',
                    borderBottomWidth: 1,
-                    borderBottomColor: ThemeManager.getCurrentThemeVariables().primary,
+                    borderBottomColor: this.colors.primary,
                    marginTop: 5,
                    marginBottom: 5,
                }}/>
@ -178,3 +179,4 @@ export default class SelfMenuScreen extends React.Component<Props> {
    }
 }

+export default withTheme(SelfMenuScreen);
--- a/utils/ThemeManager.js
+++ b/utils/ThemeManager.js
@ -132,14 +132,6 @@ export default class ThemeManager {
            return ThemeManager.getWhiteTheme();
    }

-    /**
-     * Get the variables contained in the current theme
-     * @returns {Object}
-     */
-    static getCurrentThemeVariables(): Object {
-        return ThemeManager.getCurrentTheme().colors;
-    }
-
    /**
     * Set the function to be called when the theme is changed (allows for general reload of the app)
     * @param callback Function to call after theme change