Slow rendering of image in react Native

Wallace Nascimento 0
Viewed 27

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

enter image description here

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%',
}
})
performance react-native image typescript
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 2500x2500 pixels, but you have scaled it down to 250x250 pixels, your app will have to load ten times more than necessary.

Jun De Leon0

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

Gennady Sabirovsky0
Related