fix(core): common navigation issues

src/app.component.tsx

@@ -10,7 +10,7 @@ import {
 } from './core/appLoader/applicationLoader.component';
 import { Router } from './core/navigation/routes';
 import { trackScreenTransition } from './core/utils/analytics';
-import { getCurrentStateName } from './core/navigation/routeUtil';
+import { getCurrentStateName } from './core/navigation/util';
 import {
   ThemeContext,
   ThemeContextType,

src/components/common/layoutMenu/layoutMenu.component.tsx

@@ -32,8 +32,32 @@ export type LayoutMenuProps = ThemedComponentProps & ComponentProps;
 type ChildElement = React.ReactElement<TabProps>;
 type ChildrenProp = ChildElement | ChildElement[];
 
+interface TabLoadingMap {
+  [key: string]: boolean;
+}
+
 class LayoutMenuComponent extends React.Component<LayoutMenuProps> {
 
+  private tabLoadingMap: TabLoadingMap;
+
+  constructor(props: LayoutMenuProps) {
+    super(props);
+    this.tabLoadingMap = this.createTabLoadingMap(props.selectedIndex);
+  }
+
+  public componentWillUpdate(nextProps: LayoutMenuProps) {
+    const nextLoadingMap: TabLoadingMap = this.createTabLoadingMap(nextProps.selectedIndex);
+    this.tabLoadingMap = { ...this.tabLoadingMap, ...nextLoadingMap };
+  }
+
+  private shouldLoadTabContentElement = (index: number): boolean => {
+    return this.tabLoadingMap[`${index}`];
+  };
+
+  private createTabLoadingMap = (selectedIndex: number): TabLoadingMap => {
+    return { [`${selectedIndex}`]: true };
+  };
+
   private onItemPress = (index: number) => {
     this.props.onItemPress(index);
   };
@@ -43,7 +67,9 @@ class LayoutMenuComponent extends React.Component<LayoutMenuProps> {
 
     return (
       <ThemeProvider theme={{ ...this.props.theme, ...themes['App Theme'] }}>
-        <TabView {...restProps}>
+        <TabView
+          shouldLoadComponent={this.shouldLoadTabContentElement}
+          {...restProps}>
           <Tab icon={GridIconOutline}>
             <LayoutGridList
               style={themedStyle.listContainer}

src/components/messaging/chat.header.tsx

@@ -74,22 +74,22 @@ class ChatHeaderComponent extends React.Component<ChatHeaderProps> {
   };
 
   private renderInterlocutorProps = (): TopNavigationProps | null => {
-    const { interlocutor } = this.props;
+    const { interlocutor, lastSeen } = this.props;
 
     return interlocutor && {
       title: `${interlocutor.firstName} ${interlocutor.lastName}`,
+      subtitle: `Last seen ${lastSeen}`,
       rightControls: this.renderRightControls(),
     };
   };
 
   public render(): React.ReactNode {
-    const { themedStyle, lastSeen } = this.props;
+    const { themedStyle, interlocutor } = this.props;
 
     return (
       <SafeAreaView style={themedStyle.container}>
         <TopNavigation
           alignment='center'
-          subtitle={`Last seen ${lastSeen}`}
           leftControl={this.renderLeftControl()}
           {...this.renderInterlocutorProps()}
         />

src/containers/layouts/articles/container/articles.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { Articles } from './articles.component';
 import { routes } from './routes';
+import { navigateAction } from '@src/core/navigation';
 
 interface State {
   selectedLayoutIndex: number;
@@ -22,7 +23,7 @@ export class ArticlesContainer extends React.Component<NavigationScreenProps, St
   private onItemSelect = (index: number) => {
     const { [index]: selectedItem } = this.data;
 
-    this.props.navigation.navigate(selectedItem.route);
+    this.props.navigation.dispatch(navigateAction(selectedItem.route));
   };
 
   public render(): React.ReactNode {

src/containers/layouts/auth/container/auth.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { Auth } from './auth.component';
 import { routes } from './routes';
+import { navigateAction } from '@src/core/navigation';
 
 interface State {
   selectedLayoutIndex: number;
@@ -22,7 +23,7 @@ export class AuthContainer extends React.Component<NavigationScreenProps, State>
   private onItemSelect = (index: number) => {
     const { [index]: selectedItem } = this.data;
 
-    this.props.navigation.navigate(selectedItem.route);
+    this.props.navigation.dispatch(navigateAction(selectedItem.route));
   };
 
   public render(): React.ReactNode {

src/containers/layouts/auth/signIn1/signIn1.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { SignInForm1Data } from '@src/components/auth';
 import { SignIn1 } from './signIn1.component';
+import { navigateAction } from '@src/core/navigation';
 
 export class SignIn1Container extends React.Component<NavigationScreenProps> {
 
@@ -10,7 +11,7 @@ export class SignIn1Container extends React.Component<NavigationScreenProps> {
   };
 
   private onSignUpPress = () => {
-    this.props.navigation.navigate('Sign Up 1');
+    this.props.navigation.dispatch(navigateAction('Sign Up 1'));
   };
 
   private onGooglePress = () => {

src/containers/layouts/auth/signIn2/signIn2.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { SignInForm2Data } from '@src/components/auth';
 import { SignIn2 } from './signIn2.component';
+import { navigateAction } from '@src/core/navigation';
 
 export class SignIn2Container extends React.Component<NavigationScreenProps> {
 
@@ -10,11 +11,11 @@ export class SignIn2Container extends React.Component<NavigationScreenProps> {
   };
 
   private onSignUpPress = () => {
-    this.props.navigation.navigate('Sign Up 2');
+    this.props.navigation.dispatch(navigateAction('Sign Up 2'));
   };
 
   private onForgotPasswordPress = () => {
-    this.props.navigation.navigate('Forgot Password');
+    this.props.navigation.dispatch(navigateAction('Forgot Password'));
   };
 
   public render(): React.ReactNode {

src/containers/layouts/auth/signIn3/signIn3.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { SignInForm2Data } from '@src/components/auth';
 import { SignIn3 } from './signIn3.component';
+import { navigateAction } from '@src/core/navigation';
 
 export class SignIn3Container extends React.Component<NavigationScreenProps> {
 
@@ -10,11 +11,11 @@ export class SignIn3Container extends React.Component<NavigationScreenProps> {
   };
 
   private onSignUpPress = () => {
-    this.props.navigation.navigate('Sign Up 3');
+    this.props.navigation.dispatch(navigateAction('Sign Up 3'));
   };
 
   private onForgotPasswordPress = () => {
-    this.props.navigation.navigate('Forgot Password');
+    this.props.navigation.dispatch(navigateAction('Forgot Password'));
   };
 
   public render(): React.ReactNode {

src/containers/layouts/auth/signIn4/signIn4.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { SignInForm2Data } from '@src/components/auth';
 import { SignIn4 } from './signIn4.component';
+import { navigateAction } from '@src/core/navigation';
 
 export class SignIn4Container extends React.Component<NavigationScreenProps> {
 
@@ -10,11 +11,11 @@ export class SignIn4Container extends React.Component<NavigationScreenProps> {
   };
 
   private onSignUpPress = () => {
-    this.props.navigation.navigate('Sign Up 4');
+    this.props.navigation.dispatch(navigateAction('Sign Up 4'));
   };
 
   private onForgotPasswordPress = () => {
-    this.props.navigation.navigate('Forgot Password');
+    this.props.navigation.dispatch(navigateAction('Forgot Password'));
   };
 
   private onGooglePress = () => {

src/containers/layouts/auth/signIn5/signIn5.container.tsx

@@ -5,6 +5,7 @@ import {
   SignInForm4Data,
 } from '@src/components/auth';
 import { SignIn5 } from './signIn5.component';
+import { navigateAction } from '@src/core/navigation';
 
 export class SignIn5Container extends React.Component<NavigationScreenProps> {
 
@@ -17,7 +18,7 @@ export class SignIn5Container extends React.Component<NavigationScreenProps> {
   };
 
   private onSignUpPress = () => {
-    this.props.navigation.navigate('Sign Up 4');
+    this.props.navigation.dispatch(navigateAction('Sign Up 4'));
   };
 
   public render(): React.ReactNode {

src/containers/layouts/auth/signUp1/signUp1.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { SignUpForm1Data } from '@src/components/auth';
 import { SignUp1 } from './signUp1.component';
+import { navigateAction } from '@src/core/navigation';
 
 export class SignUp1Container extends React.Component<NavigationScreenProps> {
 
@@ -10,7 +11,7 @@ export class SignUp1Container extends React.Component<NavigationScreenProps> {
   };
 
   private onSignInPress = () => {
-    this.props.navigation.navigate('Sign In 1');
+    this.props.navigation.dispatch(navigateAction('Sign In 1'));
   };
 
   private onGooglePress = () => {

src/containers/layouts/auth/signUp2/signUp2.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { SignUpForm2Data } from '@src/components/auth';
 import { SignUp2 } from './signUp2.component';
+import { navigateAction } from '@src/core/navigation';
 
 export class SignUp2Container extends React.Component<NavigationScreenProps> {
 
@@ -10,7 +11,7 @@ export class SignUp2Container extends React.Component<NavigationScreenProps> {
   };
 
   private onSignInPress = () => {
-    this.props.navigation.navigate('Sign In 2');
+    this.props.navigation.dispatch(navigateAction('Sign In 2'));
   };
 
 

src/containers/layouts/auth/signUp3/signUp3.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { SignUpForm2Data } from '@src/components/auth';
 import { SignUp3 } from './signUp3.component';
+import { navigateAction } from '@src/core/navigation';
 
 export class SignUp3Container extends React.Component<NavigationScreenProps> {
 
@@ -10,7 +11,7 @@ export class SignUp3Container extends React.Component<NavigationScreenProps> {
   };
 
   private onSignInPress = () => {
-    this.props.navigation.navigate('Sign In 3');
+    this.props.navigation.dispatch(navigateAction('Sign In 3'));
   };
 
   private onPhotoPress = () => {

src/containers/layouts/auth/signUp4/signUp4.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { SignUpForm2Data } from '@src/components/auth';
 import { SignUp4 } from './signUp4.component';
+import { navigateAction } from '@src/core/navigation';
 
 export class SignUp4Container extends React.Component<NavigationScreenProps> {
 
@@ -10,7 +11,7 @@ export class SignUp4Container extends React.Component<NavigationScreenProps> {
   };
 
   private onSignInPress = () => {
-    this.props.navigation.navigate('Sign In 4');
+    this.props.navigation.dispatch(navigateAction('Sign In 4'));
   };
 
   private onGooglePress = () => {

src/containers/layouts/dashboards/container/dashboards.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { Dashboards } from './dashboards.component';
 import { routes } from './routes';
+import { navigateAction } from '@src/core/navigation';
 
 interface State {
   selectedLayoutIndex: number;
@@ -22,7 +23,7 @@ export class DashboardsContainer extends React.Component<NavigationScreenProps,
   private onItemSelect = (index: number) => {
     const { [index]: selectedItem } = this.data;
 
-    this.props.navigation.navigate(selectedItem.route);
+    this.props.navigation.dispatch(navigateAction(selectedItem.route));
   };
 
   public render(): React.ReactNode {

src/containers/layouts/ecommerce/bookDetails/bookDetails.container.tsx

@@ -14,6 +14,7 @@ import {
   profile4,
 } from '@src/core/data/profile';
 import { BookDetails } from './bookDetails.component';
+import { navigateAction } from '@src/core/navigation';
 
 const profiles: Profile[] = [
   profile1,
@@ -37,7 +38,7 @@ export class BookDetailsContainer extends React.Component<NavigationScreenProps,
   };
 
   private onBuyBookPress = (): void => {
-    this.props.navigation.navigate('Payment');
+    this.props.navigation.dispatch(navigateAction('Payment'));
   };
 
   private onCommentReplyMorePress = (index: number) => {

src/containers/layouts/ecommerce/container/ecommerce.container.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationScreenProps } from 'react-navigation';
 import { Ecommerce } from './ecommerce.component';
 import { routes } from './routes';
+import { navigateAction } from '@src/core/navigation';
 
 interface State {
   selectedLayoutIndex: number;
@@ -22,7 +23,7 @@ export class EcommerceContainer extends React.Component<NavigationScreenProps, S
   private onItemSelect = (index: number) => {
     const { [index]: selectedItem } = this.data;
 
-    this.props.navigation.navigate(selectedItem.route);
+    this.props.navigation.dispatch(navigateAction(selectedItem.route));
   };
 
   public render(): React.ReactNode {

src/containers/layouts/ecommerce/movieDetails/movieDetails.container.tsx

@@ -3,6 +3,7 @@ import { NavigationScreenProps } from 'react-navigation';
 import { movie1 } from '@src/core/data/movie';
 import { Movie as MovieModel } from '@src/core/model';
 import { Movie } from './movieDetails.component';
+import { navigateAction } from '@src/core/navigation';
 
 interface State {
   movie: MovieModel;
@@ -18,7 +19,7 @@ export class MovieDetailsContainer extends React.Component<NavigationScreenProps
   };
 
   private onBuyTicketPress = () => {
-    this.props.navigation.navigate('Payment');
+    this.props.navigation.dispatch(navigateAction('Payment'));
   };
 
   public render(): React.ReactNode {

src/containers/layouts/ecommerce/payment/payment.container.tsx

@@ -3,6 +3,7 @@ import { NavigationScreenProps } from 'react-navigation';
 import { Payment } from './payment.component';
 import { PaymentCard } from '@src/core/model';
 import { paymentCard1 } from '@src/core/data/paymentCard';
+import { navigateAction } from '@src/core/navigation';
 
 interface State {
   paymentCards: PaymentCard[];
@@ -23,7 +24,7 @@ export class PaymentContainer extends React.Component<NavigationScreenProps> {
   };
 
   private onAddCardPress = (): void => {
-    this.props.navigation.navigate('Add New Card');
+    this.props.navigation.dispatch(navigateAction('Add New Card'));
   };
 
   public render(): React.ReactNode {

src/containers/layouts/ecommerce/rentApartment/rentApartment.container.tsx

@@ -3,6 +3,7 @@ import { NavigationScreenProps } from 'react-navigation';
 import { Apartment } from '@src/core/model';
 import { apartment1 } from '@src/core/data/apartment';
 import { RentApartment } from './rentApartment.component';
+import { navigateAction } from '@src/core/navigation';
 
 interface State {
   apartment: Apartment;
@@ -15,7 +16,7 @@ export class RentApartmentContainer extends React.Component<NavigationScreenProp
   };
 
   private onBookPress = () => {
-    this.props.navigation.navigate('Payment');
+    this.props.navigation.dispatch(navigateAction('Payment'));
   };
 
   private onPhotoPress = (index: number) => {