Image Resize Cover - Keep Top Left of Image

Question

I have a big image that needs to be cropped on certain devices, but it's very important that the top left of my image stays in tact because it has some important content.

 <View style={{flex:1}}>
     <Image source={MY_IMAGE} 
        resizeMode="cover"
        style={{
          flex: 1.8,
          width: null,
          height: null
        }}
    />
    <View style={{ flex: 1 }}>
      //other content
    </View>
 </View>

^This is very close to what I want, but by default it looks like resizeMode:"Cover" just zooms in on the center of the image, cutting off my important content.

Is there any way to complete the image resizing based on something like x:0, y: screenHeight so that it keeps the top left of my image and resizes from the bottom right?

Answer 1

Import necessary packages

import { StyleSheet, Image, Dimensions } from 'react-native';

Your img element

<Image style={styles.images} resizeMode="stretch" source={{ uri: 'src here' }} />

Add this styles at the bottom

const styles = StyleSheet.create({
    images: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').width / 2
    }
});

Try this the image width will be dynamically set even when you rotate your device.