React-native issue with icons in android Wix-Navigation, working Fine in iOS

Question

There is an issue with showing icons in ios is showing properly but in android, the size is decreased, I am using Wix navigation in react-native all other icons show perfect in both platform but that icon who is added in navigation having the issue

Here is a code for bottom tabs

 const HomeIcon = require("../assets/images/tabs/home_off.png");
  const HomeIconSelected = require("../assets/images/tabs/home_on.png");

  const HomeIconx = require("../assets/images/home_off.png");
  const HomeIconSelectedx = require("../assets/images/home_on.png");

  const MessageIcon = require("../assets/images/tabs/chat_off.png");
  const MessageIconSelected = require("../assets/images/tabs/chat_on.png");

  const MessageIconx = require("../assets/images/chat_off.png");
  const MessageIconSelectedx = require("../assets/images/chat_on.png");

  const PostIcon = require("../assets/images/tabs/edit.png");
  const PostIconSelected = require("../assets/images/tabs/edit.png");

  const PostIconx = require("../assets/images/edit_home.png");
  const PostIconSelectedx = require("../assets/images/edit_home.png");

  const ProfileIcon = require("../assets/images/tabs/profile_off.png");
  const ProfileIconSelected = require("../assets/images/tabs/profile_on.png");

  const ProfileIconx = require("../assets/images/profile_off.png");
  const ProfileIconSelectedx = require("../assets/images/profile_on.png");

  const NotiIcon = require("../assets/images/tabs/notificatin_off.png");
  const NotiIconSelected = require("../assets/images/tabs/notificatin_on.png");

  const NotiIconx = require("../assets/images/notificatin_off.png");
  const NotiIconSelectedx = require("../assets/images/notificatin_on.png");
  Navigation.setRoot({
    root: {
      id: "root",
      sideMenu: {
        id: "leftSideMenu",
        left: leftSideMenu("leftSideMenu", theme),
        center: {
          bottomTabs: {
            appStyle: {
              forceTitlesDisplay: true,
            },
            titleDisplayMode: "alwaysShow",
            id: "bottomTabs",
            children: [
              {
                stack: zeroTabStack(
                  Platform.OS == "ios" ? HomeIcon : HomeIconx,
                  Platform.OS == "ios" ? HomeIconSelected : HomeIconSelectedx,
                  theme
                ),
              },
              {
                stack: firstTabStack(
                  Platform.OS == "ios" ? MessageIcon : MessageIconx,
                  Platform.OS == "ios"
                    ? MessageIconSelected
                    : MessageIconSelectedx,
                  theme
                ),
              },
              {
                stack: secondTabStack(
                  Platform.OS == "ios" ? PostIcon : PostIconx,
                  Platform.OS == "ios" ? PostIconSelected : PostIconSelectedx,
                  theme
                ),
              },
              {
                stack: thirdTabStack(
                  Platform.OS == "ios" ? ProfileIcon : ProfileIconx,
                  Platform.OS == "ios"
                    ? ProfileIconSelected
                    : ProfileIconSelectedx,
                  theme
                ),
              },
              {
                stack: fourthTabStack(
                  Platform.OS == "ios" ? NotiIcon : NotiIconx,
                  Platform.OS == "ios" ? NotiIconSelected : NotiIconSelectedx,
                  theme
                ),
              },
            ],
          },
        },
      },
    },
  });

code for Navigation Header

component: {
                        name: TERM_AND_CONDITIONS,
                        passProps: {
                          name: "Settings",
                        },
                        options: {
                          topBar: {
                            title: {
                              text: "Terms And Conditions",
                              alignment: "center",
                              color: color.text_color,
                              fontFamily:
                                Platform.OS === "ios"
                                  ? "Roboto-Medium"
                                  : "RobotoRegular",
                            },
                            background: { color: color.background },

                            backButton: {
                              icon: Images.back,
                              showTitle: "hide",
                              color: color.text_color,
                            },
                            visible: true,
                          },
                          bottomTabs: {
                            backgroundColor:
                              props.theme && props.theme === "dark"
                                ? "#000"
                                : "#fff",
                          },
                        },
                      },

iOS

Android

Answer 1

It seems like the title text on Android is rendered by default, even if it's not provided. I solved it by setting titleDisplayMode: 'alwaysHide'

Navigation.setRoot({
    root: {
      bottomTabs: {
        children: [...],
        options: {
          bottomTabs: {
            titleDisplayMode: 'alwaysHide',
          },
        },
      },
    },
  })