CODEWITHSUNDEEP
imagereact-nativeimage-size
csb00
csb00

Reputation: 1155

When your image is not resizing in RN

I am bringing in an image on my RN app. It's an image of the Simpsons family. When I set the width and height to 100%, the image becomes too big for my simulator. I want it to be centered and formatted to the center of my screen. However, when I adjust the percentages, the image starts getting cutoff (obviously). Another thing, the image itself is not centered despite me stating it in the code (see below). Do any of you have any recommendations? This png image is going on top of a background image already (jpeg).

<Image
  source={{
   uri:"https://upload.wikimedia.org/wikipedia/en/0/0d/Simpsons_
        FamilyPicture.png"               
     }}
   style={{ width: 100 , height: 120, justifyContent: "center", alignContent: "center" }}
 />

Upvotes: 0

Views: 116

Answers (2)

Alexandre Carreiro
Alexandre Carreiro

Reputation: 61

Try change resizeMode for contain.

Upvotes: 1

Gilliard Macedo
Gilliard Macedo

Reputation: 386

justifyContent and alignContent needs to be style attributes of the container. Something like this:

<View style={{flex: 1, flexDirection: 'column', justifyContent: "center", alignContent: "center"}}>
    <Image
      source={{
       uri:"https://upload.wikimedia.org/wikipedia/en/0/0d/Simpsons_
            FamilyPicture.png"               
         }}
       style={{ width: 100 , height: 120}}
     /> 
</View>

Upvotes: 0

Related Questions