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%',
}
})
2
Answers
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 2500×2500 pixels, but you have scaled it down to 250×250 pixels, your app will have to load ten times more than necessary.
Try FastImage package. Maybe it is the best option for your issue.