I have a react native application in which I on the tab bar I am displaying an image as my tab bar icon. The issue is that it displays completely fine on the android simulator but when I run the same app on a real device the tab bar icon (which is a static image) is showing.
Here is the code snippet that I am using

<Tab.Screen
          name="NFT Market"
          component={NftMarketplace}
          options={{
            headerShown: false,
            tabBarHideOnKeyboard: true,
            tabBarIcon: ({focused}) => (
              <View
                style={{
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Image
                  source={customIcons.nftmaketplace}
                  resizeMode="contain"
                  style={{
                    width: 50,
                    height: 50,
                  }}
                />
              </View>
            ),
            tabBarButton: props => <CustomTabbarButtom {...props} />,
          }}
        />

Following is the CustomTabbarButtom

const CustomTabbarButtom = ({children, onPress}) => {
  return (
    <TouchableOpacity onPress={onPress} style={styles.customTabbarButtom}>
      <View style={styles.view__customTabbarButtom}>{children}</View>
    </TouchableOpacity>
  );
};

Here the Image source customIcons.nftmaketplace is a static image I have imported at the top of my file.