how do i auto-scale a image in react native?

To just put the image into the container with width=100%, Please try width=100% + resizeMode=contain

For example


<Image

  resizeMode={'contain'}
  style={{ flex:1, 
  width:'100%',
        aspectRatio: 1 }}
  source={{uri: "https://www.yoursite.com/images/" + item.photo}}
/>  


or

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

const image = () => (
    <View style={styles.imgContainer}>
        <Image style={styles.image} source={require('assets/images/image.png')} />
    </View>
);

const style = StyleSheet.create({
    imgContainer: {
        flexDirection: 'row'
    },
    image: {
        resizeMode: 'contain',
        flex: 1,
        aspectRatio: 1 // Your aspect ratio
    }
});

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top