From 01f8a7c55865f4053b27deff0912f43cc537e0f1 Mon Sep 17 00:00:00 2001
From: Yohan Simard <ysimard@etud.insa-toulouse.fr>
Date: Tue, 11 Feb 2020 01:05:24 +0100
Subject: [PATCH 1/5] Tried to improve performance...

---
 App.js                               |  9 ++-
 components/BaseContainer.js          | 18 +++---
 components/CustomHeader.js           | 32 +++++++---
 components/CustomMaterialIcon.js     |  9 +++
 components/DashboardItem.js          |  8 ++-
 components/FetchedDataSectionList.js | 75 +++++++++++++----------
 components/Sidebar.js                | 33 +++++++---
 components/WebViewScreen.js          |  1 +
 screens/HomeScreen.js                | 55 +++++++++++------
 screens/PlanningDisplayScreen.js     |  6 +-
 screens/PlanningScreen.js            | 57 +++++++++++------
 screens/Proximo/ProximoListScreen.js | 92 ++++++++++++++++++----------
 screens/Proximo/ProximoMainScreen.js | 16 +++--
 screens/Proxiwash/ProxiwashScreen.js | 11 +++-
 screens/SelfMenuScreen.js            |  2 +-
 15 files changed, 284 insertions(+), 140 deletions(-)

diff --git a/App.js b/App.js
index 5de5714..ac44a28 100644
--- a/App.js
+++ b/App.js
@@ -34,6 +34,9 @@ export default class App extends React.Component<Props, State> {
     constructor(props: Object) {
         super(props);
         LocaleManager.initTranslations();
+        this.onIntroDone = this.onIntroDone.bind(this);
+        this.loadAssetsAsync = this.loadAssetsAsync.bind(this);
+        this.onLoadFinished = this.onLoadFinished.bind(this);
     }
 
     /**
@@ -102,14 +105,14 @@ export default class App extends React.Component<Props, State> {
         if (this.state.isLoading) {
             return (
                 <AppLoading
-                    startAsync={() => this.loadAssetsAsync()}
-                    onFinish={() => this.onLoadFinished()}
+                    startAsync={this.loadAssetsAsync}
+                    onFinish={this.onLoadFinished}
                     onError={console.warn}
                 />
             );
         }
         if (this.state.showIntro || this.state.showUpdate) {
-            return <CustomIntroSlider onDone={() => this.onIntroDone()}
+            return <CustomIntroSlider onDone={this.onIntroDone}
                                       isUpdate={this.state.showUpdate && !this.state.showIntro}/>;
         } else {
             const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current);
diff --git a/components/BaseContainer.js b/components/BaseContainer.js
index 1e4fa85..4da6b7e 100644
--- a/components/BaseContainer.js
+++ b/components/BaseContainer.js
@@ -30,7 +30,6 @@ type State = {
 
 
 export default class BaseContainer extends React.Component<Props, State> {
-
     static defaultProps = {
         headerRightButton: <View/>,
         hasTabs: false,
@@ -46,9 +45,15 @@ export default class BaseContainer extends React.Component<Props, State> {
         isHeaderVisible: true,
     };
 
+    constructor() {
+        super();
+        this.toggle = this.toggle.bind(this);
+    }
+
     toggle() {
         this.props.navigation.toggleDrawer();
     }
+
     /**
      * Register for blur event to close side menu on screen change
      */
@@ -93,7 +98,9 @@ export default class BaseContainer extends React.Component<Props, State> {
             this.willFocusSubscription.remove();
     }
 
-    getMainContainer() {
+
+    render() {
+        // console.log("rendering BaseContainer");
         return (
             <Container>
                 {this.state.isHeaderVisible ?
@@ -104,7 +111,7 @@ export default class BaseContainer extends React.Component<Props, State> {
                         leftButton={
                             <Touchable
                                 style={{padding: 6}}
-                                onPress={() => this.toggle()}>
+                                onPress={this.toggle}>
                                 <CustomMaterialIcon
                                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
                                     icon="menu"/>
@@ -118,9 +125,4 @@ export default class BaseContainer extends React.Component<Props, State> {
             </Container>
         );
     }
-
-
-    render() {
-        return (this.getMainContainer());
-    }
 }
diff --git a/components/CustomHeader.js b/components/CustomHeader.js
index 0290c89..fd5c74f 100644
--- a/components/CustomHeader.js
+++ b/components/CustomHeader.js
@@ -32,7 +32,6 @@ type Props = {
  * @prop navigation {Object} The navigation object from react navigation
  */
 export default class CustomHeader extends React.Component<Props> {
-
     static defaultProps = {
         hasBackButton: false,
         hasSearchField: false,
@@ -45,9 +44,25 @@ export default class CustomHeader extends React.Component<Props> {
         hasTabs: false,
     };
 
+    constructor() {
+        super();
+        this.onPressBack = this.onPressBack.bind(this);
+    }
+
+    shouldComponentUpdate(nextProps: Props): boolean {
+        return nextProps.title !== this.props.title ||
+            nextProps.subtitle !== this.props.subtitle ||
+            nextProps.hasBackButton !== this.props.hasBackButton ||
+            nextProps.hasSearchField !== this.props.hasSearchField ||
+            nextProps.shouldFocusSearchBar !== this.props.shouldFocusSearchBar ||
+            nextProps.hasTabs !== this.props.hasTabs ||
+            nextProps.rightButton !== this.props.rightButton ||
+            nextProps.leftButton !== this.props.leftButton;
+    }
+
     componentDidMount() {
         if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
-            // does not work if called to early for some reason...
+            // does not work if called too early for some reason...
             setTimeout(() => this.refs.searchInput._root.focus(), 500);
         }
     }
@@ -67,7 +82,7 @@ export default class CustomHeader extends React.Component<Props> {
                         ref="searchInput"
                         placeholder={i18n.t('proximoScreen.search')}
                         placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
-                        onChangeText={(text) => this.props.searchCallback(text)}/>
+                        onChangeText={this.props.searchCallback}/>
                 </Item>
             </Body>
         );
@@ -87,17 +102,20 @@ export default class CustomHeader extends React.Component<Props> {
     }
 
 
+    onPressBack() {
+        const backAction = NavigationActions.back();
+        this.props.navigation.dispatch(backAction);
+    }
+
     render() {
+        console.log("rendering CustomHeader");
         let button;
         // Does the app have a back button or a burger menu ?
         if (this.props.hasBackButton)
             button =
                 <Touchable
                     style={{padding: 6}}
-                    onPress={() => {
-                        const backAction = NavigationActions.back();
-                        this.props.navigation.dispatch(backAction);
-                    }}>
+                    onPress={this.onPressBack}>
                     <CustomMaterialIcon
                         color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
                         icon={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"}/>
diff --git a/components/CustomMaterialIcon.js b/components/CustomMaterialIcon.js
index e6919f2..4792b81 100644
--- a/components/CustomMaterialIcon.js
+++ b/components/CustomMaterialIcon.js
@@ -30,7 +30,16 @@ export default class CustomMaterialIcon extends React.Component<Props> {
         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
diff --git a/components/DashboardItem.js b/components/DashboardItem.js
index 716fb33..7695cae 100644
--- a/components/DashboardItem.js
+++ b/components/DashboardItem.js
@@ -25,13 +25,18 @@ type Props = {
 }
 
 export default class DashboardItem extends React.Component<Props> {
-
     static defaultProps = {
         isSquare: false,
         isSquareLeft: true,
         displayEvent: undefined,
     };
 
+    shouldComponentUpdate(nextProps: Props): boolean {
+        return nextProps.isAvailable !== this.props.isAvailable ||
+            nextProps.subtitle !== this.props.subtitle;
+    }
+
+
     /**
      * Convert the date string given by in the event list json to a date object
      * @param dateString
@@ -203,6 +208,7 @@ export default class DashboardItem extends React.Component<Props> {
 
 
     render() {
+        // console.log("rendering DashboardItem " + this.props.title);
         let marginRight = 10;
         if (this.props.isSquare) {
             if (this.props.isSquareLeft)
diff --git a/components/FetchedDataSectionList.js b/components/FetchedDataSectionList.js
index 65f6e7a..781f504 100644
--- a/components/FetchedDataSectionList.js
+++ b/components/FetchedDataSectionList.js
@@ -25,7 +25,6 @@ type State = {
  * Used by inheriting from it and redefining getters.
  */
 export default class FetchedDataSectionList extends React.Component<Props, State> {
-
     webDataManager: WebDataManager;
 
     willFocusSubscription: function;
@@ -46,8 +45,22 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         super();
         this.webDataManager = new WebDataManager(fetchUrl);
         this.refreshTime = refreshTime;
+        // creating references to functions used in render()
+        this._onRefresh = this._onRefresh.bind(this);
+        this.renderSectionHeaderEmpty = this.renderSectionHeader.bind(this, true);
+        this.renderSectionHeaderNotEmpty = this.renderSectionHeader.bind(this, false);
+        this.renderItemEmpty = this.renderItem.bind(this, true);
+        this.renderItemNotEmpty = this.renderItem.bind(this, false);
     }
 
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
+        return this.state.refreshing !== nextState.refreshing ||
+            nextState.firstLoading !== this.state.firstLoading ||
+            nextState.machinesWatched.length !== this.state.machinesWatched.length ||
+            nextState.fetchedData.len !== this.state.fetchedData.len;
+    }
+
+
     /**
      * Get the translation for the header in the current language
      * @return {string}
@@ -74,17 +87,9 @@ export default class FetchedDataSectionList extends React.Component<Props, State
      */
     componentDidMount() {
         this.willFocusSubscription = this.props.navigation.addListener(
-            'willFocus',
-            () => {
-                this.onScreenFocus();
-            }
-        );
+            'willFocus', this.onScreenFocus.bind(this));
         this.willBlurSubscription = this.props.navigation.addListener(
-            'willBlur',
-            () => {
-                this.onScreenBlur();
-            }
-        );
+            'willBlur', this.onScreenBlur.bind(this));
     }
 
     /**
@@ -93,7 +98,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
     onScreenFocus() {
         this._onRefresh();
         if (this.refreshTime > 0)
-            this.refreshInterval = setInterval(() => this._onRefresh(), this.refreshTime)
+            this.refreshInterval = setInterval(this._onRefresh.bind(this), this.refreshTime)
     }
 
     /**
@@ -117,7 +122,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
      * Refresh data and show a toast if any error occurred
      * @private
      */
-    _onRefresh = () => {
+    _onRefresh() {
         let canRefresh;
         if (this.lastRefresh !== undefined)
             canRefresh = (new Date().getTime() - this.lastRefresh.getTime()) / 1000 > this.minTimeBetweenRefresh;
@@ -144,8 +149,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
                     this.webDataManager.showUpdateToast(this.getUpdateToastTranslations()[0], this.getUpdateToastTranslations()[1]);
                 });
         }
-
-    };
+    }
 
     /**
      * Get the render item to be used for display in the list.
@@ -153,10 +157,9 @@ export default class FetchedDataSectionList extends React.Component<Props, State
      *
      * @param item
      * @param section
-     * @param data
      * @return {*}
      */
-    getRenderItem(item: Object, section: Object, data: Object) {
+    getRenderItem(item: Object, section: Object) {
         return <View/>;
     }
 
@@ -222,6 +225,11 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         return [];
     }
 
+
+    datasetKeyExtractor(item: Object) {
+        return item.text
+    }
+
     /**
      * Create the dataset when no fetched data is available.
      * No need to be overridden, has good defaults.
@@ -243,7 +251,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
                             'access-point-network-off'
                     }
                 ],
-                keyExtractor: (item: Object) => item.text,
+                keyExtractor: this.datasetKeyExtractor,
             }
         ];
     }
@@ -275,6 +283,19 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         return true;
     }
 
+
+    renderSectionHeader(isEmpty, {section: {title}}) {
+        return isEmpty ?
+            <View/> :
+            this.getRenderSectionHeader(title)
+    }
+
+    renderItem(isEmpty, {item, section}) {
+        return isEmpty ?
+            this.getEmptyRenderItem(item.text, item.isSpinner, item.icon) :
+            this.getRenderItem(item, section)
+    }
+
     /**
      * Get the section list render using the generated dataset
      *
@@ -295,16 +316,8 @@ export default class FetchedDataSectionList extends React.Component<Props, State
                         onRefresh={this._onRefresh}
                     />
                 }
-                renderSectionHeader={({section: {title}}) =>
-                    isEmpty ?
-                        <View/> :
-                        this.getRenderSectionHeader(title)
-                }
-                renderItem={({item, section}) =>
-                    isEmpty ?
-                        this.getEmptyRenderItem(item.text, item.isSpinner, item.icon) :
-                        this.getRenderItem(item, section, dataset)
-                }
+                renderSectionHeader={isEmpty ? this.renderSectionHeaderEmpty : this.renderSectionHeaderNotEmpty}
+                renderItem={isEmpty ? this.renderItemEmpty : this.renderItemNotEmpty}
                 style={{minHeight: 300, width: '100%'}}
                 contentContainerStyle={
                     isEmpty ?
@@ -351,11 +364,12 @@ export default class FetchedDataSectionList extends React.Component<Props, State
     }
 
     render() {
-        const nav = this.props.navigation;
+        // console.log("rendering FetchedDataSectionList");
         const dataset = this.createDataset(this.state.fetchedData);
         return (
             <BaseContainer
-                navigation={nav} headerTitle={this.getHeaderTranslation()}
+                navigation={this.props.navigation}
+                headerTitle={this.getHeaderTranslation()}
                 headerRightButton={this.getRightButton()}
                 hasTabs={this.hasTabs()}
                 hasBackButton={this.hasBackButton()}
@@ -375,5 +389,4 @@ export default class FetchedDataSectionList extends React.Component<Props, State
             </BaseContainer>
         );
     }
-
 }
diff --git a/components/Sidebar.js b/components/Sidebar.js
index 2edcc0c..61cd73f 100644
--- a/components/Sidebar.js
+++ b/components/Sidebar.js
@@ -103,21 +103,35 @@ export default class SideBar extends React.Component<Props, State> {
                 icon: "information",
             },
         ];
+        this.getRenderItem = this.getRenderItem.bind(this);
     }
 
-    getRenderItem(item: Object) {
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
+        return nextState.active !== this.state.active;
+    }
+
+
+    onListItemPress(item) {
+        if (item.link !== undefined)
+            Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
+        else
+            this.navigateToScreen(item.route);
+    }
+
+
+    listKeyExtractor(item) {
+        return item.route;
+    }
+
+
+    getRenderItem({item}: Object) {
         if (item.icon !== undefined) {
             return (
                 <ListItem
                     button
                     noBorder
                     selected={this.state.active === item.route}
-                    onPress={() => {
-                        if (item.link !== undefined)
-                            Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
-                        else
-                            this.navigateToScreen(item.route);
-                    }}
+                    onPress={this.onListItemPress.bind(this, item)}
                 >
                     <Left>
                         <CustomMaterialIcon
@@ -164,6 +178,7 @@ export default class SideBar extends React.Component<Props, State> {
     };
 
     render() {
+        // console.log("rendering SideBar");
         return (
             <Container style={{
                 backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
@@ -172,8 +187,8 @@ export default class SideBar extends React.Component<Props, State> {
                 <FlatList
                     data={this.dataSet}
                     extraData={this.state}
-                    keyExtractor={(item) => item.route}
-                    renderItem={({item}) => this.getRenderItem(item)}
+                    keyExtractor={this.listKeyExtractor}
+                    renderItem={this.getRenderItem}
                 />
             </Container>
         );
diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js
index 480c425..b908e69 100644
--- a/components/WebViewScreen.js
+++ b/components/WebViewScreen.js
@@ -133,6 +133,7 @@ export default class WebViewScreen extends React.Component<Props> {
     }
 
     render() {
+        // console.log("rendering WebViewScreen");
         const nav = this.props.navigation;
         this.webviewArray = [];
         return (
diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
index 6a2ef12..dcad00c 100644
--- a/screens/HomeScreen.js
+++ b/screens/HomeScreen.js
@@ -40,6 +40,10 @@ export default class HomeScreen extends FetchedDataSectionList {
 
     constructor() {
         super(DATA_URL, REFRESH_TIME);
+        this.proxiwashClickAction = this.proxiwashClickAction.bind(this);
+        this.tutorinsaClickAction = this.tutorinsaClickAction.bind(this);
+        this.menuClickAction = this.menuClickAction.bind(this);
+        this.proximoClickAction = this.proximoClickAction.bind(this);
     }
 
     /**
@@ -289,6 +293,14 @@ export default class HomeScreen extends FetchedDataSectionList {
     }
 
 
+    clickAction(isAvailable, displayEvent) {
+        if (isAvailable)
+            this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent});
+        else
+            this.props.navigation.navigate('PlanningScreen');
+    };
+
+
     getDashboardEventItem(content: Array<Object>) {
         let icon = 'calendar-range';
         let color = ThemeManager.getCurrentThemeVariables().planningColor;
@@ -310,12 +322,6 @@ export default class HomeScreen extends FetchedDataSectionList {
                 </Text>;
         } else
             subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA');
-        let clickAction = () => {
-            if (isAvailable)
-                this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent});
-            else
-                this.props.navigation.navigate('PlanningScreen');
-        };
 
         let displayEvent = this.getDisplayEvent(futureEvents);
 
@@ -324,7 +330,7 @@ export default class HomeScreen extends FetchedDataSectionList {
                 subtitle={subtitle}
                 color={color}
                 icon={icon}
-                clickAction={() => clickAction()}
+                clickAction={this.clickAction.bind(this, isAvailable, displayEvent)}
                 title={title}
                 isAvailable={isAvailable}
                 displayEvent={displayEvent}
@@ -332,6 +338,14 @@ export default class HomeScreen extends FetchedDataSectionList {
         );
     }
 
+    proximoClickAction() {
+        this.props.navigation.navigate('Proximo');
+    }
+
+    menuClickAction() {
+        this.props.navigation.navigate('SelfMenuScreen');
+    }
+
 
     getDashboardBottomItem(content: Array<Object>) {
         let proximoData = content[0]['data'];
@@ -355,7 +369,6 @@ export default class HomeScreen extends FetchedDataSectionList {
                 </Text>;
         } else
             proximoSubtitle = i18n.t('homeScreen.dashboard.proximoSubtitleNA');
-        let proximoClickAction = () => this.props.navigation.navigate('Proximo');
 
 
         let menuIcon = 'silverware-fork-knife';
@@ -367,7 +380,6 @@ export default class HomeScreen extends FetchedDataSectionList {
             menuSubtitle = i18n.t('homeScreen.dashboard.menuSubtitle');
         } else
             menuSubtitle = i18n.t('homeScreen.dashboard.menuSubtitleNA');
-        let menuClickAction = () => this.props.navigation.navigate('SelfMenuScreen');
         return (
             <View style={{
                 flexDirection: 'row',
@@ -379,7 +391,7 @@ export default class HomeScreen extends FetchedDataSectionList {
                     subtitle={menuSubtitle}
                     color={menuColor}
                     icon={menuIcon}
-                    clickAction={() => menuClickAction()}
+                    clickAction={this.menuClickAction}
                     title={menuTitle}
                     isAvailable={isMenuAvailable}
                     isSquareLeft={true}/>
@@ -388,13 +400,22 @@ export default class HomeScreen extends FetchedDataSectionList {
                     subtitle={proximoSubtitle}
                     color={proximoColor}
                     icon={proximoIcon}
-                    clickAction={() => proximoClickAction()}
+                    clickAction={this.proximoClickAction}
                     title={proximoTitle}
                     isAvailable={isProximoAvailable}/>
             </View>
         );
     }
 
+    proxiwashClickAction() {
+        this.props.navigation.navigate('Proxiwash');
+    }
+
+    tutorinsaClickAction() {
+        this.props.navigation.navigate('TutorInsaScreen');
+    }
+
+
     getDashboardMiddleItem(content: Array<Object>) {
         let proxiwashData = content[0]['data'];
         let tutorinsaData = content[1]['data'];
@@ -449,7 +470,6 @@ export default class HomeScreen extends FetchedDataSectionList {
                 </Text>;
         } else
             proxiwashSubtitle = i18n.t('homeScreen.dashboard.proxiwashSubtitleNA');
-        let proxiwashClickAction = () => this.props.navigation.navigate('Proxiwash');
 
         let tutorinsaIcon = 'school';
         let tutorinsaColor = ThemeManager.getCurrentThemeVariables().tutorinsaColor;
@@ -470,7 +490,6 @@ export default class HomeScreen extends FetchedDataSectionList {
                 </Text>;
         } else
             tutorinsaSubtitle = i18n.t('homeScreen.dashboard.tutorinsaSubtitleNA');
-        let tutorinsaClickAction = () => this.props.navigation.navigate('TutorInsaScreen');
 
         return (
             <View style={{
@@ -483,7 +502,7 @@ export default class HomeScreen extends FetchedDataSectionList {
                     subtitle={proxiwashSubtitle}
                     color={proxiwashColor}
                     icon={proxiwashIcon}
-                    clickAction={() => proxiwashClickAction()}
+                    clickAction={this.proxiwashClickAction}
                     title={proxiwashTitle}
                     isAvailable={proxiwashIsAvailable}
                     isSquareLeft={true}/>
@@ -492,7 +511,7 @@ export default class HomeScreen extends FetchedDataSectionList {
                     subtitle={tutorinsaSubtitle}
                     color={tutorinsaColor}
                     icon={tutorinsaIcon}
-                    clickAction={() => tutorinsaClickAction()}
+                    clickAction={this.tutorinsaClickAction}
                     title={tutorinsaTitle}
                     isAvailable={tutorinsaIsAvailable}/>
             </View>
@@ -500,7 +519,7 @@ export default class HomeScreen extends FetchedDataSectionList {
     }
 
 
-    getRenderItem(item: Object, section: Object, data: Object) {
+    getRenderItem(item: Object, section: Object) {
         return (
             section['id'] === SECTIONS_ID[0] ? this.getDashboardItem(item) :
                 <Card style={{
@@ -525,7 +544,7 @@ export default class HomeScreen extends FetchedDataSectionList {
                     }}>
                         <Body>
                             {item.full_picture !== '' && item.full_picture !== undefined ?
-                                <TouchableOpacity onPress={() => openWebLink(item.full_picture)}
+                                <TouchableOpacity onPress={openWebLink.bind(null, item.full_picture)}
                                                   style={{width: '100%', height: 250, marginBottom: 5}}>
                                     <Image source={{uri: item.full_picture}}
                                            style={{flex: 1, resizeMode: "contain"}}
@@ -547,7 +566,7 @@ export default class HomeScreen extends FetchedDataSectionList {
                     }}>
                         <Left>
                             <Button transparent
-                                    onPress={() => openWebLink(item.permalink_url)}>
+                                    onPress={openWebLink.bind(null, item.permalink_url)}>
                                 <CustomMaterialIcon
                                     icon="facebook"
                                     color="#57aeff"
diff --git a/screens/PlanningDisplayScreen.js b/screens/PlanningDisplayScreen.js
index be07370..68a02ae 100644
--- a/screens/PlanningDisplayScreen.js
+++ b/screens/PlanningDisplayScreen.js
@@ -14,7 +14,7 @@ type Props = {
     navigation: Object,
 };
 
-function openWebLink(link) {
+function openWebLink(event, link) {
     Linking.openURL(link).catch((err) => console.error('Error opening link', err));
 }
 
@@ -22,8 +22,8 @@ function openWebLink(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> {
-
     render() {
+        // console.log("rendering planningDisplayScreen");
         const nav = this.props.navigation;
         const displayData = nav.getParam('data', []);
         return (
@@ -60,7 +60,7 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
                                   },
                                   div: {color: ThemeManager.getCurrentThemeVariables().textColor}
                               }}
-                              onLinkPress={(event, link) => openWebLink(link)}/>
+                              onLinkPress={openWebLink}/>
                         : <View/>}
                 </Content>
             </Container>
diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js
index d683cd8..b05eeb2 100644
--- a/screens/PlanningScreen.js
+++ b/screens/PlanningScreen.js
@@ -56,6 +56,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
 
     didFocusSubscription: Function;
     willBlurSubscription: Function;
+
     state = {
         refreshing: false,
         agendaItems: {},
@@ -76,6 +77,22 @@ export default class PlanningScreen extends React.Component<Props, State> {
         if (i18n.currentLocale().startsWith("fr")) {
             LocaleConfig.defaultLocale = 'fr';
         }
+
+        // Create references for functions required in the render function
+        this._onRefresh = this._onRefresh.bind(this);
+        this.onCalendarToggled = this.onCalendarToggled.bind(this);
+        this.getRenderItem = this.getRenderItem.bind(this);
+        this.getRenderEmptyDate = this.getRenderEmptyDate.bind(this);
+        this.setAgendaRef = this.setAgendaRef.bind(this);
+        this.onCalendarToggled = this.onCalendarToggled.bind(this);
+        this.onCalendarToggled = this.onCalendarToggled.bind(this);
+        this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this);
+    }
+
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
+        return nextState.refreshing === false && this.state.refreshing === true ||
+            nextState.agendaItems !== this.state.agendaItems ||
+            nextState.calendarShowing !== this.state.calendarShowing;
     }
 
     componentDidMount() {
@@ -90,7 +107,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
         );
     }
 
-    onBackButtonPressAndroid = () => {
+    onBackButtonPressAndroid() {
         if (this.state.calendarShowing) {
             this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
             return true;
@@ -126,10 +143,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
     }
 
     getRenderItem(item: Object) {
-        let navData = {
-            data: item
-        };
-        const nav = this.props.navigation;
         return (
             <Touchable
                 style={{
@@ -138,7 +151,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
                     marginRight: 10,
                     marginTop: 17,
                 }}
-                onPress={() => nav.navigate('PlanningDisplayScreen', navData)}>
+                onPress={() => this.props.navigation.navigate('PlanningDisplayScreen', {data: item})}>
                 <View style={{
                     padding: 10,
                     flex: 1,
@@ -252,38 +265,46 @@ export default class PlanningScreen extends React.Component<Props, State> {
         }
     }
 
+    setAgendaRef(ref) {
+        this.agendaRef = ref;
+    }
+
+    onCalendarToggled(calendarOpened) {
+        this.setState({calendarShowing: calendarOpened});
+    }
+
+    currentDate = this.getCurrentDate();
+
     render() {
-        const nav = this.props.navigation;
+        // console.log("rendering PlanningScreen");
         return (
-            <BaseContainer navigation={nav} headerTitle={i18n.t('screens.planning')}>
+            <BaseContainer navigation={this.props.navigation} headerTitle={i18n.t('screens.planning')}>
                 <Agenda
                     // the list of items that have to be displayed in agenda. If you want to render item as empty date
                     // the value of date key kas to be an empty array []. If there exists no value for date key it is
                     // considered that the date in question is not yet loaded
                     items={this.state.agendaItems}
                     // initially selected day
-                    selected={this.getCurrentDate()}
+                    selected={this.currentDate}
                     // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
-                    minDate={this.getCurrentDate()}
+                    minDate={this.currentDate}
                     // Max amount of months allowed to scroll to the past. Default = 50
                     pastScrollRange={1}
                     // Max amount of months allowed to scroll to the future. Default = 50
                     futureScrollRange={AGENDA_MONTH_SPAN}
                     // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
-                    onRefresh={() => this._onRefresh()}
+                    onRefresh={this._onRefresh}
                     // callback that fires when the calendar is opened or closed
-                    onCalendarToggled={(calendarOpened) => {
-                        this.setState({calendarShowing: calendarOpened})
-                    }}
+                    onCalendarToggled={this.onCalendarToggled}
                     // Set this true while waiting for new data from a refresh
                     refreshing={this.state.refreshing}
-                    renderItem={(item) => this.getRenderItem(item)}
-                    renderEmptyDate={() => this.getRenderEmptyDate()}
-                    rowHasChanged={() => this.rowHasChanged()}
+                    renderItem={this.getRenderItem}
+                    renderEmptyDate={this.getRenderEmptyDate}
+                    rowHasChanged={this.rowHasChanged}
                     // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
                     firstDay={1}
                     // ref to this agenda in order to handle back button event
-                    ref={(ref) => this.agendaRef = ref}
+                    ref={this.setAgendaRef}
                     // agenda theme
                     theme={{
                         backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js
index 446e17b..c616381 100644
--- a/screens/Proximo/ProximoListScreen.js
+++ b/screens/Proximo/ProximoListScreen.js
@@ -76,6 +76,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         super(props);
         this.modalRef = React.createRef();
         this.originalData = this.navData['data'];
+        this.search = this.search.bind(this);
+        this.selectSortModeName = this.selectSortModeName.bind(this);
+        this.selectSortModePrice = this.selectSortModePrice.bind(this);
+        this.showMenu = this.showMenu.bind(this);
+        this.renderItem = this.renderItem.bind(this);
     }
 
     /**
@@ -260,6 +265,19 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         }
     }
 
+    selectSortModeName() {
+        this.sortModeSelected(sortMode.name);
+    }
+
+    selectSortModePrice() {
+        this.sortModeSelected(sortMode.price);
+    }
+
+    showMenu() {
+        this._menu.show();
+    }
+
+
     getSortMenu() {
         return (
             <Menu
@@ -267,9 +285,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 button={
                     <Touchable
                         style={{padding: 6}}
-                        onPress={() =>
-                            this._menu.show()
-                        }>
+                        onPress={this.showMenu}>
                         <CustomMaterialIcon
                             color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
                             icon={'sort'}/>
@@ -277,12 +293,12 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 }
             >
                 <MenuItem
-                    onPress={() => this.sortModeSelected(sortMode.name)}>
+                    onPress={this.selectSortModeName}>
                     {this.state.sortNameIcon}
                     {i18n.t('proximoScreen.sortName')}
                 </MenuItem>
                 <MenuItem
-                    onPress={() => this.sortModeSelected(sortMode.price)}>
+                    onPress={this.selectSortModePrice}>
                     {this.state.sortPriceIcon}
                     {i18n.t('proximoScreen.sortPrice')}
                 </MenuItem>
@@ -290,7 +306,41 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         );
     }
 
+    renderItem({item}) {
+        return (<ListItem
+            thumbnail
+            onPress={() => {
+                this.showItemDetails(item);
+            }}
+        >
+            <Left>
+                <Thumbnail square source={{uri: item.image}}/>
+            </Left>
+            <Body>
+                <Text style={{marginLeft: 20}}>
+                    {item.name}
+                </Text>
+                <Text note style={{
+                    marginLeft: 20,
+                    color: this.getStockColor(parseInt(item.quantity))
+                }}>
+                    {item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
+                </Text>
+            </Body>
+            <Right>
+                <Text style={{fontWeight: "bold"}}>
+                    {item.price}€
+                </Text>
+            </Right>
+        </ListItem>);
+    }
+
+    keyExtractor(item) {
+        return item.name + item.code;
+    }
+
     render() {
+        // console.log("rendering ProximoListScreen");
         const nav = this.props.navigation;
         return (
             <Container>
@@ -303,7 +353,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                     hasBackButton={true}
                     navigation={nav}
                     hasSearchField={true}
-                    searchCallback={(text) => this.search(text)}
+                    searchCallback={this.search}
                     shouldFocusSearchBar={this.shouldFocusSearchBar}
                     rightButton={this.getSortMenu()}
                 />
@@ -311,35 +361,9 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 <FlatList
                     data={this.state.currentlyDisplayedData}
                     extraData={this.state.currentlyDisplayedData}
-                    keyExtractor={(item) => item.name + item.code}
+                    keyExtractor={this.keyExtractor}
                     style={{minHeight: 300, width: '100%'}}
-                    renderItem={({item}) =>
-                        <ListItem
-                            thumbnail
-                            onPress={() => {
-                                this.showItemDetails(item);
-                            }}
-                        >
-                            <Left>
-                                <Thumbnail square source={{uri: item.image}}/>
-                            </Left>
-                            <Body>
-                                <Text style={{marginLeft: 20}}>
-                                    {item.name}
-                                </Text>
-                                <Text note style={{
-                                    marginLeft: 20,
-                                    color: this.getStockColor(parseInt(item.quantity))
-                                }}>
-                                    {item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
-                                </Text>
-                            </Body>
-                            <Right>
-                                <Text style={{fontWeight: "bold"}}>
-                                    {item.price}€
-                                </Text>
-                            </Right>
-                        </ListItem>}
+                    renderItem={this.renderItem}
                 />
             </Container>
         );
diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js
index 0380f97..1e030db 100644
--- a/screens/Proximo/ProximoMainScreen.js
+++ b/screens/Proximo/ProximoMainScreen.js
@@ -20,6 +20,8 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
 
     constructor() {
         super(DATA_URL, 0);
+        this.onPressSearchBtn = this.onPressSearchBtn.bind(this);
+        this.onPressAboutBtn = this.onPressAboutBtn.bind(this);
     }
 
     static sortFinalData(a: Object, b: Object) {
@@ -100,7 +102,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
         return availableArticles;
     }
 
-    getRightButton() {
+    onPressSearchBtn() {
         let searchScreenData = {
             shouldFocusSearchBar: true,
             data: {
@@ -113,8 +115,14 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
                     this.getAvailableArticles(this.state.fetchedData.articles, undefined) : []
             },
         };
+        this.props.navigation.navigate('ProximoListScreen', searchScreenData);
+    }
 
+    onPressAboutBtn() {
+        this.props.navigation.navigate('ProximoAboutScreen');
+    }
 
+    getRightButton() {
         return (
             <View
                 style={{
@@ -122,14 +130,14 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
                 }}>
                 <Touchable
                     style={{padding: 6}}
-                    onPress={() => this.props.navigation.navigate('ProximoListScreen', searchScreenData)}>
+                    onPress={this.onPressSearchBtn}>
                     <CustomMaterialIcon
                         color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
                         icon="magnify"/>
                 </Touchable>
                 <Touchable
                     style={{padding: 6}}
-                    onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
+                    onPress={this.onPressAboutBtn}>
                     <CustomMaterialIcon
                         color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
                         icon="information"/>
@@ -138,7 +146,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
         );
     }
 
-    getRenderItem(item: Object, section: Object, data: Object) {
+    getRenderItem(item: Object, section: Object) {
         let dataToSend = {
             shouldFocusSearchBar: false,
             data: item,
diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js
index fece8ab..11c13b4 100644
--- a/screens/Proxiwash/ProxiwashScreen.js
+++ b/screens/Proxiwash/ProxiwashScreen.js
@@ -75,6 +75,8 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
             machinesWatched: [],
         };
         this.setMinTimeRefresh(30);
+
+        this.navigateToAboutScreen = this.navigateToAboutScreen.bind(this);
     }
 
     /**
@@ -272,11 +274,15 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
         );
     }
 
+    navigateToAboutScreen() {
+        this.props.navigation.navigate('ProxiwashAboutScreen');
+    }
+
     getRightButton(): * {
         return (
             <Touchable
                 style={{padding: 6}}
-                onPress={() => this.props.navigation.navigate('ProxiwashAboutScreen')}>
+                onPress={this.navigateToAboutScreen}>
                 <CustomMaterialIcon
                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
                     icon="information"/>
@@ -289,10 +295,9 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
      *
      * @param item The object containing the item's FetchedData
      * @param section The object describing the current SectionList section
-     * @param data The full FetchedData used by the SectionList
      * @returns {React.Node}
      */
-    getRenderItem(item: Object, section: Object, data: Object) {
+    getRenderItem(item: Object, 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');
diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js
index 3221b3b..6af6324 100644
--- a/screens/SelfMenuScreen.js
+++ b/screens/SelfMenuScreen.js
@@ -119,7 +119,7 @@ export default class SelfMenuScreen extends FetchedDataSectionList {
         );
     }
 
-    getRenderItem(item: Object, section: Object, data: Object) {
+    getRenderItem(item: Object, section: Object) {
         return (
             <Card style={{
                 flex: 0,

From aefbdba42a833b06af49f1c771a6c80e675890b9 Mon Sep 17 00:00:00 2001
From: Yohan Simard <ysimard@etud.insa-toulouse.fr>
Date: Tue, 11 Feb 2020 01:07:38 +0100
Subject: [PATCH 2/5] deleted a log

---
 components/CustomHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/CustomHeader.js b/components/CustomHeader.js
index fd5c74f..8b935fd 100644
--- a/components/CustomHeader.js
+++ b/components/CustomHeader.js
@@ -108,7 +108,7 @@ export default class CustomHeader extends React.Component<Props> {
     }
 
     render() {
-        console.log("rendering CustomHeader");
+        // console.log("rendering CustomHeader");
         let button;
         // Does the app have a back button or a burger menu ?
         if (this.props.hasBackButton)

From d9c07f5df0e1161400ce8b69cd45796b1b73c13d Mon Sep 17 00:00:00 2001
From: keplyx <keplyx@gmail.com>
Date: Sun, 23 Feb 2020 18:15:30 +0100
Subject: [PATCH 3/5] Fixed some Flow errors

---
 components/BaseContainer.js           |  8 ++--
 components/CustomHeader.js            |  4 +-
 components/FetchedDataSectionList.js  | 20 ++++++----
 components/Sidebar.js                 |  6 ++-
 screens/About/AboutScreen.js          |  8 ++--
 screens/HomeScreen.js                 | 55 +++++++++++++++------------
 screens/PlanningDisplayScreen.js      |  1 -
 screens/PlanningScreen.js             | 36 +++++++++---------
 screens/Proximo/ProximoAboutScreen.js |  2 +-
 screens/Proximo/ProximoListScreen.js  | 50 ++++++++++++++----------
 screens/Proximo/ProximoMainScreen.js  |  3 ++
 screens/Proxiwash/ProxiwashScreen.js  |  8 ++--
 12 files changed, 115 insertions(+), 86 deletions(-)

diff --git a/components/BaseContainer.js b/components/BaseContainer.js
index 4da6b7e..e712347 100644
--- a/components/BaseContainer.js
+++ b/components/BaseContainer.js
@@ -45,12 +45,14 @@ export default class BaseContainer extends React.Component<Props, State> {
         isHeaderVisible: true,
     };
 
+    onDrawerPress: Function;
+
     constructor() {
         super();
-        this.toggle = this.toggle.bind(this);
+        this.onDrawerPress = this.onDrawerPress.bind(this);
     }
 
-    toggle() {
+    onDrawerPress() {
         this.props.navigation.toggleDrawer();
     }
 
@@ -111,7 +113,7 @@ export default class BaseContainer extends React.Component<Props, State> {
                         leftButton={
                             <Touchable
                                 style={{padding: 6}}
-                                onPress={this.toggle}>
+                                onPress={this.onDrawerPress}>
                                 <CustomMaterialIcon
                                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
                                     icon="menu"/>
diff --git a/components/CustomHeader.js b/components/CustomHeader.js
index 8b935fd..cb6bdda 100644
--- a/components/CustomHeader.js
+++ b/components/CustomHeader.js
@@ -44,6 +44,8 @@ export default class CustomHeader extends React.Component<Props> {
         hasTabs: false,
     };
 
+    onPressBack: Function;
+
     constructor() {
         super();
         this.onPressBack = this.onPressBack.bind(this);
@@ -80,7 +82,7 @@ export default class CustomHeader extends React.Component<Props> {
                         color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
                     <Input
                         ref="searchInput"
-                        placeholder={i18n.t('proximoScreen.search')}
+                        placeholder={i18n.t('proximoScreen.onSearchStringChange')}
                         placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
                         onChangeText={this.props.searchCallback}/>
                 </Item>
diff --git a/components/FetchedDataSectionList.js b/components/FetchedDataSectionList.js
index 781f504..75c763c 100644
--- a/components/FetchedDataSectionList.js
+++ b/components/FetchedDataSectionList.js
@@ -41,12 +41,18 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         machinesWatched: [],
     };
 
+    onRefresh: Function;
+    renderSectionHeaderEmpty: Function;
+    renderSectionHeaderNotEmpty: Function;
+    renderItemEmpty: Function;
+    renderItemNotEmpty: Function;
+
     constructor(fetchUrl: string, refreshTime: number) {
         super();
         this.webDataManager = new WebDataManager(fetchUrl);
         this.refreshTime = refreshTime;
         // creating references to functions used in render()
-        this._onRefresh = this._onRefresh.bind(this);
+        this.onRefresh = this.onRefresh.bind(this);
         this.renderSectionHeaderEmpty = this.renderSectionHeader.bind(this, true);
         this.renderSectionHeaderNotEmpty = this.renderSectionHeader.bind(this, false);
         this.renderItemEmpty = this.renderItem.bind(this, true);
@@ -96,9 +102,9 @@ export default class FetchedDataSectionList extends React.Component<Props, State
      * Refresh data when focusing the screen and setup a refresh interval if asked to
      */
     onScreenFocus() {
-        this._onRefresh();
+        this.onRefresh();
         if (this.refreshTime > 0)
-            this.refreshInterval = setInterval(this._onRefresh.bind(this), this.refreshTime)
+            this.refreshInterval = setInterval(this.onRefresh.bind(this), this.refreshTime)
     }
 
     /**
@@ -122,7 +128,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
      * Refresh data and show a toast if any error occurred
      * @private
      */
-    _onRefresh() {
+    onRefresh() {
         let canRefresh;
         if (this.lastRefresh !== undefined)
             canRefresh = (new Date().getTime() - this.lastRefresh.getTime()) / 1000 > this.minTimeBetweenRefresh;
@@ -284,13 +290,13 @@ export default class FetchedDataSectionList extends React.Component<Props, State
     }
 
 
-    renderSectionHeader(isEmpty, {section: {title}}) {
+    renderSectionHeader(isEmpty: boolean, {section: {title}} : Object) {
         return isEmpty ?
             <View/> :
             this.getRenderSectionHeader(title)
     }
 
-    renderItem(isEmpty, {item, section}) {
+    renderItem(isEmpty: boolean, {item, section}: Object) {
         return isEmpty ?
             this.getEmptyRenderItem(item.text, item.isSpinner, item.icon) :
             this.getRenderItem(item, section)
@@ -313,7 +319,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
                 refreshControl={
                     <RefreshControl
                         refreshing={this.state.refreshing}
-                        onRefresh={this._onRefresh}
+                        onRefresh={this.onRefresh}
                     />
                 }
                 renderSectionHeader={isEmpty ? this.renderSectionHeaderEmpty : this.renderSectionHeaderNotEmpty}
diff --git a/components/Sidebar.js b/components/Sidebar.js
index 61cd73f..5517f99 100644
--- a/components/Sidebar.js
+++ b/components/Sidebar.js
@@ -30,6 +30,8 @@ export default class SideBar extends React.Component<Props, State> {
         active: 'Home',
     };
 
+    getRenderItem: Function;
+
     /**
      * Generate the datasets
      *
@@ -111,7 +113,7 @@ export default class SideBar extends React.Component<Props, State> {
     }
 
 
-    onListItemPress(item) {
+    onListItemPress(item: Object) {
         if (item.link !== undefined)
             Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
         else
@@ -119,7 +121,7 @@ export default class SideBar extends React.Component<Props, State> {
     }
 
 
-    listKeyExtractor(item) {
+    listKeyExtractor(item: Object) {
         return item.route;
     }
 
diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js
index c4bc463..14d77a2 100644
--- a/screens/About/AboutScreen.js
+++ b/screens/About/AboutScreen.js
@@ -210,7 +210,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                     data={this.appData}
                     extraData={this.state}
                     keyExtractor={(item) => item.icon}
-                    listKey={(item) => "app"}
+                    listKey={"app"}
                     renderItem={({item}) =>
                         this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
                     }
@@ -241,7 +241,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                     data={this.authorData}
                     extraData={this.state}
                     keyExtractor={(item) => item.icon}
-                    listKey={(item) => "team1"}
+                    listKey={"team1"}
                     renderItem={({item}) =>
                         this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
                     }
@@ -253,7 +253,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                     data={this.additionalDevData}
                     extraData={this.state}
                     keyExtractor={(item) => item.icon}
-                    listKey={(item) => "team2"}
+                    listKey={"team2"}
                     renderItem={({item}) =>
                         this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
                     }
@@ -272,7 +272,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                     data={this.technoData}
                     extraData={this.state}
                     keyExtractor={(item) => item.icon}
-                    listKey={(item) => "techno"}
+                    listKey={"techno"}
                     renderItem={({item}) =>
                         this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
                     }
diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
index dcad00c..4f2207c 100644
--- a/screens/HomeScreen.js
+++ b/screens/HomeScreen.js
@@ -38,12 +38,33 @@ function openWebLink(link) {
  */
 export default class HomeScreen extends FetchedDataSectionList {
 
+    onProxiwashClick: Function;
+    onTutorInsaClick: Function;
+    onMenuClick: Function;
+    onProximoClick: Function;
+
     constructor() {
         super(DATA_URL, REFRESH_TIME);
-        this.proxiwashClickAction = this.proxiwashClickAction.bind(this);
-        this.tutorinsaClickAction = this.tutorinsaClickAction.bind(this);
-        this.menuClickAction = this.menuClickAction.bind(this);
-        this.proximoClickAction = this.proximoClickAction.bind(this);
+        this.onProxiwashClick = this.onProxiwashClick.bind(this);
+        this.onTutorInsaClick = this.onTutorInsaClick.bind(this);
+        this.onMenuClick = this.onMenuClick.bind(this);
+        this.onProximoClick = this.onProximoClick.bind(this);
+    }
+
+    onProxiwashClick() {
+        this.props.navigation.navigate('Proxiwash');
+    }
+
+    onTutorInsaClick() {
+        this.props.navigation.navigate('TutorInsaScreen');
+    }
+
+    onProximoClick() {
+        this.props.navigation.navigate('Proximo');
+    }
+
+    onMenuClick() {
+        this.props.navigation.navigate('SelfMenuScreen');
     }
 
     /**
@@ -293,7 +314,7 @@ export default class HomeScreen extends FetchedDataSectionList {
     }
 
 
-    clickAction(isAvailable, displayEvent) {
+    clickAction(isAvailable: boolean, displayEvent: Object) {
         if (isAvailable)
             this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent});
         else
@@ -338,14 +359,6 @@ export default class HomeScreen extends FetchedDataSectionList {
         );
     }
 
-    proximoClickAction() {
-        this.props.navigation.navigate('Proximo');
-    }
-
-    menuClickAction() {
-        this.props.navigation.navigate('SelfMenuScreen');
-    }
-
 
     getDashboardBottomItem(content: Array<Object>) {
         let proximoData = content[0]['data'];
@@ -391,7 +404,7 @@ export default class HomeScreen extends FetchedDataSectionList {
                     subtitle={menuSubtitle}
                     color={menuColor}
                     icon={menuIcon}
-                    clickAction={this.menuClickAction}
+                    clickAction={this.onMenuClick}
                     title={menuTitle}
                     isAvailable={isMenuAvailable}
                     isSquareLeft={true}/>
@@ -400,21 +413,13 @@ export default class HomeScreen extends FetchedDataSectionList {
                     subtitle={proximoSubtitle}
                     color={proximoColor}
                     icon={proximoIcon}
-                    clickAction={this.proximoClickAction}
+                    clickAction={this.onProximoClick}
                     title={proximoTitle}
                     isAvailable={isProximoAvailable}/>
             </View>
         );
     }
 
-    proxiwashClickAction() {
-        this.props.navigation.navigate('Proxiwash');
-    }
-
-    tutorinsaClickAction() {
-        this.props.navigation.navigate('TutorInsaScreen');
-    }
-
 
     getDashboardMiddleItem(content: Array<Object>) {
         let proxiwashData = content[0]['data'];
@@ -502,7 +507,7 @@ export default class HomeScreen extends FetchedDataSectionList {
                     subtitle={proxiwashSubtitle}
                     color={proxiwashColor}
                     icon={proxiwashIcon}
-                    clickAction={this.proxiwashClickAction}
+                    clickAction={this.onProxiwashClick}
                     title={proxiwashTitle}
                     isAvailable={proxiwashIsAvailable}
                     isSquareLeft={true}/>
@@ -511,7 +516,7 @@ export default class HomeScreen extends FetchedDataSectionList {
                     subtitle={tutorinsaSubtitle}
                     color={tutorinsaColor}
                     icon={tutorinsaIcon}
-                    clickAction={this.tutorinsaClickAction}
+                    clickAction={this.onTutorInsaClick}
                     title={tutorinsaTitle}
                     isAvailable={tutorinsaIsAvailable}/>
             </View>
diff --git a/screens/PlanningDisplayScreen.js b/screens/PlanningDisplayScreen.js
index 68a02ae..0203f5f 100644
--- a/screens/PlanningDisplayScreen.js
+++ b/screens/PlanningDisplayScreen.js
@@ -8,7 +8,6 @@ import ThemeManager from "../utils/ThemeManager";
 import HTML from "react-native-render-html";
 import {Linking} from "expo";
 import PlanningEventManager from '../utils/PlanningEventManager';
-import i18n from 'i18n-js';
 
 type Props = {
     navigation: Object,
diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js
index b05eeb2..b5aa6a0 100644
--- a/screens/PlanningScreen.js
+++ b/screens/PlanningScreen.js
@@ -5,7 +5,6 @@ import {BackHandler, Image} from 'react-native';
 import {H3, Text, View} from 'native-base';
 import i18n from "i18n-js";
 import ThemeManager from "../utils/ThemeManager";
-import {Linking} from "expo";
 import BaseContainer from "../components/BaseContainer";
 import {Agenda, LocaleConfig} from 'react-native-calendars';
 import Touchable from 'react-native-platform-touchable';
@@ -35,14 +34,6 @@ const FETCH_URL = "https://amicale-insat.fr/event/json/list";
 
 const AGENDA_MONTH_SPAN = 6;
 
-/**
- * Opens a link in the device's browser
- * @param link The link to open
- */
-function openWebLink(link) {
-    Linking.openURL(link).catch((err) => console.error('Error opening link', err));
-}
-
 /**
  * Class defining the app's planning screen
  */
@@ -63,6 +54,14 @@ export default class PlanningScreen extends React.Component<Props, State> {
         calendarShowing: false,
     };
 
+    onRefresh: Function;
+    onCalendarToggled: Function;
+    getRenderItem: Function;
+    getRenderEmptyDate: Function;
+    onAgendaRef: Function;
+    onCalendarToggled: Function;
+    onBackButtonPressAndroid: Function;
+
     constructor(props: any) {
         super(props);
         this.webDataManager = new WebDataManager(FETCH_URL);
@@ -79,12 +78,11 @@ export default class PlanningScreen extends React.Component<Props, State> {
         }
 
         // Create references for functions required in the render function
-        this._onRefresh = this._onRefresh.bind(this);
+        this.onRefresh = this.onRefresh.bind(this);
         this.onCalendarToggled = this.onCalendarToggled.bind(this);
         this.getRenderItem = this.getRenderItem.bind(this);
         this.getRenderEmptyDate = this.getRenderEmptyDate.bind(this);
-        this.setAgendaRef = this.setAgendaRef.bind(this);
-        this.onCalendarToggled = this.onCalendarToggled.bind(this);
+        this.onAgendaRef = this.onAgendaRef.bind(this);
         this.onCalendarToggled = this.onCalendarToggled.bind(this);
         this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this);
     }
@@ -96,7 +94,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
     }
 
     componentDidMount() {
-        this._onRefresh();
+        this.onRefresh();
         this.willBlurSubscription = this.props.navigation.addListener(
             'willBlur',
             () =>
@@ -213,7 +211,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
      * Refresh data and show a toast if any error occurred
      * @private
      */
-    _onRefresh = () => {
+    onRefresh = () => {
         let canRefresh;
         if (this.lastRefresh !== undefined)
             canRefresh = (new Date().getTime() - this.lastRefresh.getTime()) / 1000 > this.minTimeBetweenRefresh;
@@ -265,12 +263,12 @@ export default class PlanningScreen extends React.Component<Props, State> {
         }
     }
 
-    setAgendaRef(ref) {
+    onAgendaRef(ref: Agenda) {
         this.agendaRef = ref;
     }
 
-    onCalendarToggled(calendarOpened) {
-        this.setState({calendarShowing: calendarOpened});
+    onCalendarToggled(isCalendarOpened: boolean) {
+        this.setState({calendarShowing: isCalendarOpened});
     }
 
     currentDate = this.getCurrentDate();
@@ -293,7 +291,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
                     // Max amount of months allowed to scroll to the future. Default = 50
                     futureScrollRange={AGENDA_MONTH_SPAN}
                     // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
-                    onRefresh={this._onRefresh}
+                    onRefresh={this.onRefresh}
                     // callback that fires when the calendar is opened or closed
                     onCalendarToggled={this.onCalendarToggled}
                     // Set this true while waiting for new data from a refresh
@@ -304,7 +302,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
                     // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
                     firstDay={1}
                     // ref to this agenda in order to handle back button event
-                    ref={this.setAgendaRef}
+                    ref={this.onAgendaRef}
                     // agenda theme
                     theme={{
                         backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
diff --git a/screens/Proximo/ProximoAboutScreen.js b/screens/Proximo/ProximoAboutScreen.js
index 269a5f6..65a19cf 100644
--- a/screens/Proximo/ProximoAboutScreen.js
+++ b/screens/Proximo/ProximoAboutScreen.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Image, Linking, View} from 'react-native';
+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";
diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js
index c616381..18f458a 100644
--- a/screens/Proximo/ProximoListScreen.js
+++ b/screens/Proximo/ProximoListScreen.js
@@ -70,16 +70,25 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         sortNameIcon: '',
         modalCurrentDisplayItem: {},
     };
-    _menu: Menu;
+    sortMenuRef: Menu;
+
+    onMenuRef: Function;
+    onSearchStringChange: Function;
+    onSelectSortModeName: Function;
+    onSelectSortModePrice: Function;
+    onSortMenuPress: Function;
+    renderItem: Function;
 
     constructor(props: any) {
         super(props);
         this.modalRef = React.createRef();
         this.originalData = this.navData['data'];
-        this.search = this.search.bind(this);
-        this.selectSortModeName = this.selectSortModeName.bind(this);
-        this.selectSortModePrice = this.selectSortModePrice.bind(this);
-        this.showMenu = this.showMenu.bind(this);
+
+        this.onMenuRef = this.onMenuRef.bind(this);
+        this.onSearchStringChange = this.onSearchStringChange.bind(this);
+        this.onSelectSortModeName = this.onSelectSortModeName.bind(this);
+        this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this);
+        this.onSortMenuPress = this.onSortMenuPress.bind(this);
         this.renderItem = this.renderItem.bind(this);
     }
 
@@ -88,8 +97,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
      *
      * @param ref The menu reference
      */
-    setMenuRef = (ref: Menu) => {
-        this._menu = ref;
+    onMenuRef(ref: Menu) {
+        this.sortMenuRef = ref;
     };
 
     /**
@@ -136,7 +145,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 break;
         }
         this.setupSortIcons(mode, isReverse);
-        this._menu.hide();
+        this.sortMenuRef.hide();
     }
 
     /**
@@ -219,7 +228,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         return filteredData;
     }
 
-    search(str: string) {
+    onSearchStringChange(str: string) {
         this.setState({
             currentlyDisplayedData: this.filterData(str)
         })
@@ -265,27 +274,27 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         }
     }
 
-    selectSortModeName() {
+    onSelectSortModeName() {
         this.sortModeSelected(sortMode.name);
     }
 
-    selectSortModePrice() {
+    onSelectSortModePrice() {
         this.sortModeSelected(sortMode.price);
     }
 
-    showMenu() {
-        this._menu.show();
+    onSortMenuPress() {
+        this.sortMenuRef.show();
     }
 
 
     getSortMenu() {
         return (
             <Menu
-                ref={this.setMenuRef}
+                ref={this.onMenuRef}
                 button={
                     <Touchable
                         style={{padding: 6}}
-                        onPress={this.showMenu}>
+                        onPress={this.onSortMenuPress}>
                         <CustomMaterialIcon
                             color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
                             icon={'sort'}/>
@@ -293,12 +302,12 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 }
             >
                 <MenuItem
-                    onPress={this.selectSortModeName}>
+                    onPress={this.onSelectSortModeName}>
                     {this.state.sortNameIcon}
                     {i18n.t('proximoScreen.sortName')}
                 </MenuItem>
                 <MenuItem
-                    onPress={this.selectSortModePrice}>
+                    onPress={this.onSelectSortModePrice}>
                     {this.state.sortPriceIcon}
                     {i18n.t('proximoScreen.sortPrice')}
                 </MenuItem>
@@ -306,7 +315,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         );
     }
 
-    renderItem({item}) {
+    renderItem({item}: Object) {
+        console.log(item);
         return (<ListItem
             thumbnail
             onPress={() => {
@@ -335,7 +345,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         </ListItem>);
     }
 
-    keyExtractor(item) {
+    keyExtractor(item: Object) {
         return item.name + item.code;
     }
 
@@ -353,7 +363,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                     hasBackButton={true}
                     navigation={nav}
                     hasSearchField={true}
-                    searchCallback={this.search}
+                    searchCallback={this.onSearchStringChange}
                     shouldFocusSearchBar={this.shouldFocusSearchBar}
                     rightButton={this.getSortMenu()}
                 />
diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js
index 1e030db..932c689 100644
--- a/screens/Proximo/ProximoMainScreen.js
+++ b/screens/Proximo/ProximoMainScreen.js
@@ -18,6 +18,9 @@ const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~proximo/data/stock-v
  */
 export default class ProximoMainScreen extends FetchedDataSectionList {
 
+    onPressSearchBtn: Function;
+    onPressAboutBtn: Function;
+
     constructor() {
         super(DATA_URL, 0);
         this.onPressSearchBtn = this.onPressSearchBtn.bind(this);
diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js
index 11c13b4..0c7db1b 100644
--- a/screens/Proxiwash/ProxiwashScreen.js
+++ b/screens/Proxiwash/ProxiwashScreen.js
@@ -36,6 +36,8 @@ const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
  */
 export default class ProxiwashScreen extends FetchedDataSectionList {
 
+    onAboutPress: Function;
+
     /**
      * Creates machine state parameters using current theme and translations
      */
@@ -76,7 +78,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
         };
         this.setMinTimeRefresh(30);
 
-        this.navigateToAboutScreen = this.navigateToAboutScreen.bind(this);
+        this.onAboutPress = this.onAboutPress.bind(this);
     }
 
     /**
@@ -274,7 +276,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
         );
     }
 
-    navigateToAboutScreen() {
+    onAboutPress() {
         this.props.navigation.navigate('ProxiwashAboutScreen');
     }
 
@@ -282,7 +284,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
         return (
             <Touchable
                 style={{padding: 6}}
-                onPress={this.navigateToAboutScreen}>
+                onPress={this.onAboutPress}>
                 <CustomMaterialIcon
                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
                     icon="information"/>

From 1a44465381f8aa6875defca468d6e6ae341457d7 Mon Sep 17 00:00:00 2001
From: keplyx <keplyx@gmail.com>
Date: Sun, 23 Feb 2020 18:19:49 +0100
Subject: [PATCH 4/5] Removed unused log and fixed translation error

---
 components/CustomHeader.js           | 2 +-
 screens/Proximo/ProximoListScreen.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/CustomHeader.js b/components/CustomHeader.js
index cb6bdda..f0ca286 100644
--- a/components/CustomHeader.js
+++ b/components/CustomHeader.js
@@ -82,7 +82,7 @@ export default class CustomHeader extends React.Component<Props> {
                         color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
                     <Input
                         ref="searchInput"
-                        placeholder={i18n.t('proximoScreen.onSearchStringChange')}
+                        placeholder={i18n.t('proximoScreen.search')}
                         placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
                         onChangeText={this.props.searchCallback}/>
                 </Item>
diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js
index 18f458a..b4809e1 100644
--- a/screens/Proximo/ProximoListScreen.js
+++ b/screens/Proximo/ProximoListScreen.js
@@ -316,7 +316,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
     }
 
     renderItem({item}: Object) {
-        console.log(item);
         return (<ListItem
             thumbnail
             onPress={() => {

From 2edef95361c8e1f976547ecbec3ce6ddb75fbb99 Mon Sep 17 00:00:00 2001
From: keplyx <keplyx@gmail.com>
Date: Sun, 23 Feb 2020 21:47:36 +0100
Subject: [PATCH 5/5] Removed other arrow functions for increased performance

---
 App.js                               |  4 ++
 components/BaseContainer.js          | 59 +++++++++++++---------
 components/CustomHeader.js           |  4 +-
 components/CustomIntroSlider.js      |  6 +--
 components/FetchedDataSectionList.js | 40 +++++++++------
 components/Sidebar.js                | 20 ++------
 components/WebViewScreen.js          | 75 +++++++++++++++++++---------
 screens/About/AboutScreen.js         | 50 ++++++++-----------
 screens/Proximo/ProximoListScreen.js |  8 +--
 screens/Proximo/ProximoMainScreen.js |  5 +-
 screens/Proxiwash/ProxiwashScreen.js |  7 +--
 screens/SettingsScreen.js            | 21 ++++++--
 12 files changed, 172 insertions(+), 127 deletions(-)

diff --git a/App.js b/App.js
index ac44a28..7c5ac2d 100644
--- a/App.js
+++ b/App.js
@@ -31,6 +31,10 @@ export default class App extends React.Component<Props, State> {
         currentTheme: null,
     };
 
+    onIntroDone: Function;
+    loadAssetsAsync: Function;
+    onLoadFinished: Function;
+
     constructor(props: Object) {
         super(props);
         LocaleManager.initTranslations();
diff --git a/components/BaseContainer.js b/components/BaseContainer.js
index e712347..c0b5bd0 100644
--- a/components/BaseContainer.js
+++ b/components/BaseContainer.js
@@ -46,47 +46,60 @@ export default class BaseContainer extends React.Component<Props, State> {
     };
 
     onDrawerPress: Function;
+    onWillFocus: Function;
+    onWillBlur: Function;
+    onChangeOrientation: Function;
 
     constructor() {
         super();
         this.onDrawerPress = this.onDrawerPress.bind(this);
+        this.onWillFocus = this.onWillFocus.bind(this);
+        this.onWillBlur = this.onWillBlur.bind(this);
+        this.onChangeOrientation = this.onChangeOrientation.bind(this);
     }
 
     onDrawerPress() {
         this.props.navigation.toggleDrawer();
     }
 
+    onWillFocus() {
+        if (this.props.enableRotation) {
+            ScreenOrientation.unlockAsync();
+            ScreenOrientation.addOrientationChangeListener(this.onChangeOrientation);
+        }
+    }
+
+    onWillBlur() {
+        if (this.props.enableRotation)
+            ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
+    }
+
+    onChangeOrientation(OrientationChangeEvent) {
+        if (this.props.hideHeaderOnLandscape) {
+            let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
+                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
+                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
+            this.setState({isHeaderVisible: !isLandscape});
+            const setParamsAction = NavigationActions.setParams({
+                params: {showTabBar: !isLandscape},
+                key: this.props.navigation.state.key,
+            });
+            this.props.navigation.dispatch(setParamsAction);
+            StatusBar.setHidden(isLandscape);
+        }
+    }
+
     /**
      * Register for blur event to close side menu on screen change
      */
     componentDidMount() {
         this.willFocusSubscription = this.props.navigation.addListener(
             'willFocus',
-            () => {
-                if (this.props.enableRotation) {
-                    ScreenOrientation.unlockAsync();
-                    ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
-                        if (this.props.hideHeaderOnLandscape) {
-                            let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
-                                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
-                                OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
-                            this.setState({isHeaderVisible: !isLandscape});
-                            const setParamsAction = NavigationActions.setParams({
-                                params: {showTabBar: !isLandscape},
-                                key: this.props.navigation.state.key,
-                            });
-                            this.props.navigation.dispatch(setParamsAction);
-                            StatusBar.setHidden(isLandscape);
-                        }
-                    });
-                }
-            });
+            this.onWillFocus
+        );
         this.willBlurSubscription = this.props.navigation.addListener(
             'willBlur',
-            () => {
-                if (this.props.enableRotation)
-                    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
-            }
+            this.onWillBlur
         );
     }
 
diff --git a/components/CustomHeader.js b/components/CustomHeader.js
index f0ca286..c72e46f 100644
--- a/components/CustomHeader.js
+++ b/components/CustomHeader.js
@@ -35,7 +35,7 @@ export default class CustomHeader extends React.Component<Props> {
     static defaultProps = {
         hasBackButton: false,
         hasSearchField: false,
-        searchCallback: () => null,
+        searchCallback: null,
         shouldFocusSearchBar: false,
         title: '',
         subtitle: '',
@@ -65,7 +65,7 @@ export default class CustomHeader extends React.Component<Props> {
     componentDidMount() {
         if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
             // does not work if called too early for some reason...
-            setTimeout(() => this.refs.searchInput._root.focus(), 500);
+            setTimeout(this.refs.searchInput._root.focus, 500);
         }
     }
 
diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js
index 6e430e3..1ad4221 100644
--- a/components/CustomIntroSlider.js
+++ b/components/CustomIntroSlider.js
@@ -117,7 +117,7 @@ export default class CustomIntroSlider extends React.Component<Props> {
      * @param item
      * @param dimensions
      */
-    static getIntroRenderItem(item: Object, dimensions: Object) {
+    static getIntroRenderItem({item, dimensions}: Object) {
 
         return (
             <LinearGradient
@@ -143,9 +143,9 @@ export default class CustomIntroSlider extends React.Component<Props> {
     render() {
         return (
             <AppIntroSlider
-                renderItem={({item, dimensions}) => CustomIntroSlider.getIntroRenderItem(item, dimensions)}
+                renderItem={CustomIntroSlider.getIntroRenderItem}
                 slides={this.props.isUpdate ? this.updateSlides : this.introSlides}
-                onDone={() => this.props.onDone()}
+                onDone={this.props.onDone}
                 bottomButton
                 showSkipButton
                 skipLabel={i18n.t('intro.buttons.skip')}
diff --git a/components/FetchedDataSectionList.js b/components/FetchedDataSectionList.js
index 75c763c..413eb25 100644
--- a/components/FetchedDataSectionList.js
+++ b/components/FetchedDataSectionList.js
@@ -42,6 +42,8 @@ export default class FetchedDataSectionList extends React.Component<Props, State
     };
 
     onRefresh: Function;
+    onFetchSuccess: Function;
+    onFetchError: Function;
     renderSectionHeaderEmpty: Function;
     renderSectionHeaderNotEmpty: Function;
     renderItemEmpty: Function;
@@ -53,6 +55,8 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         this.refreshTime = refreshTime;
         // creating references to functions used in render()
         this.onRefresh = this.onRefresh.bind(this);
+        this.onFetchSuccess = this.onFetchSuccess.bind(this);
+        this.onFetchError = this.onFetchError.bind(this);
         this.renderSectionHeaderEmpty = this.renderSectionHeader.bind(this, true);
         this.renderSectionHeaderNotEmpty = this.renderSectionHeader.bind(this, false);
         this.renderItemEmpty = this.renderItem.bind(this, true);
@@ -124,6 +128,24 @@ export default class FetchedDataSectionList extends React.Component<Props, State
             this.willFocusSubscription.remove();
     }
 
+    onFetchSuccess(fetchedData: Object) {
+        this.setState({
+            fetchedData: fetchedData,
+            refreshing: false,
+            firstLoading: false
+        });
+        this.lastRefresh = new Date();
+    }
+
+    onFetchError() {
+        this.setState({
+            fetchedData: {},
+            refreshing: false,
+            firstLoading: false
+        });
+        this.webDataManager.showUpdateToast(this.getUpdateToastTranslations()[0], this.getUpdateToastTranslations()[1]);
+    }
+
     /**
      * Refresh data and show a toast if any error occurred
      * @private
@@ -138,22 +160,8 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         if (canRefresh) {
             this.setState({refreshing: true});
             this.webDataManager.readData()
-                .then((fetchedData) => {
-                    this.setState({
-                        fetchedData: fetchedData,
-                        refreshing: false,
-                        firstLoading: false
-                    });
-                    this.lastRefresh = new Date();
-                })
-                .catch(() => {
-                    this.setState({
-                        fetchedData: {},
-                        refreshing: false,
-                        firstLoading: false
-                    });
-                    this.webDataManager.showUpdateToast(this.getUpdateToastTranslations()[0], this.getUpdateToastTranslations()[1]);
-                });
+                .then(this.onFetchSuccess)
+                .catch(this.onFetchError);
         }
     }
 
diff --git a/components/Sidebar.js b/components/Sidebar.js
index 5517f99..cac9553 100644
--- a/components/Sidebar.js
+++ b/components/Sidebar.js
@@ -40,7 +40,6 @@ export default class SideBar extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props);
         // Dataset used to render the drawer
-        // If the link field is defined, clicking on the item will open the link
         this.dataSet = [
             {
                 name: i18n.t('sidenav.divider1'),
@@ -113,11 +112,8 @@ export default class SideBar extends React.Component<Props, State> {
     }
 
 
-    onListItemPress(item: Object) {
-        if (item.link !== undefined)
-            Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
-        else
-            this.navigateToScreen(item.route);
+    onListItemPress(route: string) {
+        this.props.navigation.navigate(route);
     }
 
 
@@ -127,13 +123,15 @@ export default class SideBar extends React.Component<Props, State> {
 
 
     getRenderItem({item}: Object) {
+        const onListItemPress = this.onListItemPress.bind(this, item.route);
+
         if (item.icon !== undefined) {
             return (
                 <ListItem
                     button
                     noBorder
                     selected={this.state.active === item.route}
-                    onPress={this.onListItemPress.bind(this, item)}
+                    onPress={onListItemPress}
                 >
                     <Left>
                         <CustomMaterialIcon
@@ -171,14 +169,6 @@ export default class SideBar extends React.Component<Props, State> {
 
     }
 
-    /**
-     * Navigate to the selected route
-     * @param route {string} The route name to navigate to
-     */
-    navigateToScreen(route: string) {
-        this.props.navigation.navigate(route);
-    };
-
     render() {
         // console.log("rendering SideBar");
         return (
diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js
index b908e69..69aa465 100644
--- a/components/WebViewScreen.js
+++ b/components/WebViewScreen.js
@@ -35,6 +35,21 @@ export default class WebViewScreen extends React.Component<Props> {
     };
     webviewArray: Array<WebView> = [];
 
+    onRefreshClicked: Function;
+    onWebviewRef: Function;
+    onGoBackWebview: Function;
+    onGoForwardWebview: Function;
+    onOpenWebLink: Function;
+
+    constructor() {
+        super();
+        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);
+    }
+
     openWebLink(url: string) {
         Linking.openURL(url).catch((err) => console.error('Error opening link', err));
     }
@@ -43,7 +58,7 @@ export default class WebViewScreen extends React.Component<Props> {
         return (
             <Touchable
                 style={{padding: 6}}
-                onPress={() => clickAction()}>
+                onPress={clickAction}>
                 <CustomMaterialIcon
                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
                     icon={icon}/>
@@ -54,36 +69,62 @@ export default class WebViewScreen extends React.Component<Props> {
     getRefreshButton() {
         return (
             <View style={{flexDirection: 'row'}}>
-                {this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
+                {this.getHeaderButton(this.onRefreshClicked, 'refresh')}
             </View>
         );
     };
 
-    refreshWebview() {
+    onRefreshClicked() {
         for (let view of this.webviewArray) {
             if (view !== null)
                 view.reload();
         }
     }
 
-    goBackWebview() {
+    onGoBackWebview() {
         for (let view of this.webviewArray) {
             if (view !== null)
                 view.goBack();
         }
     }
 
-    goForwardWebview() {
+    onGoForwardWebview() {
         for (let view of this.webviewArray) {
             if (view !== null)
                 view.goForward();
         }
     }
 
+    onOpenWebLink() {
+        this.openWebLink(this.props.data[0]['url'])
+    }
+
+    onWebviewRef(ref: WebView) {
+        this.webviewArray.push(ref)
+    }
+
+    getRenderLoading() {
+        return (
+            <View style={{
+                backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                width: '100%',
+                height: '100%',
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'center'
+            }}>
+                <Spinner/>
+            </View>
+        );
+    }
+
     getWebview(obj: Object) {
         return (
             <WebView
-                ref={ref => (this.webviewArray.push(ref))}
+                ref={this.onWebviewRef}
                 source={{uri: obj['url']}}
                 style={{
                     width: '100%',
@@ -92,21 +133,7 @@ export default class WebViewScreen extends React.Component<Props> {
                 startInLoadingState={true}
                 injectedJavaScript={obj['customJS']}
                 javaScriptEnabled={true}
-                renderLoading={() =>
-                    <View style={{
-                        backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
-                        position: 'absolute',
-                        top: 0,
-                        right: 0,
-                        width: '100%',
-                        height: '100%',
-                        flex: 1,
-                        alignItems: 'center',
-                        justifyContent: 'center'
-                    }}>
-                        <Spinner/>
-                    </View>
-                }
+                renderLoading={this.getRenderLoading}
             />
         );
     }
@@ -167,7 +194,7 @@ export default class WebViewScreen extends React.Component<Props> {
                         <Left style={{
                             paddingLeft: 6,
                         }}>
-                            {this.getHeaderButton(() => this.openWebLink(this.props.data[0]['url']), 'open-in-new')}
+                            {this.getHeaderButton(this.onOpenWebLink, 'open-in-new')}
                         </Left>
                         <Body/>
                         <Right style={{
@@ -180,8 +207,8 @@ export default class WebViewScreen extends React.Component<Props> {
                                 marginRight: 0,
                                 marginLeft: 'auto'
                             }}>
-                                {this.getHeaderButton(() => this.goBackWebview(), 'chevron-left')}
-                                {this.getHeaderButton(() => this.goForwardWebview(), 'chevron-right')}
+                                {this.getHeaderButton(this.onGoBackWebview, 'chevron-left')}
+                                {this.getHeaderButton(this.onGoForwardWebview, 'chevron-right')}
                             </View>
                         </Right>
                     </Footer> : <View/>}
diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js
index 14d77a2..c866909 100644
--- a/screens/About/AboutScreen.js
+++ b/screens/About/AboutScreen.js
@@ -187,9 +187,14 @@ export default class AboutScreen extends React.Component<Props, State> {
         },
     ];
 
+    getCardItem: Function;
+    getMainCard: Function;
+
     constructor(props: any) {
         super(props);
         this.modalRef = React.createRef();
+        this.getCardItem = this.getCardItem.bind(this);
+        this.getMainCard = this.getMainCard.bind(this);
     }
 
     getAppCard() {
@@ -211,9 +216,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                     extraData={this.state}
                     keyExtractor={(item) => item.icon}
                     listKey={"app"}
-                    renderItem={({item}) =>
-                        this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
-                    }
+                    renderItem={this.getCardItem}
                 />
             </Card>
         );
@@ -242,9 +245,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                     extraData={this.state}
                     keyExtractor={(item) => item.icon}
                     listKey={"team1"}
-                    renderItem={({item}) =>
-                        this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
-                    }
+                    renderItem={this.getCardItem}
                 />
                 <CardItem header>
                     <Text>{i18n.t('aboutScreen.additionalDev')}</Text>
@@ -254,9 +255,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                     extraData={this.state}
                     keyExtractor={(item) => item.icon}
                     listKey={"team2"}
-                    renderItem={({item}) =>
-                        this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
-                    }
+                    renderItem={this.getCardItem}
                 />
             </Card>
         );
@@ -273,9 +272,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                     extraData={this.state}
                     keyExtractor={(item) => item.icon}
                     listKey={"techno"}
-                    renderItem={({item}) =>
-                        this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
-                    }
+                    renderItem={this.getCardItem}
                 />
             </Card>
         );
@@ -284,24 +281,19 @@ export default class AboutScreen extends React.Component<Props, State> {
     /**
      * Get a clickable card item to be rendered inside a card.
      *
-     * @param onPressCallback The callback to use when the item is clicked
-     * @param icon The icon name to use from MaterialCommunityIcons
-     * @param text The text to show
-     * @param showChevron Whether to show a chevron indicating this button will change screen
-     * @param showOnlyInDebug Should we show te current item only in debug mode?
      * @returns {React.Node}
      */
-    getCardItem(onPressCallback: Function, icon: string, text: string, showChevron: boolean, showOnlyInDebug: boolean) {
-        let shouldShow = !showOnlyInDebug || (showOnlyInDebug && this.state.isDebugUnlocked);
+    getCardItem({item}: Object) {
+        let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked);
         if (shouldShow) {
             return (
                 <CardItem button
-                          onPress={onPressCallback}>
+                          onPress={item.onPressCallback}>
                     <Left>
-                        <CustomMaterialIcon icon={icon}/>
-                        <Text>{text}</Text>
+                        <CustomMaterialIcon icon={item.icon}/>
+                        <Text>{item.text}</Text>
                     </Left>
-                    {showChevron ?
+                    {item.showChevron ?
                         <Right>
                             <CustomMaterialIcon icon="chevron-right"
                                                 fontSize={20}/>
@@ -331,6 +323,8 @@ export default class AboutScreen extends React.Component<Props, State> {
     }
 
     getBugReportModal() {
+        const onPressMail = openWebLink.bind(this, links.bugsMail);
+        const onPressGit = openWebLink.bind(this, links.bugsGit);
         return (
             <Modalize ref={this.modalRef}
                       adjustToContentHeight
@@ -349,7 +343,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                             marginLeft: 'auto',
                             marginRight: 'auto',
                         }}
-                        onPress={() => openWebLink(links.bugsMail)}>
+                        onPress={onPressMail}>
                         <CustomMaterialIcon
                             icon={'email'}
                             color={'#fff'}/>
@@ -361,7 +355,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                             marginLeft: 'auto',
                             marginRight: 'auto',
                         }}
-                        onPress={() => openWebLink(links.bugsGit)}>
+                        onPress={onPressGit}>
                         <CustomMaterialIcon
                             icon={'git'}
                             color={'#fff'}/>
@@ -378,7 +372,7 @@ export default class AboutScreen extends React.Component<Props, State> {
         }
     }
 
-    getMainCard(item: Object) {
+    getMainCard({item}: Object) {
         switch (item.id) {
             case 'app':
                 return this.getAppCard();
@@ -401,9 +395,7 @@ export default class AboutScreen extends React.Component<Props, State> {
                     data={this.dataOrder}
                     extraData={this.state}
                     keyExtractor={(item) => item.id}
-                    renderItem={({item}) =>
-                        this.getMainCard(item)
-                    }
+                    renderItem={this.getMainCard}
                 />
             </Container>
         );
diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js
index b4809e1..3df22a6 100644
--- a/screens/Proximo/ProximoListScreen.js
+++ b/screens/Proximo/ProximoListScreen.js
@@ -78,6 +78,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
     onSelectSortModePrice: Function;
     onSortMenuPress: Function;
     renderItem: Function;
+    onListItemPress: Function;
 
     constructor(props: any) {
         super(props);
@@ -90,6 +91,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this);
         this.onSortMenuPress = this.onSortMenuPress.bind(this);
         this.renderItem = this.renderItem.bind(this);
+        this.onListItemPress = this.onListItemPress.bind(this);
     }
 
     /**
@@ -265,7 +267,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
         );
     }
 
-    showItemDetails(item: Object) {
+    onListItemPress(item: Object) {
         this.setState({
             modalCurrentDisplayItem: item
         });
@@ -318,9 +320,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
     renderItem({item}: Object) {
         return (<ListItem
             thumbnail
-            onPress={() => {
-                this.showItemDetails(item);
-            }}
+            onPress={this.onListItemPress}
         >
             <Left>
                 <Thumbnail square source={{uri: item.image}}/>
diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js
index 932c689..b33cdd1 100644
--- a/screens/Proximo/ProximoMainScreen.js
+++ b/screens/Proximo/ProximoMainScreen.js
@@ -154,14 +154,13 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
             shouldFocusSearchBar: false,
             data: item,
         };
+        const onPress = this.props.navigation.navigate.bind(this, 'ProximoListScreen', dataToSend);
         if (item.data.length > 0) {
             return (
                 <ListItem
                     button
                     thumbnail
-                    onPress={() => {
-                        this.props.navigation.navigate('ProximoListScreen', dataToSend);
-                    }}
+                    onPress={onPress}
                 >
                     <Left>
                         <CustomMaterialIcon
diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js
index 0c7db1b..c7b4529 100644
--- a/screens/Proxiwash/ProxiwashScreen.js
+++ b/screens/Proxiwash/ProxiwashScreen.js
@@ -86,7 +86,6 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
      */
     componentDidMount() {
         super.componentDidMount();
-
         if (AsyncStorageManager.getInstance().preferences.expoToken.current !== '') {
             // Get latest watchlist from server
             NotificationsManager.getMachineNotificationWatchlist((fetchedList) => {
@@ -245,13 +244,14 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
     showAlert(title: string, item: Object, isDryer: boolean) {
         let buttons = [{text: i18n.t("proxiwashScreen.modal.ok")}];
         let message = modalStateStrings[MACHINE_STATES[item.state]];
+        const onPress = this.setupNotifications.bind(this, item.number);
         if (MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]) {
             buttons = [
                 {
                     text: this.isMachineWatched(item.number) ?
                         i18n.t("proxiwashScreen.modal.disableNotifications") :
                         i18n.t("proxiwashScreen.modal.enableNotifications"),
-                    onPress: () => this.setupNotifications(item.number)
+                    onPress: onPress
                 },
                 {
                     text: i18n.t("proxiwashScreen.modal.cancel")
@@ -303,6 +303,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
         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');
+        const onPress = this.showAlert.bind(this, machineName, item, isDryer);
         return (
             <Card style={{
                 flex: 0,
@@ -327,7 +328,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
                         backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor
                     }}/>
                     <PlatformTouchable
-                        onPress={() => this.showAlert(machineName, item, isDryer)}
+                        onPress={onPress}
                         style={{
                             height: 64,
                             position: 'absolute',
diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js
index 02047a0..53b7d68 100644
--- a/screens/SettingsScreen.js
+++ b/screens/SettingsScreen.js
@@ -43,6 +43,17 @@ export default class SettingsScreen extends React.Component<Props, State> {
         startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current,
     };
 
+    onProxiwashNotifPickerValueChange: Function;
+    onStartScreenPickerValueChange: Function;
+    onToggleNightMode: Function;
+
+    constructor() {
+        super();
+        this.onProxiwashNotifPickerValueChange = this.onProxiwashNotifPickerValueChange.bind(this);
+        this.onStartScreenPickerValueChange = this.onStartScreenPickerValueChange.bind(this);
+        this.onToggleNightMode = this.onToggleNightMode.bind(this);
+    }
+
     /**
      * Get a list item using the specified control
      *
@@ -118,7 +129,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
                 mode="dropdown"
                 style={{width: 120}}
                 selectedValue={this.state.proxiwashNotifPickerSelected}
-                onValueChange={(value) => this.onProxiwashNotifPickerValueChange(value)}
+                onValueChange={this.onProxiwashNotifPickerValueChange}
             >
                 <Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.never')} value="never"/>
                 <Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.5')} value="5"/>
@@ -141,7 +152,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
                 mode="dropdown"
                 style={{width: 120}}
                 selectedValue={this.state.startScreenPickerSelected}
-                onValueChange={(value) => this.onStartScreenPickerValueChange(value)}
+                onValueChange={this.onStartScreenPickerValueChange}
             >
                 <Picker.Item label={i18n.t('screens.home')} value="Home"/>
                 <Picker.Item label={i18n.t('screens.planning')} value="Planning"/>
@@ -155,7 +166,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
     /**
      * Toggle night mode and save it to preferences
      */
-    toggleNightMode() {
+    onToggleNightMode() {
         ThemeManager.getInstance().setNightMode(!this.state.nightMode);
         this.setState({nightMode: !this.state.nightMode});
         this.resetStack();
@@ -203,7 +214,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
                 <Right>
                     <CheckBox
                         checked={this.state.nightMode}
-                        onPress={() => this.toggleNightMode()}
+                        onPress={onPressCallback}
                         style={{marginRight: 20}}/>
                 </Right>
             </ListItem>
@@ -221,7 +232,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
                             <Text>{i18n.t('settingsScreen.generalCard')}</Text>
                         </CardItem>
                         <List>
-                            {this.getToggleItem(() => this.toggleNightMode(), 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
+                            {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
                             {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}
                         </List>
                     </Card>