how to instantly change image on button click without rerendering component - react-native

Question

i have 3 images and on button click I am changing those one by one but after I click the button a white screen is shown than the new image is shown how can I instantly change images without any delay. you can check out my output
video
my code:
export const Start = ({ navigation }) => {
const [image, setImage] = useState(images.start_1)
const [text, setText] = useState("Discover the\nmost beautiful\nroads in the\nworld")
const [count, setCount] = useState(1)
useEffect(() => {
if (count == 2) {
setImage(images.start_2)
setText("Make a road trip\nthrough fantastic\nlandscapes.")
}
else if (count == 3) {
setImage(images.start_3)
setText("Share your\nunique experiences\nwith others.")
}
else if (count == 4) {
navigation.replace('home')
}
}, [count])
return (
<ImageBackground
resizeMode='stretch'
source={image}
defaultSource={images.start_1}
style={{ flex: 1 }}>
<Text style={{
fontSize: 30,
color: 'white',
position: 'absolute',
bottom: 120,
left: 20
}}>{text}
</Text>
<TouchableOpacity
activeOpacity={0.8}
onPress={() => setCount(count + 1)}
style={{
position: 'absolute',
bottom: 55,
right: 20
}}>
<ImageBackground
resizeMode='cover'
source={images.button}
style={{
paddingVertical: 5,
paddingHorizontal: 40,
justifyContent: 'center',
alignItems: 'center'
}}
imageStyle={{ borderRadius: 20 }}>
<Text style={{ fontSize: 20, color: 'white' }}>Start</Text>
</ImageBackground>
</TouchableOpacity>
</ImageBackground>
)
}

Answer 1

If you are using an image from over the network, I'd probably recommend against using ImageBackground and instead try to use React Native's Image component or React Native Fast Image. Both Image and FastImage allow you to prefetch specific images - so they are in the cache before being used/shown to a user.
Alternatively, you could try embedding the images in the app/bundle and see if that gives you the same loading delay/flash.