Fixed Android back button behavior

src/App.tsx

@@ -418,7 +418,6 @@ function createPaymentMethodsNavigator(props: BaseProps) {
 }
 
 function createAppDrawerNavigator(props: BaseProps) {
-  const appStyles = computeStyleSheet();
   return (
     <AppDrawer.Navigator
       initialRouteName="ChargingStationsNavigator"

src/components/transaction/header/TransactionHeaderComponent.tsx

@@ -2,7 +2,6 @@ import { Text, View } from 'native-base';
 import React from 'react';
 
 import I18nManager from '../../../I18n/I18nManager';
-import BaseScreen from '../../../screens/base-screen/BaseScreen';
 import BaseProps from '../../../types/BaseProps';
 import Transaction from '../../../types/Transaction';
 import Utils from '../../../utils/Utils';
@@ -16,7 +15,7 @@ export interface Props extends BaseProps {
 }
 
 interface State {}
-export default class TransactionHeaderComponent extends BaseScreen<Props, State> {
+export default class TransactionHeaderComponent extends React.Component<Props, State> {
   public state: State;
   public props: Props;
 

src/screens/auth/AuthHeader.tsx

@@ -5,7 +5,6 @@ import { Image, ImageStyle } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 
 import BaseProps from '../../types/BaseProps';
-import BaseScreen from '../base-screen/BaseScreen';
 import computeStyleSheet from './AuthStyles';
 
 export interface Props extends BaseProps {
@@ -15,15 +14,10 @@ export interface Props extends BaseProps {
 
 interface State {}
 
-export default class AuthHeader extends BaseScreen<Props, State> {
+export default class AuthHeader extends React.Component<Props, State>{
   public state: State;
   public props: Props;
 
-  // eslint-disable-next-line no-useless-constructor
-  public constructor(props: Props) {
-    super(props);
-  }
-
   public setState = (
     state: State | ((prevState: Readonly<State>, props: Readonly<Props>) => State | Pick<State, never>) | Pick<State, never>,
     callback?: () => void

src/screens/auth/login/Login.tsx

@@ -23,6 +23,7 @@ import Utils from '../../../utils/Utils';
 import BaseScreen from '../../base-screen/BaseScreen';
 import AuthHeader from '../AuthHeader';
 import computeStyleSheet from '../AuthStyles';
+import BaseAutoRefreshScreen from '../../base-screen/BaseAutoRefreshScreen';
 
 export interface Props extends BaseProps {}
 
@@ -47,7 +48,7 @@ interface State {
   showNoTenantFoundDialog: boolean;
 }
 
-export default class Login extends BaseScreen<Props, State> {
+export default class Login extends BaseAutoRefreshScreen<Props, State> {
   public state: State;
   public props: Props;
   private tenants: TenantConnection[] = [];
@@ -171,7 +172,7 @@ export default class Login extends BaseScreen<Props, State> {
   public async componentDidFocus() {
     super.componentDidFocus();
     const tenantSubDomain = Utils.getParamFromNavigation(this.props.route, 'tenantSubDomain', this.state.tenantSubDomain);
-    // Check if current Tenant selection is still valid (handle delete tenant usee case)
+    // Check if current Tenant selection is still valid (handle delete tenant use case)
     if (tenantSubDomain) {
       // Get the current Tenant
       const tenant = await this.centralServerProvider.getTenant(tenantSubDomain.toString());
@@ -272,7 +273,7 @@ export default class Login extends BaseScreen<Props, State> {
     }
   };
 
-  public onBack = (): boolean => {
+  public onBack(): boolean {
     BackHandler.exitApp();
     return true;
   }

src/screens/auth/sign-up/SignUp.tsx

@@ -214,7 +214,7 @@ export default class SignUp extends BaseScreen<Props, State> {
     }
   };
 
-  public onBack = (): boolean => {
+  public onBack(): boolean {
     // Back mobile button: Force navigation
     this.props.navigation.navigate('Login', {
       tenantSubDomain: this.state.tenantSubDomain

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 { AppState, AppStateStatus, BackHandler, NativeEventSubscription } from 'react-native';
+import { AppStateStatus, BackHandler, NativeEventSubscription } from 'react-native';
 
 export interface Props extends BaseProps {}
 
@@ -21,7 +21,6 @@ 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);
@@ -33,15 +32,15 @@ export default class BaseScreen<P, S> extends React.Component<Props, State> {
   }
 
   public async componentDidMount() {
+    const { navigation } = this.props;
     // Get providers
     this.centralServerProvider = await ProviderFactory.getProvider();
-    this.securityProvider = this.centralServerProvider.getSecurityProvider();
+    this.securityProvider = this.centralServerProvider?.getSecurityProvider();
     // Add listeners
-    this.componentFocusUnsubscribe = this.props.navigation.addListener('focus', this.componentDidFocus.bind(this));
-    this.componentBlurUnsubscribe = this.props.navigation.addListener('blur', this.componentDidBlur.bind(this));
+    this.componentFocusUnsubscribe = navigation?.addListener('focus', () => this.componentDidFocus());
+    this.componentBlurUnsubscribe = navigation?.addListener('blur', () => this.componentDidBlur());
     // 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));
+    this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => this.onBack());
     // Ok
     this.mounted = true;
   }
@@ -52,8 +51,6 @@ export default class BaseScreen<P, S> extends React.Component<Props, State> {
     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) {
@@ -67,8 +64,8 @@ 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();
+    if(nextAppState === 'active') {
+    this.componentDidFocus();
     }
   }
 
@@ -97,7 +94,7 @@ 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));
+    this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => this.onBack());
   }
 
   public componentDidBlur(): void {

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

@@ -199,7 +199,7 @@ export default class ChargingStations extends BaseAutoRefreshScreen<Props, State
     }
   };
 
-  public onBack = (): boolean => {
+  public onBack (): boolean {
     if (!this.state.showMap) {
       this.setState({ showMap: true });
       return true;

src/screens/payment-methods/stripe/StripePaymentMethodCreationForm.tsx

@@ -1,7 +1,7 @@
 import { CardField, CardFieldInput, initStripe, useConfirmSetupIntent } from '@stripe/stripe-react-native';
 import I18n from 'i18n-js';
 import { Button, CheckBox, Spinner, View } from 'native-base';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { BackHandler, Text, TouchableOpacity } from 'react-native';
 import { scale } from 'react-native-size-matters';
 import { useFocusEffect } from '@react-navigation/native';

src/screens/sidebar/SideBar.tsx

@@ -13,8 +13,10 @@ import BaseProps from '../../types/BaseProps';
 import User from '../../types/User';
 import UserToken from '../../types/UserToken';
 import Utils from '../../utils/Utils';
-import BaseScreen from '../base-screen/BaseScreen';
 import computeStyleSheet from './SideBarStyles';
+import CentralServerProvider from '../../provider/CentralServerProvider';
+import ProviderFactory from '../../provider/ProviderFactory';
+import SecurityProvider from '../../provider/SecurityProvider';
 
 export interface Props extends BaseProps {}
 
@@ -27,12 +29,18 @@ interface State {
   appVersion?: CheckVersionResponse;
 }
 
-export default class SideBar extends BaseScreen<Props, State> {
+export default class SideBar extends React.Component<Props, State> {
   public state: State;
   public props: Props;
+  private centralServerProvider: CentralServerProvider;
+  private securityProvider: SecurityProvider;
+  private componentFocusUnsubscribe: () => void;
+  private componentBlurUnsubscribe: () => void;
 
   public constructor(props: Props) {
     super(props);
+    this.componentFocusUnsubscribe = this.props.navigation?.addListener('focus', () => this.componentDidFocus());
+    this.componentBlurUnsubscribe = this.props.navigation?.addListener('blur', () => this.componentDidFocus());
     this.state = {
       userToken: null,
       tenantName: '',
@@ -50,13 +58,19 @@ export default class SideBar extends BaseScreen<Props, State> {
     super.setState(state, callback);
   };
 
-  public async componentDidMount() {
-    await super.componentDidMount();
+  public async componentDidFocus(): Promise<void> {
+    this.centralServerProvider = await ProviderFactory.getProvider();
+    this.securityProvider = this.centralServerProvider?.getSecurityProvider();
     await this.getUpdateDate();
     // Init User (delay it)
     this.refresh();
   }
 
+  public componentWillUnmount() {
+    this.componentFocusUnsubscribe?.();
+    this.componentBlurUnsubscribe?.();
+  }
+
   public refresh = async () => {
     await this.getUserInfo();
     const appVersion = await checkVersion();

src/screens/site-areas/SiteAreas.tsx

@@ -146,7 +146,7 @@ export default class SiteAreas extends BaseAutoRefreshScreen<Props, State> {
     return null;
   };
 
-  public onBack = () => {
+  public onBack () {
     // Back mobile button: Force navigation
     if (this.state.showMap) {
       this.setState({ showMap: false });

src/screens/sites/Sites.tsx

@@ -147,7 +147,7 @@ export default class Sites extends BaseAutoRefreshScreen<Props, State> {
     return null;
   };
 
-  public onBack = () => {
+  public onBack () {
     // Back mobile button: Force navigation
     if (this.state.showMap) {
       this.setState({ showMap: false });