How to stop distortion of image in react native flatlist

Question

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

Answer 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}
  />