skip to Main Content

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%',
}
})

2

Answers


  1. 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.

    Login or Signup to reply.
  2. Try FastImage package. Maybe it is the best option for your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search