Slow rendering of image in react Native-CodePudding

Image is downloaded , but still rendering very slowly, anyone knows what can be happening?

here is my code:

import React from 'react'
import { StyleSheet, Image, Text, View } from 'react-native'
import Backgroundimage from '../../../assets/images/backgroundImage.jpg'

export default function ImageContainer() {
return (
<View style={styles.ImageContainer}>
<Image source={Backgroundimage} style={styles.Backgroundimage}/>
</View>
)
}

const styles = StyleSheet.create({
ImageContainer: {
display: 'flex',
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
Backgroundimage: {
height: 450,
width: '100%',
}
})

CodePudding user response：

2 reasons comes to my mind about why your images load slow.

1- Images are too large The first thing you should do is optimize your heavy images, because larger-sized high resolutions can take up a lot of bandwidth from your end user.

2- Images have unspecified dimensions: If you have an image that is 2500x2500 pixels, but you have scaled it down to 250x250 pixels, your app will have to load ten times more than necessary.

CodePudding user response：

Try FastImage package. Maybe it is the best option for your issue.