Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react-native - Fit Image in containing View, not the whole screen size

I'm trying to fit images in their containing views so that I can have a seamless grid of images. The problem is that resizeMode='contain' seems to fit to the width of the screen or at least some higher level container, I need the images to fit to the size of each list item.

Here's a very ugly example of the styles and resulting grid:

The styles:

const styles = StyleSheet.create({   container: {     flex: 1,     backgroundColor: 'blue'   },    item: {     flex: 1,     overflow: 'hidden',     alignItems: 'center',     backgroundColor: 'orange',     position: 'relative',     margin: 10   },    image: {     flex: 1   } }) 

The layout:

<TouchableOpacity    activeOpacity={ 0.75 }   style={ styles.item } >   <Image     style={ styles.image }     resizeMode='contain'     source={ temp }   />  </TouchableOpacity> 

The result (with resizeMode='contain'):

enter image description here

The result (with resizeMode='cover'):

enter image description here

As you can see, the covered images are very big and are as wide as the whole screen and don't fit the immediately containing view.

Update 1:

I was able to achieve a result close to what I'm looking for by applying a scale transform to the image and shrinking it from the center:

The transform:

transform: [{ scale: 0.55 }] 

The resulting layout (without margins or paddings): enter image description here

like image 239
BarakChamo Avatar asked Dec 09 '15 13:12

BarakChamo


People also ask

How do you make image fit in view React Native?

To fit an Image to the full width of the screen and maintain aspect ratio with React Native, we can set the width to null and the height to the height we want. to set the height of the Image to 300 and the width to null to fit the Image to make the width flexible and maintain aspect ratio.

How do you change the size of image in React Native?

To resize local image files, we created react-native-image-resizer. Give it the path of an image and new dimensions and it will generate a new image with these dimensions. You can use an image from the camera roll or a base64 encoded image.


2 Answers

If you know the aspect ratio for example, if your image is square you can set either the height or the width to fill the container and get the other to be set by the aspectRatio property

Here is the style if you want the height be set automatically:

{     width: '100%',     height: undefined,     aspectRatio: 1, } 

Note: height must be undefined

Edit (Based on @rob-art's comment):
If your image is a different aspect ratio than the one you want to set in the style you can use resizeMode to control how the image should be displayed. Use resizeMode:'contain' to ensure your image is not cropped.
See documentation for more details

like image 65
sazzy4o Avatar answered Sep 19 '22 12:09

sazzy4o


Set the dimensions to the View and make sure your Image is styled with height and width set to 'undefined' like the example below :

    <View style={{width: 10, height:10 }} >       <Image style= {{flex:1 , width: undefined, height: undefined}}            source={require('../yourfolder/yourimage')}         />     </View> 

This will make sure your image scales and fits perfectly into your view.

like image 40
Naadiya Ahmed Avatar answered Sep 18 '22 12:09

Naadiya Ahmed