React-native-navigation: [V2][Android] Icon image in BottomTabs too small than iOS

[dayaki]

Issue Description

The image used for bottomTabs appears smaller on Android than on iOS, iOS is displaying the ideal size of the image but on Android, it is way too small. How do I make the Android version look like the iOS version? see images below.

iOS

Android

Steps to Reproduce / Code Snippets / Screenshots

{
            stack: {
              children: [{ component: { name: "Friends" } }],
              options: {
                bottomTab: {
                  icon: require("./assets/img/friends-tab-icon.png"),
                  iconColor: "#878787",
                  selectedIconColor: "#00C040"
                }
              }
            }
          },
          { // The problematic icon
            stack: {
              children: [{ component: { name: "Map" } }],
              options: {
                bottomTab: {
                  icon: require("./assets/img/lens-tab-icon.png"),
                }
              }
            }
          },
          {
            stack: {
              children: [{ component: { name: "Notifications" } }],
              options: {
                bottomTab: {
                  icon: require("./assets/img/notification-tab-icon.png"),
                  iconColor: "#878787",
                  selectedIconColor: "#00C040"
                }
              }
            }
          }

---

Environment

• React Native Navigation version: 2.18.5
• React Native version: 0.59.8
• Platform(s) (iOS, Android, or both?): Both
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator and Device

[peresbri]

We are having the same problem. Icon size in iOS is fine but Android always small. Even tried following the documentation and adding the icons natively, but didn't work.
Did you find a workaround @dayaki ?

[dayaki]

@peresbri no workaround so far, just using it like that for now. You?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[ParshantAroras]

Why it is closed ? Have any one find any solution? . It would be appreciated

[ParshantAroras]

Why it is closed ?. Any on find any solution ? It would be appreciated .

[dooleyb1]

+1 on this issue also. Should not be closed.

[dooleyb1]

The icon on the far right below is perfectly sized on iOS (an image of 30x30 pixels). However, this is how it looks on Android.

[ParshantArora]

Please use 1x 2x 3 x images for handling this

[umkhan65]

@ParshantArora I tried doing that but still having same issue

[ParshantArora]

Just hide the tabs view( not remove) and create your custom tabbar component and use that .

[umkhan65]

@ParshantArora
icon: { uri: 'home_icon_bottom', scale: 0.1 // I have tried 1 and 3 too but still getting same size },

Still getting this

[ParshantAroras]

@umkhan65 scale: 0.1 is for ios only . Either use Custom tabs or use the following code

This piece controls opening my custom circle button component
Navigation.showOverlay({
component: {
name: 'common.AddIcon',
passProps: {},
options: {
statusBar: {},
overlay: {
interceptTouchOutside: false,
},
},
},
});

And the circle component:
...
const StyledAddButtonContainer = styled(View)`
position: absolute;
justify-content: center;
align-items: center;
left: ${screenWidth / 2 - 35};

bottom: ${getBottomSpace() ? 30 : 0};
width: 70;
height: 70;
margin: auto;
; const AddIconContainer = styled(Animated.View)
background-color: 'purple';
border-radius: 50;
height: 70;
width: 70;
border-color: 'black';
border-width: 6;
justify-content: center;
align-items: center;
`;
...
render () {
return (

onPress={() => {
console.log('my thing')
}}>
style={{
transform: [{ rotate }],
}}>
solid
size={32}
name="plus"
color={GRAY_SCALE.WHITE}
/>



)
}

[barbarossusuz]

@dayaki i am facing exactly same problem, did find any workaround ? Or anyone?
React Native Navigation version: 4.0.4
React Native version: 0.61.5

[umkhan65]

@barbarossusuz my issue was really stupid. I cropped the empty space in my png to the exact size of icon. It solved my issue

[flikQ]

Did this ever get fixed as it's still occurring now. @guyca has this been reported before? Still happening in V6