Removed other arrow functions for increased performance

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();

components/BaseContainer.js

@@ -46,26 +46,35 @@ 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() {
-     * 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) => {
+            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 ||
@@ -78,15 +87,19 @@ export default class BaseContainer extends React.Component<Props, State> {
             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',
+            this.onWillFocus
+        );
         this.willBlurSubscription = this.props.navigation.addListener(
             'willBlur',
-            () => {
+            this.onWillBlur
-                if (this.props.enableRotation)
-                    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
-            }
         );
     }
 

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);
         }
     }
 

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')}

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) => {
+                .then(this.onFetchSuccess)
-                    this.setState({
+                .catch(this.onFetchError);
-                        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]);
-                });
         }
     }
 

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) {
+    onListItemPress(route: string) {
-        if (item.link !== undefined)
+        this.props.navigation.navigate(route);
-            Linking.openURL(item.link).catch((err) => console.error('Error opening link', err));
-        else
-            this.navigateToScreen(item.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 (

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,45 +69,42 @@ 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();
         }
     }
 
-    getWebview(obj: Object) {
+    onOpenWebLink() {
+        this.openWebLink(this.props.data[0]['url'])
+    }
+
+    onWebviewRef(ref: WebView) {
+        this.webviewArray.push(ref)
+    }
+
+    getRenderLoading() {
         return (
-            <WebView
-                ref={ref => (this.webviewArray.push(ref))}
-                source={{uri: obj['url']}}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                }}
-                startInLoadingState={true}
-                injectedJavaScript={obj['customJS']}
-                javaScriptEnabled={true}
-                renderLoading={() =>
             <View style={{
                 backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
                 position: 'absolute',
@@ -106,7 +118,22 @@ export default class WebViewScreen extends React.Component<Props> {
             }}>
                 <Spinner/>
             </View>
+        );
     }
+
+    getWebview(obj: Object) {
+        return (
+            <WebView
+                ref={this.onWebviewRef}
+                source={{uri: obj['url']}}
+                style={{
+                    width: '100%',
+                    height: '100%',
+                }}
+                startInLoadingState={true}
+                injectedJavaScript={obj['customJS']}
+                javaScriptEnabled={true}
+                renderLoading={this.getRenderLoading}
             />
         );
     }
@@ -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.onGoBackWebview, 'chevron-left')}
-                                {this.getHeaderButton(() => this.goForwardWebview(), 'chevron-right')}
+                                {this.getHeaderButton(this.onGoForwardWebview, 'chevron-right')}
                             </View>
                         </Right>
                     </Footer> : <View/>}

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}) =>
+                    renderItem={this.getCardItem}
-                        this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
-                    }
                 />
             </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}) =>
+                    renderItem={this.getCardItem}
-                        this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
-                    }
                 />
                 <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}) =>
+                    renderItem={this.getCardItem}
-                        this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
-                    }
                 />
             </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}) =>
+                    renderItem={this.getCardItem}
-                        this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
-                    }
                 />
             </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) {
+    getCardItem({item}: Object) {
-        let shouldShow = !showOnlyInDebug || (showOnlyInDebug && this.state.isDebugUnlocked);
+        let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked);
         if (shouldShow) {
             return (
                 <CardItem button
-                          onPress={onPressCallback}>
+                          onPress={item.onPressCallback}>
                     <Left>
-                        <CustomMaterialIcon icon={icon}/>
+                        <CustomMaterialIcon icon={item.icon}/>
-                        <Text>{text}</Text>
+                        <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}) =>
+                    renderItem={this.getMainCard}
-                        this.getMainCard(item)
-                    }
                 />
             </Container>
         );

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={() => {
+            onPress={this.onListItemPress}
-                this.showItemDetails(item);
-            }}
         >
             <Left>
                 <Thumbnail square source={{uri: item.image}}/>

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={() => {
+                    onPress={onPress}
-                        this.props.navigation.navigate('ProximoListScreen', dataToSend);
-                    }}
                 >
                     <Left>
                         <CustomMaterialIcon

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',

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>