CODEWITHSUNDEEP
cssreactjsreact-native
Sarah cartenz
Sarah cartenz

Reputation: 1313

Image view out of page towards the right unexpectedly

I am rendering a simple view. It consists of an image on the right and some text on the left. This is how it looks like: 

return (
      <View style={styles.companyContainerStyle}>
        <View>
          <Text>{this.props.companyNameAr}</Text>
          <Text>{this.props.descriptionAr}</Text>
        </View>
        <View style={styles.imageContainerStyle}>
          <Image
            style={styles.imageStyle}
            source={{ uri: this.props.logo }}
            resizeMode='contain'
            resizeMethod='auto'
          />
        </View>
      </View>
    );

The following is the styles I applied to make the text and image aligned next to each other: 

const styles = {
  companyContainerStyle: {
    flex: 1,
    flexDirection: 'row',
    padding: 10
  },
  imageContainerStyle: {
    borderRadius: 5,
    borderWidth: 2,
    borderColor: '#2279b4',
    padding: 1,
  },
  imageStyle: {
    flex: 1,
    height: 100,
    width: 100,
  }
}

The very weird part is that it looks like this on the emulator: enter image description here

I think the length of the text is pushing the image to the very right out of the screen. I thought that the number of lines would adjust accordingly to fit everything in the screen. However its not the case. How do I make everything look neat given that the length of the text is unknown (it is being rendered from a database)??

Upvotes: 1

Views: 30

Answers (2)

simbathesailor
simbathesailor

Reputation: 3687

#container {
  display: flex;
  justify-content: space-around;
  width: 70%;
  height: 400px;;
  border: 2px solid grey;
  padding: 5px;
}
#top_content {
display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
#para {
  width: 60%;
  text-align: justify;
  margin: 0px;
  
  
}
img {
  height: 20%;
  width: 20%;
}
<div id="container">
  <div id="top_content">
    <p id="para">adfasdfadf sadfdaafafdasdfadfadfadfdfad dasadfadfadfadfadgvfa sasadasdaf asdfdfdadfadf</p>
<img src="http://lorempixel.com/400/200" alt="myimg">  
  </div>
  
</div>

Something like this can make sure that your text will not push your img outside

Upvotes: 1

Henrik R
Henrik R

Reputation: 4982

Add flex: 1 to imageContainerStyle and also add flex: 1 to View that is container of the two Text components.

Reason for this is that if the Text component does not have container with flex: 1 on it the text will try to take all possible space. The container will restrict that

Upvotes: 0

Related Questions