I'm trying to integrate my BottomTabNavigator into my StackNavigator

Question

I have a stack navigator for navigating to any screen needed. But I also have a tab navigator with only four screens on it.

I would like to have the Tab Navigator appear on every screen other than the login and the create screens.

I've tried lots of variations of combining these but none seem to work

const stackNav = createStackNavigator({
  Login: {
    screen: LoginScreen
  },
  Scan: {
    screen: ScanScreen
  },
  Search: {
    screen: SearchScreen
  },
  Product: {
    screen: ProductScreen
  },
  Create: {
    screen: CreateScreen
  },
  Home: {
    screen: HomeScreen
  },
  Profile: {
    screen: ProfileScreen
  }
}, {
  headerMode: 'none',
  defaultNavigationOptions: {
    gesturesEnabled: false
  }
})

const tabNav = createBottomTabNavigator({
  HomeTab: {
    screen: HomeScreen,
  },
  ScanTab: {
    screen: ScanScreen,
  },
  SearchTab: {
    screen: SearchScreen,
  },
  ProfileTab: {
    screen: ProfileScreen,
  }
})


export default createAppContainer(stackNav)

Answer 1

Add Tab Navigator stack in Main Stack where your all other screens will be available. So that you can easily navigate to those screens.

const tabNav = createBottomTabNavigator({
  HomeTab: {
    screen: HomeScreen,
  },
  ScanTab: {
    screen: ScanScreen,
  },
  SearchTab: {
    screen: SearchScreen,
  },
  ProfileTab: {
    screen: ProfileScreen,
  }
})

const stackNav = createStackNavigator({
  Login: {
    screen: LoginScreen
  },
  Create: {
    screen: CreateScreen
  },
  // Tab Navigator screens 
  Home: { 
    screen : tabNav 
  }
}, 
{
   headerMode: 'none',
   defaultNavigationOptions: {
   gesturesEnabled: false
}}
);

export default createAppContainer(stackNav)