my react app stack navigation

App.js

import React from "react";
import { createAppContainer, createStackNavigator, createSwitchNavigator, createDrawerNavigator, createBottomTabNavigator } from "react-navigation"
import { Vibration, Text } from 'react-native'
import Icon from '@expo/vector-icons/Ionicons'
import IconBadge from 'react-native-icon-badge'
import { FontAwesome, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'
import UserWelsomeScreen from './screens/UserWelcomeScreen/UserWelcomeScreen'
import HistoryScreen from './screens/HistoryScreen/HistoryScreen'
import HomeScreen from './screens/Home/HomeScreen'
import QrReadScreen from "./screens/QrReadScreen/QrReadScreen"
import DetailsScreen from './screens/DetailScreen/DetailScreen'
import ProfileScreen from './screens/ProfileScreen/ProfileScreen'
import LoginScreen from "./screens/LoginScreen/LoginScreen"
import { colors } from "./styles/colors"
import DrawerComponent from "./components/DrawerComponent"
import PrivacyPolicy from "./screens/Policies/PPolicyScreen"
import UseCoupon from "./screens/UseCuopon"
import ExploreScreen from "./screens/ExploreScreen/ExploreScreen"
import RestaurantProfileScreen from "./screens/RestaurantProfile"
import RegisterScreen from './screens/RegisterScreen'
import SendQrCodeScreen from './screens/sendQrCodeScreen'
import BriefingScreen from './screens/BriefingScreen/'
import configureStore from './boot/configureStore'
import { languageConstans } from './utils/languageConts'

const DURATION = 50

const store = configureStore()

const userLanguage = store.getState().userLanguage.userLanguage

const HomeTabNavigator = createBottomTabNavigator({
    Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => (
          <FontAwesome name="home" size={23} color={tintColor} />
        ),
        tabBarLabel: languageConstans[userLanguage].tabBar.HOME,
      })
    },
    ExploreScreen: {
      screen: ExploreScreen,
      navigationOptions: () => ({
        tabBarLabel: languageConstans[userLanguage].tabBar.EXPLORE,
        tabBarIcon: ({ tintColor }) => (
          <MaterialIcons name="explore" size={23} color={tintColor} />
        ),
      })
    },
    QrReadScreen: {
      screen: QrReadScreen, 
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => (
          <MaterialCommunityIcons name="qrcode-scan" size={23} color={tintColor} />
        ),
        tabBarOnPress: ({navigation}) => {
          Vibration.vibrate(DURATION)
          navigation.navigate("QrReadScreen")
        },
        tabBarLabel: languageConstans[userLanguage].tabBar.GET_STAMP,
      })
    },
    HistoryScreen: {
      screen: HistoryScreen, 
      navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ tintColor }) => (
            <IconBadge
              MainElement={ <MaterialCommunityIcons name="history" size={23} color={tintColor} /> }
              BadgeElement={<Text style={{ color: 'white' }}>
                {navigation.state.params && navigation.state.params.unRatedQrReads ? navigation.state.params.unRatedQrReads : null}
              </Text>}
              Hidden={Object.is(navigation.state.params, undefined) || navigation.state.params.unRatedQrReads === 0}
              IconBadgeStyle={{width: 10, height: 20, position: 'absolute', top: -10, right: -20}}
          />
        ),
        tabBarLabel: languageConstans[userLanguage].tabBar.FEEDBACK,
      })
    },
    
}, {
  navigationOptions: ({ navigation }) => {
    let { routeName } = navigation.state.routes[navigation.state.index]
    switch (routeName) {
      case "ExploreScreen": 
        routeName = "Explore"
        break;
      case "QrReadScreen": 
      routeName = "Read Qr"
      break;
      case "ProfileScreen":
        routeName = "Profile"
        break
      case "HistoryScreen": 
        routeName = "History"
        break
      default: 
        // eslint-disable-next-line no-unused-expressions
        routeName
    }
    return {
      headerTitle: routeName
    }
   }
}, {
  tabBarOptions: {
    activeTintColor: colors.PINK_500,
    inactiveTintColor: colors.PINK_100
  }
})

const HomeStackNavigator = createStackNavigator({
  HomeTabNavigator,
  SendQrCodeScreen: {
    screen: SendQrCodeScreen, 
    navigationOptions: ( {navigation} ) => {
      return {
        headerTitle: "Send stamp ",
        headerBackTitle: "Back",
        headerLeft: (
          <Icon color={colors.WHITE} style={{paddingLeft: 10}} name="md-arrow-back" size={30} 
            onPress={ () => navigation.goBack()}
          />
        )
      }
    }
  },
  DetailsScreen: {
    screen: DetailsScreen,
    navigationOptions: ( {navigation} ) => {
      return {
        headerTitle: "QR Details",
        headerBackTitle: "Back",
        headerLeft: (
          <Icon color={colors.WHITE} style={{paddingLeft: 10}} name="md-arrow-back" size={30} 
            onPress={ () => navigation.goBack()}
          />
        ),
        headerRight: (
          <FontAwesome style={{paddingRight: 10}} onPress={ () => navigation.navigate("Home")} name="home" size={23} color="#ffffff" />
        )
      }
    }
  },
  UseCouponScreen: {
    screen: UseCoupon,
    navigationOptions: ( {navigation} ) => {
      return {
        headerTitle: "",
        headerBackTitle: "Back",
        headerLeft: (
          <Icon color={colors.WHITE} style={{paddingLeft: 10}} name="md-arrow-back" size={30} 
            onPress={ () => navigation.goBack()}
          />
        ), 
        headerRight: (
          <FontAwesome style={{paddingRight: 10}} onPress={ () => navigation.navigate("Home")} name="home" size={23} color="#ffffff" />
        )
      }
    }
  },
  RestaurantProfile: {
    screen: RestaurantProfileScreen,
    navigationOptions: ( {navigation} ) => {
      return {
        headerTitle: `${navigation.state.params.title}`,
        headerBackTitle: "Back",
        headerLeft: (
          <Icon color={colors.WHITE} style={{paddingLeft: 10}} name="md-arrow-back" size={30} 
            onPress={ () => navigation.goBack()}
          />
        ), 
        headerRight: (
          <FontAwesome style={{paddingRight: 10}} onPress={ () => navigation.navigate("Home")} name="home" size={23} color="#ffffff" />
        )
      }
    }
  },
  ProfileScreen: {
    screen: ProfileScreen, 
    navigationOptions: ( {navigation} ) => {
      return {
        headerTitle: `Profile`,
        headerBackTitle: "Back",
        headerLeft: (
          <Icon color={colors.WHITE} style={{paddingLeft: 10}} name="md-arrow-back" size={30} 
            onPress={ () => navigation.goBack()}
          />
        ),
      }
    }
  },
}, 
{
  
  defaultNavigationOptions: ({ navigation }) => ({
      headerLeft: (
        <Icon color={colors.WHITE} style={{paddingLeft: 10}} name="md-menu" size={30} 
          onPress={ () => navigation.openDrawer()}
        />
      ),
      headerStyle: {
        backgroundColor: colors.PINK_500,
      },
      headerTitleStyle: {
        color: colors.WHITE
      }
    })
}
)

const DrawNavigator = createDrawerNavigator({
  Home: {
    screen: HomeStackNavigator,
  }, 
  ProfileScreen: {
    screen: ProfileScreen,
    navigationOptions: {
      drawerLabel: 'Profile'
    }
  }, 
  ExploreScreen: {
    screen: ExploreScreen, 
    navigationOptions: {
      drawerLabel: 'Explore'
    }
  },
  QrReadScreen: {
    screen: QrReadScreen,
    navigationOptions: {
      drawerLabel: 'Get stamp'
    }
  },
  HistoryScreen: {
    screen: HistoryScreen,
    navigationOptions: {
      drawerLabel: 'Feedback'
    }
  },
  Briefing: {
    screen: BriefingScreen,
    navigationOptions: {
      drawerLabel: 'User guide'
    }
  }, 
  PrivacyPolicy: {
    screen: PrivacyPolicy,
    navigationOptions: {
      drawerLabel: 'Privacy Policy'
    }
  },
}, 
{
  contentComponent: props => (
    <DrawerComponent
    {...props}
     />
  ),
})

const AppSwitchNavigator = createSwitchNavigator({
  ExploreScreen: {
    screen: ExploreScreen
  },
  RegisterScreen: {
    screen: RegisterScreen,
  },
  Home: {
    screen: DrawNavigator,
  },
  UserWelsomeScreen: {
    screen: UserWelsomeScreen
  },
  DetailsScreen: {
    screen: DetailsScreen,
  },
  LoginScreen: {
    screen: LoginScreen,
  },
  UseCouponScreen: {
    screen: UseCoupon
  }
}, 
{
  initialRouteName: "ExploreScreen"
})

const App = createAppContainer(AppSwitchNavigator);

export default App