moderateScale not working for hamburger stack across iOS devices and versions

[Daniel Cortes]

I have a React Native mobile application that has a hamburger stack with three bars implemented like so:

import React from "react";
import { TouchableOpacity, StyleSheet, Platform, Text } from "react-native";
import Icon from "react-native-vector-icons/MaterialIcons";
import PropTypes from "prop-types";
import { v2Colors } from "theme";
import { moderateScale } from "react-native-size-matters";

const HamburgerButton = ({ onPress }) => (
  <TouchableOpacity onPress={onPress} style={styles.button}>
    <Icon
      size={moderateScale(Platform.OS === "ios" ? 22 : 25, 0.1)}
      color={v2Colors.white}
      name={Platform.OS === "ios" ? "format-list-bulleted" : "menu"}
    />
  </TouchableOpacity>
);

Is there something obviously wrong with this implementation of moderateScale() that will not work across iPhone 8, iPhone X, iPad and so on? So what is happening is that on some screens such as iPhone X we get the three hamburger stack bars, but on iPhone 8 and certain iPad devices, we only get two solid bars.

[Nir Hadassi]

Is it possible that the container has a fixed size while the icon size is using moderateScale?
My guess is that on big devices the icon scales up (like it should), white the TouchableOpacity container (using styles.button) stays the same, causing the icon to get cropped.

[Daniel Cortes]

@nirsky ,

would this confirm your theory?

<TouchableOpacity onPress={onPress} style={styles.button}>
    <Icon
      size={moderateScale(Platform.OS === "ios" ? 22 : 25, 0.1)}
      color={v2Colors.white}
      name={Platform.OS === "ios" ? "format-list-bulleted" : "menu"}
    />
  </TouchableOpacity>
);

HamburgerButton.propTypes = {
  onPress: PropTypes.func.isRequired
};

const styles = StyleSheet.create({
  button: {
    marginLeft: 18,
    paddingRight: 20,
    ...Platform.select({
      ios: {
        paddingVertical: moderateScale(16, -0.2)
      }
    })
  }
});

If so, any recommendations on how this should have or can be refactored? Is it even necessary to have paddingVertical in styles.button?

[Nir Hadassi]

It's hard for me to say, there's not enough context.
It's a game at trial and error.. Also it's possible the parent container of the TouchableOpacity is causing the crop.
Anyway I'm closing this issue as this is an issue with the usage and not with the library itself - there isn't any special case in this lib when handling hamburger stack.

[Daniel Cortes]

@nirsky , thats fair, no worries, at least this gives me an idea of how to proceed, thank you for your quick response on the matter.