React navigation bottom tabs not working with multiple stack navigators

Question

I am facing problem in implementing bottom navigation bar, Here is my code

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { fromLeft, fromBottom, fadeOut, fromRight } from 'react-navigation-transitions';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import constants from '../utilities/index';
import { Image, Dimensions } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';

/***************************** Routes ***************************************/
import MainScreen from '../screens/MainScreen/MainScreen';
import AuthScreen from '../screens/Auth/AuthScreen'
import Login from '../screens/Auth/Login'
import Register from '../screens/Auth/Register'
import ForgorPasswordScreen from '../screens/Auth/ForgotPasswordScreen'
import PasswordSentScreen from '../screens/Auth/PasswordSentScreen'
import PapperScreen from '../screens/Papper/PapperScreen'
import SpecialitySearch from '../screens/Speciality/SpecialitySearch'
import SpecialityNotFound from '../screens/Speciality/SpecialityNotFound'
const { width, height } = Dimensions.get('window');

const tabBasedNavigation = createBottomTabNavigator({
  Home: {
    screen: PapperScreen, navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.HomeActive : constants.images.HomeActiveInactive} />
        )
      }
    }
  },
  Booking: {
    screen: SpecialitySearch, navigationOptions: {
      tabBarLabel: 'Booking',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.BookingActive : constants.images.BookingInactive} />
        )
      }
    }
  },
  Chat: {
    screen: PapperScreen, navigationOptions: {
      tabBarLabel: 'Chat',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.ChatActive : constants.images.ChatInActive} />
        )
      }
    }
  },
  Account: {
    screen: SpecialitySearch, navigationOptions: {
      tabBarLabel: 'Account',
      tabBarIcon: ({ focused }) => {
        return (
          <Image source={focused ? constants.images.AccountActive : constants.images.AccountInActive} />
        )
      }
    }
  },
}, {
    tabBarOptions: {
      activeTintColor: constants.colors.dullYellow,
      labelStyle: {
        fontFamily: constants.fontFamily.HKGroteskRegular,
        fontSize: RFValue(12),
        marginBottom: height * 1 / 100
      },
      style: {
        height: height * 9 / 100,
      },
    }
  });

const BeforeLoginStack = createStackNavigator({
  MainScreen,
  AuthScreen,
  Login,
  Register,
  ForgorPasswordScreen,
  PasswordSentScreen,

}, {
    transitionConfig: (nav) => handleCustomTransition(nav),
    defaultNavigationOptions: {
      header: null,
    }
  });


const AfterLoginStack = createStackNavigator({
  homeTabs: tabBasedNavigation,
  PapperScreen,
  SpecialitySearch,
  SpecialityNotFound,

}, {
    transitionConfig: (nav) => handleCustomTransition(nav),
    defaultNavigationOptions: {
      header: null,
    }
  }); 


const MainNavigator = createSwitchNavigator({
  BeforeLoginStack,
  AfterLoginStack
});

const handleCustomTransition = ({ scenes }) => {
  const prevScene = scenes[scenes.length - 2];
  const nextScene = scenes[scenes.length - 1];

  // Custom transitions go there
  if (prevScene
    && prevScene.route.routeName === 'MainScreen'
    && nextScene.route.routeName === 'AuthScreen') {
    return fromBottom(500);
  } else if (prevScene
    && ( (prevScene.route.routeName === 'AuthScreen'
    && nextScene.route.routeName === 'ForgorPasswordScreen') || 
    (prevScene.route.routeName === 'ForgorPasswordScreen'
    && nextScene.route.routeName === 'PasswordSentScreen'))) {
    return fromRight(); 
  }
  return fadeOut();
}
export default createAppContainer(MainNavigator);

Problem occurs when i use multiple stackNavigators. If i use a single stack navigator then bottom navigation works. but when i put multiple multiple stack navigators then bottom navigation doesn't show.

 const MainNavigator = createSwitchNavigator({
      AfterLoginStack
    });

If i use only AfterLoginStack, Bottom navigation bar is visible. but when i place two stack navigators as below, bottom navigation doesn't show.

const MainNavigator = createSwitchNavigator({
      BeforeLoginStack,
      AfterLoginStack
    });

Please suggest solution.

score 0 · Answer 1 · answered Jun 16 '20 at 07:36

0

Your tabBasedNavigation is put inside AfterLoginStack

And if you create your SwitchNavigator like this:

const MainNavigator = createSwitchNavigator({
  BeforeLoginStack,
  AfterLoginStack
});

the initial route of your SwitchNavigator will be BeforeLoginStack, so the BottomTab inside AfterLoginStack will not be visible when the BeforeLoginStack is on screen.

You should change to this:

const MainNavigator = createSwitchNavigator({
    BeforeLoginStack,
    AfterLoginStack
}, {
    initialRouteName: 'AfterLoginStack'
});

answered Jun 16 '20 at 07:36

Brian H.

1,603
11
16

Thanks for the solution. But what it does that it takes me directly to the home screen, I want BeforeLoginStack to be displayed before i get to home screen – viney kumar Jun 16 '20 at 09:11
Any other solution? – viney kumar Jun 16 '20 at 09:12
I though your current code is already solved that? So you want display the bottomtab even in the BeforeLoginStack ? – Brian H. Jun 16 '20 at 09:21
No, I don't want to show it in BeforeLoginStack. I want to it to be displayed AfterLoginStack only. – viney kumar Jun 16 '20 at 09:29
So your problem is the bottombar is doesn't show when you entered AfterLoginStack, right ? – Brian H. Jun 16 '20 at 09:32

React navigation bottom tabs not working with multiple stack navigators

1 Answers1