Fixed android back button behavior

src/screens/auth/login/Login.tsx

@@ -5,7 +5,6 @@ import {
   BackHandler,
   Keyboard,
   KeyboardAvoidingView,
-  NativeEventSubscription,
   ScrollView,
   TextInput,
   TouchableOpacity
@@ -53,7 +52,6 @@ export default class Login extends BaseScreen<Props, State> {
   public props: Props;
   private tenants: TenantConnection[] = [];
   private passwordInput: TextInput;
-  private backHandler: NativeEventSubscription;
   private formValidationDef = {
     tenantSubDomain: {
       presence: {
@@ -114,8 +112,6 @@ export default class Login extends BaseScreen<Props, State> {
 
   public async componentDidMount() {
     await super.componentDidMount();
-    // Bind the back button to the onBack method (Android)
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBack.bind(this));
     let email = (this.state.email = '');
     let password = (this.state.password = '');
     let tenant: TenantConnection;
@@ -174,8 +170,6 @@ export default class Login extends BaseScreen<Props, State> {
 
   public async componentDidFocus() {
     super.componentDidFocus();
-    // Bind the back button to the onBack method (Android)
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBack.bind(this));
     const tenantSubDomain = Utils.getParamFromNavigation(this.props.route, 'tenantSubDomain', this.state.tenantSubDomain);
     // Check if current Tenant selection is still valid (handle delete tenant usee case)
     if (tenantSubDomain) {
@@ -202,18 +196,6 @@ export default class Login extends BaseScreen<Props, State> {
     }
   }
 
-  public componentWillUnmount() {
-    super.componentWillUnmount();
-    // Unbind the back button and reset its default behavior (Android)
-    this.backHandler.remove();
-  }
-
-  public componentDidBlur() {
-    super.componentDidBlur();
-    // Unbind the back button and reset its default behavior (Android)
-    this.backHandler.remove();
-  }
-
   public async checkAutoLogin(tenant: TenantConnection, email: string, password: string) {
     // Check if user can be logged
     if (
@@ -290,7 +272,7 @@ export default class Login extends BaseScreen<Props, State> {
     }
   };
 
-  public onBack(): boolean {
+  public onBack = (): boolean => {
     BackHandler.exitApp();
     return true;
   }

src/screens/auth/reset-password/ResetPassword.tsx

@@ -92,10 +92,6 @@ export default class ResetPassword extends BaseScreen<Props, State> {
     this.centralServerProvider.setAutoLoginDisabled(true);
   }
 
-  public recaptchaResponseToken = (captcha: string) => {
-    this.setState({ captcha });
-  };
-
   public resetPassword = async () => {
     // Check field
     const formIsValid = Utils.validateInput(this, this.formValidationDef);
@@ -148,13 +144,6 @@ export default class ResetPassword extends BaseScreen<Props, State> {
     }
   };
 
-  public onBack = (): boolean => {
-    // Back mobile button: Force navigation
-    this.props.navigation.navigate('Login');
-    // Do not bubble up
-    return true;
-  };
-
   public render() {
     const style = computeStyleSheet();
     const formStyle = computeFormStyleSheet();

src/screens/auth/retrieve-password/RetrievePassword.tsx

@@ -134,13 +134,6 @@ export default class RetrievePassword extends BaseScreen<Props, State> {
     }
   };
 
-  public onBack = () => {
-    // Back mobile button: Force navigation
-    this.props.navigation.navigate('Login');
-    // Do not bubble up
-    return true;
-  };
-
   public render() {
     const style = computeStyleSheet();
     const formStyle = computeFormStyleSheet();

src/screens/base-screen/BaseScreen.tsx

@@ -6,7 +6,7 @@ import CentralServerProvider from '../../provider/CentralServerProvider';
 import ProviderFactory from '../../provider/ProviderFactory';
 import SecurityProvider from '../../provider/SecurityProvider';
 import BaseProps from '../../types/BaseProps';
-import { BackHandler, NativeEventSubscription } from 'react-native';
+import { AppState, AppStateStatus, BackHandler, NativeEventSubscription } from 'react-native';
 
 export interface Props extends BaseProps {}
 
@@ -21,6 +21,7 @@ export default class BaseScreen<P, S> extends React.Component<Props, State> {
   private componentFocusUnsubscribe: () => void;
   private componentBlurUnsubscribe: () => void;
   backHandler: NativeEventSubscription;
+  appStateUnsubscribe: NativeEventSubscription;
 
   public constructor(props: Props) {
     super(props);
@@ -38,7 +39,9 @@ export default class BaseScreen<P, S> extends React.Component<Props, State> {
     // Add listeners
     this.componentFocusUnsubscribe = this.props.navigation.addListener('focus', this.componentDidFocus.bind(this));
     this.componentBlurUnsubscribe = this.props.navigation.addListener('blur', this.componentDidBlur.bind(this));
+    // Bind the back button to the onBack method (Android)
     this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBack.bind(this));
+    this.appStateUnsubscribe = AppState.addEventListener('change', (nextAppState) => this.onAppStateChange(nextAppState));
     // Ok
     this.mounted = true;
   }
@@ -47,7 +50,10 @@ export default class BaseScreen<P, S> extends React.Component<Props, State> {
     this.mounted = false;
     this.componentFocusUnsubscribe?.();
     this.componentBlurUnsubscribe?.();
+    // Unbind the back button and reset its default behavior (Android)
     this.backHandler.remove();
+    // Unsubscribe from App State change event.
+    this.appStateUnsubscribe?.remove();
   }
 
   public setHeaderComponent(headerComponent: HeaderComponent) {
@@ -60,6 +66,12 @@ export default class BaseScreen<P, S> extends React.Component<Props, State> {
     }
   }
 
+  public onAppStateChange(nextAppState: AppStateStatus): void {
+    if(AppState.currentState.match(/inactive|background/) && nextAppState === 'active') {
+      this.componentDidFocus();
+    }
+  }
+
   public getHeaderComponent(): HeaderComponent {
     return this.headerComponent;
   }
@@ -84,10 +96,12 @@ export default class BaseScreen<P, S> extends React.Component<Props, State> {
   }
 
   public componentDidFocus(): void {
+    // Bind the back button to the onBack method (Android)
     this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBack.bind(this));
   }
 
   public componentDidBlur(): void {
+    // Unbind the back button and reset its default behavior (Android)
     this.backHandler.remove();
   }
 }

src/screens/cars/Cars.tsx

@@ -71,6 +71,7 @@ export default class Cars extends SelectableList<Car> {
   }
 
   public async componentDidFocus() {
+    super.componentDidFocus();
     Orientation.lockToPortrait();
     this.setState({ refreshing: true });
     await this.refresh();

src/screens/charging-stations/list/ChargingStations.tsx

@@ -1,7 +1,7 @@
 import I18n from 'i18n-js';
 import { Container, Icon, Spinner, View } from 'native-base';
 import React from 'react';
-import { BackHandler, Image, ImageStyle, NativeEventSubscription, Platform, ScrollView, Text, TouchableOpacity } from 'react-native';
+import { BackHandler, Image, ImageStyle, Platform, ScrollView, Text, TouchableOpacity } from 'react-native';
 import { ClusterMap } from 'react-native-cluster-map';
 import { Location } from 'react-native-location';
 import { Marker, Region } from 'react-native-maps';
@@ -94,24 +94,19 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
     this.parent?.setOptions({
       swipeEnabled: !this.siteArea
     });
-    // Bind the back button to the onBack method (Android)
-    //this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBack.bind(this));
     this.refresh();
   }
 
   public componentWillUnmount() {
     super.componentWillUnmount();
-    // Unbind the back button and reset its default behavior (Android)
-    this.backHandler.remove();
     // Disable swipe for opening sidebar
     this.parent?.setOptions({
       swipeEnabled: false
     });
   }
 
   public componentDidFocus(): void {
-    // Bind the back button to the onBack method (Android)
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBack.bind(this));
+    super.componentDidFocus();
     this.refresh();
     // Enable swipe for opening sidebar
     this.parent?.setOptions({
@@ -120,8 +115,7 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
   }
 
   public componentDidBlur(): void {
-    // Unbind the back button and reset its default behavior (Android)
-    this.backHandler.remove();
+    super.componentDidBlur();
     // Disable swipe for opening sidebar
     this.parent?.setOptions({
       swipeEnabled: false
@@ -365,7 +359,6 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
       refreshing,
       satelliteMap
     } = this.state;
-    const mapIsDisplayed = showMap && !Utils.isEmptyArray(this.state.chargingStations);
     const chargingStationsWithGPSCoordinates = chargingStations.filter((chargingStation) =>
       Utils.containsGPSCoordinates(chargingStation.coordinates)
     );
@@ -416,7 +409,7 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
               onFilterChanged={(newFilters: ChargingStationsFiltersDef) => this.filterChanged(newFilters)}
               ref={(chargingStationsFilters: ChargingStationsFilters) => this.setScreenFilters(chargingStationsFilters)}
             />
-            {mapIsDisplayed ? (
+            {showMap ? (
               <View style={style.map}>
                 {this.currentRegion && (
                   <ClusterMap

src/screens/payment-methods/PaymentMethods.tsx

@@ -72,6 +72,7 @@ export default class PaymentMethods extends SelectableList<BillingPaymentMethod>
   }
 
   public async componentDidFocus() {
+    super.componentDidFocus();
     this.setState({ refreshing: true });
     await this.refresh();
   }

src/types/requests/HTTPTransactionRequest.ts

@@ -0,0 +1,4 @@
+
+export interface HttpTransactionRequest {
+  WithCar?: boolean;
+}