moderateScale not working for hamburger stack across iOS devices and versions
ldco2016 opened this issue · comments
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.
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.
@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
?
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.
@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.