createBottomTabNavigator in react native have a small clickable zone

My problem is with a bottom bar navigation that I created for a react native app. All the tabs work fine and navigate correctly, but when i click in another tab ( the third one for example), the clickable zone for the previous tabs is reduced. I need to click a small area in the corner of the tab .

My code for bottom bar :

const tabNav = createBottomTabNavigator({
  test: {
    screen: test,
    navigationOptions: {
      tabBarLabel: "Home",
      tabBarIcon: ({ tintColor, navigation }) => (
        <Ionicons name="ios-home" color={tintColor} size={25} />
      )
    }
  },

  FlashNews: {
    screen: FlashNews,
    navigationOptions: {
      tabBarLabel: "Flash News",
      tabBarIcon: ({ tintColor }) => (
        <Entypo name="flash" color="#000000" size={25} />
      )
    }
  },
  favoris: {
    screen: favoris,
    navigationOptions: {
      tabBarLabel: "Favoris",
      tabBarIcon: ({ tintColor }) => (
        <FontAwesome5 name="heart" size={25} color="#6f6f6f" />
      )
    }
  },

  CodePromo: {
    screen: CodePromo,
    navigationOptions: {
      tabBarLabel: "Code Promo",
      tabBarIcon: ({ tintColor }) => (
        <MaterialCommunityIcons name="barcode" size={25} />
      )
    }
  }
});

the bottomNvigator work togther with drawer navigator , my code is :

const DrawerStackECommerce = createDrawerNavigator(
  {
    tabNav: { screen: tabNav },
    //ECommerceMenu: { screen: ECommerceMenu },
    ECommerceAddress: { screen: ECommerceAddress },
    PrixNeuf: {
      screen: PrixNeuf
    },

    AnnonceChild: {
      screen: AnnonceChild,
      navigationOptions: ({ navigation }) => ({
        header: null,
        tabBarVisible: false,
        headerMode: "screen"
      })
    },
    BlogChild: {
      screen: BlogChild,
      navigationOptions: ({ navigation }) => ({
        header: null,
        tabBarVisible: false,
        headerMode: "screen"
      })
    },

    webV: {
      screen: webV,
      navigationOptions: ({ navigation }) => ({
        header: null,
        tabBarVisible: false,
        headerMode: "screen"
      })
    },
    BlogChild: {
      screen: BlogChild,
      navigationOptions: ({ navigation }) => ({
        header: null,
        tabBarVisible: false,
        headerMode: "screen"
      })
    },

    ECommerceChangePassword: { screen: ECommerceChangePassword },

    //PrixNeuf : {screen : PrixNeuf},
    MonCompte: { screen: MonCompte },
    ECommerceMyInformation: { screen: ECommerceMyInformation },
    ECommerceNotification: { screen: ECommerceNotification },
    email: { screen: email },
    Search: { screen: Search },
    SearchPrix: { screen: SearchPrix },
    ECommerceLogin: { screen: ECommerceLogin },
    ECommerceForgotPassword: { screen: ECommerceForgotPassword },
    ECommerceResetPassword: { screen: ECommerceResetPassword },
    ECommerceEditInformation: { screen: ECommerceEditInformation },

    //AnnonceDetails: { screen: AnnonceDetails },
    AddAnnonce: { screen: AddAnnonce },
    //BlogDetails: { screen: BlogDetails },
    //Annonces: { screen: Annonces },
    maps: { screen: maps },
    pdf: { screen: pdf }
  },
  {
    gesturesEnabled: false,
    contentComponent: WooCommerceSideMenu
  }
);

So when i am in the third section in bottom navigator for example, like in this image, to return to home I need to click to the top left of icon home in a small area.

Please can you help me to solve my problem to make all the area zone of home icon clickable , and to understand why i face this problem .

thank you for your help.