maxWidth and maxHeight don't work as they should in React Native

Question

I have the following code in react native:

import { useState, useEffect } from 'react';
import { View, Text, Image, StyleSheet, Pressable } from 'react-native';
import * as colors from '../colors/index';
//Other imports..

const Message = ({ item, chatDocumentID, currentUser, navigation }) => {
  const [imageUrl, setImageUrl] = useState(null);

  useEffect(() => {
     //fetch images..
    }
  }, [item.image?.uri, chatDocumentID]);

  const styles = StyleSheet.create({
    messageContainer: {
      padding: 5,
      marginBottom: 8,
      maxWidth: '80%',
      color: 'white',
    },
    sentMessageContainer: {
      alignSelf: 'flex-end',
      backgroundColor: colors.SECONDARY,
      borderTopLeftRadius: 15,
      borderBottomStartRadius: 15,
      borderTopEndRadius: 15,
    },
    receivedMessageContainer: {
      alignSelf: 'flex-start',
      backgroundColor: colors.PRIMARY,
      borderBottomStartRadius: 15,
      borderTopEndRadius: 15,
      borderBottomEndRadius: 15,
    },
    sentMessageText: {
      color: 'black',
      padding: 8,
    },
    receivedMessageText: {
      color: 'white',
      padding: 8,
    },
    messageImage: {
      maxWidth: 280,
      maxHeight: 330,
      //height: 330,
      //width: 280,
      borderRadius: 15,
    },
  });

  const isSentMessage = item.senderID === currentUser.uid;
  const messageContainerStyle = isSentMessage
    ? styles.sentMessageContainer
    : styles.receivedMessageContainer;
  const messageTextStyle = isSentMessage
    ? styles.sentMessageText
    : styles.receivedMessageText;

  const openFullScreenImage = uri => {
    navigation.navigate('ImageFullScreen', { imageUrl: uri });
  };

  return (
    <View style={[styles.messageContainer, messageContainerStyle]}>
      {imageUrl && (
        <Pressable onPress={() => openFullScreenImage(imageUrl)}>
          <Image
            style={styles.messageImage}
            source={{ uri: imageUrl }}
            resizeMode="cover"
          />
        </Pressable>
      )}
      {item.text && <Text style={messageTextStyle}>{item.text}</Text>}
    </View>
  );
};

export default Message;

In ImageUrl I have the URL of the image that comes to me from an API call, In the "messageImage" class of the StyleSheet, I don't understand why if I had to write this:

 messageImage: {
      maxWidth: 280,
      maxHeight: 330,
      borderRadius: 15,
 }

the image is not displayed, but if I were to give it fixed values like this:

messageImage: {
      width: 280,
      height: 330,
      borderRadius: 15,
 }

with "height" and "width" the image would be seen correctly.

Obviously I don't want to use fixed values for a matter of responsiveness. I also tried to use percentage values but it doesn't work. Why don't maxWidth and maxHeight work correctly?

Edit: Even if you don't have any images you could replicate the result with a normal view backgroundColor, for example like this:

messageImage: {
      //width: 280,
      //height: 330,
      maxWidth: 280,
      maxHeight: 330,
      backgroundColor: "red"
      borderRadius: 15,
 },

the problem should arise in any case

user18309290 · Answer 1 · 2023-09-01T14:27:57.577

0

maxWidth prevents width becoming larger than value set, it doesn't define actual width.

For example, the width will be 280, but not more than 50 percent of the parent's width.

width: 280,
maxWidth: '50%'

Use 100% for width by default then maxWidth will be the defining value.

width: '100%',
maxWidth: 280,

The example with an image

<View style={{flex: 1}}>
  <Image
    style={{width: '100%', maxWidth: 280, height: '50%', maxHeight: 330}}
    source={{
      uri: 'https://reactnative.dev/img/tiny_logo.png',
    }}
  />
</View>

edited Sep 01 '23 at 14:27

answered Aug 30 '23 at 16:01

user18309290

5,777
2
4
22

Even if you were to do something like this: ```messageImage: { width: '100%', maxWidth: 280, height: "50%", maxHeight: 330, borderRadius: 15, }``` the image wouldn't show anyway – Vito Marseglia Sep 01 '23 at 09:03
Or even if you did something like this: messageImage: { minWidth: 200, minHeight: 200, maxWidth: 280, maxHeight: 330, borderRadius: 15, }, The image would only respect minWidth and minHeight setting the image to 200x200 and even if the image is bigger maxWidth and maxHeight are not taken into consideration – Vito Marseglia Sep 01 '23 at 09:16

score 0 · Answer 2 · answered Aug 30 '23 at 17:08

maxHeight and maxWidth are usually used in an element that is also set to flex:1, meaning that it will take up all available space. The max height and width then set bounds on that amount of space. The image is not showing up because without adding flex:1 to the styles as well, the image has no height and width.

maxWidth and maxHeight don't work as they should in React Native

2 Answers2