0
164
ViewsRN- How to show loader icon on screen until image is loaded?
I'm new to React native. Pictures change when the previous and next buttons are pressed in the application. But it waits for a while until the pictures are loaded onto the screen. Because the images are coming from firebase storage. When the button is pressed, I want a loading icon to appear until the images are loaded. I don't know how to use ActivityIndicator in this situation. Can anybody help me for that?
Application image:
Codes:
import React, { useState } from 'react'
import { Image, Text, TouchableOpacity, View } from 'react-native'
import { StyleSheet } from 'react-native'
const data = [
{ url: "https://firebasestorage.googleapis.com/v0/b/asdsa-69cc0.appspot.com/o/1.jpg?alt=media&token=52de8fce-553d-436d-839e-cc3ee0ec29eb" },
{ url: "https://firebasestorage.googleapis.com/v0/b/asdsa-69cc0.appspot.com/o/2.jpg?alt=media&token=0fa85f40-f134-4010-b575-63c1c82e9c81" }
]
const WordPage = () => {
const [picture, setPicture] = useState(data[0].url)
const nextWord = () => {
setPicture(data[1].url)
}
const previousWord = () => {
setPicture(data[0].url)
}
return (
<View style={styles.container}>
<Image source={{ uri: picture }}
style={styles.image}
/>
<View style={styles.change}>
<TouchableOpacity onPress={previousWord}>
<Text>
Previous
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={nextWord}>
<Text>
Next
</Text>
</TouchableOpacity>
</View>
</View>
)
}
export default WordPage
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
height: 300,
width: 300,
alignSelf: 'center',
borderRadius: 10,
resizeMode: 'contain',
marginTop: 20
},
change: {
flexDirection: 'row',
marginHorizontal: 10,
marginTop: 20,
alignItems: 'center',
justifyContent: 'space-between'
}
});I could not apply what is written on this page : How do I conditionally render a spinner while waiting for a new image to load?
1 answers
Answer question0
while loading images from a URL we can make use of the props available for Image components. Props like onLoadStart can be used to set a state variable to show an ActivityIndicator while image loading is started and props like onLoad or onLoadEnd can be used to change the value of the state variable to hide the ActivityIndicator once the loading is done.