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'
):
The result (with resizeMode='cover'
):
As you can see, the cover
ed 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 }]
This question is related to
javascript
reactjs
flexbox
react-native
Simply You need to pass resizeMode like this to fit in your image in containing view
<Image style={styles.imageStyle} resizeMode={'cover'} source={item.image}/>
const style = StyleSheet.create({
imageStyle: {
alignSelf: 'center',
height:'100%',
width:'100%'
},]
})
the image has a property named Style ( like most of the react-native Compponents) and for Image's Styles, there is a property named resizeMode that takes values like: contain,cover,stretch,center,repeat
most of the time if you use center it will work for you
I think it's because you didn't specify the width and height for the item
.
If you only want to have 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,
},
This works for me, hope it helps.
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
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.
Anyone over here who wants his image to fit in full screen without any crop (in both portrait and landscape mode), use this:
image: {
flex: 1,
width: '100%',
height: '100%',
resizeMode: 'contain',
},
Source: Stackoverflow.com