Response-native - Fit Image in with View, not the entire screen size

Question

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

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

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 } }) 

Layout:

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

Result (with resizeMode='contain' ):

Result (with resizeMode='cover' ):

As you can see, the cover ed images are very large and as wide as the entire screen, and do not correspond to the directly displayed view.

Update 1:

I managed to achieve a result close to what I was looking for, applying a scale transformation to the image and reducing it from the center:

Conversion:

 transform: [{ scale: 0.55 }] 

The resulting layout (without margins or pads):

Answer 1

I couldn’t get the example to work using the resizeMode Image properties, but since all the images will be square, there is a way to do this using Window dimensions with flexbox.

Set flexDirection: 'row' and flexWrap: 'wrap' , then they will all be lined up if they are the same size.

I set it up here

https://snack.expo.io/HkbZNqjeZ

 "use strict"; var React = require("react-native"); var { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity, Dimensions, ScrollView } = React; var deviceWidth = Dimensions.get("window").width; var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg"; var SampleApp = React.createClass({ render: function() { var images = []; for (var i = 0; i < 10; i++) { images.push( <TouchableOpacity key={i} activeOpacity={0.75} style={styles.item}> <Image style={styles.image} source={{ uri: temp }} /> </TouchableOpacity> ); } return ( <ScrollView style={{ flex: 1 }}> <View style={styles.container}> {images} </View> </ScrollView> ); } }); 

Answer 2

Set the dimensions for the view and make sure that your image is set to height and width "undefined" , as in the example below:

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

This ensures that your image is scaled and fits perfectly into your view.

Answer 3

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

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

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

Note: height must be undefined

Answer 4

I think because you did not specify the width and height for the item .

If you want to have only 2 images in a row, you can try something like this instead of using flex:

 item: { width: '50%', height: '100%', overflow: 'hidden', alignItems: 'center', backgroundColor: 'orange', position: 'relative', margin: 10, }, 

It works for me, hope it helps.