0

I have made use of react native flatlist to display image but sometimes the image that I get from response will not be of perfect size thats why it will distort the image to contain, the first image is not of correct size but the image below that is good and therefore no distortion

Is there a way to fill that distortion with a solid color?

<FlatList
                            contentContainerStyle={{ paddingBottom: '80%' }}
                            data={myData}
                            renderItem={({ item }) => {
                                return (
                                    <View style={styles.news}>
                                        <View style={styles.newsi}>
                                            <Image resizeMode='contain' style={styles.news_img} source={{ uri: item.url }} />
                                        </View>
                                        <Text style={styles.head1} ><Foundation name="arrow-up" size={28} color="#EC1C24" />  {item.ups} upvotes in reddit</Text>
                                        <Text style={styles.head} >{item.title}</Text>
                                    </View>
                                )
                            }}
                        />

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: "100%",
        alignItems: "center",
        justifyContent: "center",
        height: "100%",
        borderRadius: 20,
        backgroundColor: '#22223b',
        marginTop: '4%',
        padding: '2%'
    },
    news: {
        backgroundColor: '#22223b',
        marginVertical: '4%',
        borderRadius: 20,
        padding: '2%'
    },
    newsi: {
        backgroundColor: '#22223b',
        marginVertical: '2%',
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
    },
    container1: {
        backgroundColor: 'black',
        textAlign: 'left',
        marginTop: '1%',
        padding: '2%'
    },
    head: {
        color: 'white',
        textAlign: 'left',
        marginLeft: '2%',
        fontSize: 18,
        fontWeight: '400',
        marginBottom: '4%',
    },
    head1: {
        color: 'white',
        textAlign: 'left',
        marginLeft: '2%',
        marginBottom: '1%',
        fontSize: 20,
        fontWeight: '500'
    },
    news_img: {
        height: deviceWidth - 20,
        width: deviceWidth - 20,
        marginVertical: '2%',
        borderRadius: 20,
        overflow: 'hidden',
    },
    hr100: {
        width: '100%',
        borderBottomColor: "#E2FDFF",
        borderBottomWidth: 0.5,
        marginTop: 4,
    },
    hr101: {
        width: '100%',
        borderBottomColor: "#E2FDFF",
        borderBottomWidth: 1,
        marginBottom: '4%',
    },

})```

this is the code i have made use of
Tony Smith
  • 21
  • 5

1 Answers1

1

Depending on the expo version you are using can you try using contentFit instead of resizeMode(resizeMode is deprecated)

   <Image
    style={styles.image}
    source={{uri: "https://picsum.photos/seed/696/3000/2000"}}
    contentFit={'contain'}
    transition={15000}
  />
Michael Bahl
  • 2,941
  • 1
  • 13
  • 16
  • Heyy thanks the distortion of image is no more but the image gets cropped is there anyway to prevent cropping of image?? – Tony Smith Mar 29 '23 at 14:17
  • It shouldn‘t get cropped. AFAIK it should respect the aspect ratio. – Michael Bahl Mar 29 '23 at 14:38
  • https://i.stack.imgur.com/Pnumx.jpg please watch before and after applying changes here – Tony Smith Mar 29 '23 at 14:55
  • It behaves as it should. When you wanna keep the aspect ratio there is no other way than cut his feeds. What is the expected behavior? Maybe you can try cover Instead of contain? – Michael Bahl Mar 29 '23 at 15:23
  • Ohhkk, I was expecting to fill the distortion with a solid color, but Its fine this too works!! Thank You!! – Tony Smith Mar 29 '23 at 15:35