Why does max-height or min-height not work?

[hanancs]

I like to vary the styles according to the height of the device. Let me know how to handle it in your dependency.

[mgntr-mauro-fernandez]

@hanancs did you solve this? I'm having the same issue. I'm applying different font size and they are not working on responsive web

[hanancs]

@mgntr-mauro-fernandez I recommend you to use following package react-native-extended-stylesheet

If you go with the package I suggested above, then you can set the media queries like we used to do on vanila CSS.

'@media (min-height: 500) and (max-height: 699px)': {
      marginTop: '15%'
},

[kasinskas]

Hi @mgntr-mauro-fernandez, I never had to rely on min/max-height tbh, but I just did a quick test on one of my projects and it does work on web. How are you using it? Did you add dataSet prop if you're using react-native-web, or data-media if you're using regular html elements?

Screen.Recording.2022-04-05.at.21.24.43.mov

FYI, react-native-extended-stylesheet is a great package, but it's pretty heavyweight (382kb) and if I recall correctly it doesn't support dynamic style changes and requires you to manually rerender the component for styles to switch on different breakpoints, which is not that big of a deal on native platforms (and react-native-media-query requires you to do the same), but on web it can become pretty slow, especially on window resize. Also, I'm not sure if it works on server-side rendering correctly without flash of unstyled (or incorrectly styled) content on initial render.

Since rnmq does style injections differently on web it avoids issues mentioned above. BUT if they aren't important for you then by all means please use react-native-extended-stylesheet as it's way more feature-rich, as this package was created solely to fulfill my specific needs (easy, SSR, fast) and is supposed to be lightweight, since I don't need or even plan to use most of the features provided by other similar dependencies.

I'll add height targeting on native platforms, since it's only a few lines of code. Was swamped with work and then completely forgot about this ticket, sorry.

[kasinskas]

Added support for height, orientation and aspect-ratio media queries on native platforms in 1.0.11.

  useWindowDimensions(); // to update mobile styles on rotation. not needed for web

  const { ids, styles } = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "coral",
      "@media (min-height: 400px) and (max-height: 500px)": {
        backgroundColor: "teal",
      },
    },
    text: {
      "@media (orientation: landscape)": {
        color: "white",
      },
    },
  });

  return (
    <View style={styles.container} dataSet={{ media: ids.container }}>
      <Text style={styles.text} dataSet={{ media: ids.text }}>react-native-media-query</Text>
    </View>
  );

Screen.Recording.2022-04-09.at.18.49.49.mov