navigation: Split AppWithNavigation

The component had two purposes that are now split in two components:
* handle back navigation in Android - now extracted to BackNavigationHandler
* integrate Redux with RN - kept in AppWithNavigation

src/ZulipMobile.js

@@ -8,6 +8,7 @@ import StylesProvider from './boot/StylesProvider';
 import CompatibilityChecker from './boot/CompatibilityChecker';
 import AppEventHandlers from './boot/AppEventHandlers';
 import AppDataFetcher from './boot/AppDataFetcher';
+import BackNavigationHandler from './nav/BackNavigationHandler';
 import AppWithNavigation from './nav/AppWithNavigation';
 
 require('./i18n/locale');
@@ -23,7 +24,9 @@ export default () => (
         <AppDataFetcher>
           <TranslationProvider>
             <StylesProvider>
-              <AppWithNavigation />
+              <BackNavigationHandler>
+                <AppWithNavigation />
+              </BackNavigationHandler>
             </StylesProvider>
           </TranslationProvider>
         </AppDataFetcher>

src/nav/AppWithNavigation.js

@@ -2,38 +2,19 @@
 import { connect } from 'react-redux';
 
 import React, { PureComponent } from 'react';
-import { BackHandler } from 'react-native';
 import { addNavigationHelpers } from 'react-navigation';
 import { createReduxBoundAddListener } from 'react-navigation-redux-helpers';
 
 import type { Dispatch } from '../types';
-import { getCanGoBack, getNav } from '../selectors';
+import { getNav } from '../selectors';
 import AppNavigator from './AppNavigator';
-import { navigateBack } from '../actions';
 
 type Props = {
-  canGoBack: boolean,
   dispatch: Dispatch,
   nav: Object,
 };
 
 class AppWithNavigation extends PureComponent<Props> {
-  componentDidMount() {
-    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonPress);
-  }
-
-  componentWillUnmount() {
-    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonPress);
-  }
-
-  handleBackButtonPress = () => {
-    const { canGoBack, dispatch } = this.props;
-    if (canGoBack) {
-      dispatch(navigateBack());
-    }
-    return canGoBack;
-  };
-
   render() {
     const { dispatch, nav } = this.props;
     const addListener = createReduxBoundAddListener('root');
@@ -52,5 +33,4 @@ class AppWithNavigation extends PureComponent<Props> {
 
 export default connect(state => ({
   nav: getNav(state),
-  canGoBack: getCanGoBack(state),
 }))(AppWithNavigation);

src/nav/BackNavigationHandler.js

@@ -0,0 +1,41 @@
+/* @flow */
+import { connect } from 'react-redux';
+
+import { PureComponent } from 'react';
+import { BackHandler } from 'react-native';
+
+import type { Dispatch } from '../types';
+import { getCanGoBack } from '../selectors';
+import { navigateBack } from '../actions';
+
+type Props = {
+  children?: ChildrenArray<*>,
+  canGoBack: boolean,
+  dispatch: Dispatch,
+};
+
+class BackNavigationHandler extends PureComponent<Props> {
+  componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonPress);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonPress);
+  }
+
+  handleBackButtonPress = () => {
+    const { canGoBack, dispatch } = this.props;
+    if (canGoBack) {
+      dispatch(navigateBack());
+    }
+    return canGoBack;
+  };
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default connect(state => ({
+  canGoBack: getCanGoBack(state),
+}))(BackNavigationHandler);