React Native Display Default Source Image While Loading Main Image

Hi everyone, In this tutorial we will learn how to use defaultSource={} in Image component. This prop should show a placeholder image from local resource until the real image from network is loaded. But it doesn't work well, I don't know why. So I found a workaround solution that works fine. We will use a ternary operator with state in the image source. We will create a state and set its default value to false. When the state is false, it will show the local image. When the state is true, it will show the real image. The key thing that makes this work is the onLoad={} function in Image component. It runs when the image loading is done. So when the online image from URL is loaded, it will set the state to true and it will show the main image. This is how we can use React Native to show default source image while loading main image.

Contents in this project React Native Display Default Source Image While Loading Main Image :-

1. First of all we have to setup a local resource image in our react native project. I’m using the default thumbnail image. You can download the image from below If you want to use the same image.

2. Now make a images folder in your react native project.

3. Now paste the downloaded thumbnail image into images folder.

4. Open your project’s main App.js file and import useState, View, StyleSheet, Image and Text component.

import React, { useState } from 'react'; import { View, StyleSheet, Image, Text } from 'react-native';

1 2 3

import React, { useState } from 'react';   import { View, StyleSheet, Image, Text } from 'react-native';

5. Creating our main App component.

export default function App() { }

1 2 3 4 5

export default function App() {       }

6. Creating a State named as onLoadImage with State update method setLoadImage with default value False.

const [onLoadImage, setLoadImage] = useState(false);

1	const [onLoadImage, setLoadImage] = useState(false);

7. Creating a function named as imageLoading(). In this function we would simply update the State value.

const imageLoading = () => { setLoadImage(true); }

1 2 3

const imageLoading = () => {     setLoadImage(true);   }

8. Creating our main Image component in return block.

Explanation :- Here when onLoadImage value is False then it will load the local resource image and when the State value is True then it load the original image. onLoad={} function calls when image load successfully from network.

<Image source={ onLoadImage ? { uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/cosmos.jpg' } : require('./images/default-loading-image.png')} style={{ width: 300, height: 200, resizeMode: 'contain' }} onLoad={() => imageLoading()} />

1 2 3 4 5 6

<Image source={         onLoadImage ?           { uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/cosmos.jpg' }           : require('./images/default-loading-image.png')}         style={{ width: 300, height: 200, resizeMode: 'contain' }}         onLoad={() => imageLoading()} />

9. Creating Style.

const styles = StyleSheet.create({ MainContainer: { flex: 1, alignItems: "center", justifyContent: "center", }, text: { color: 'black', textAlign: 'center', fontSize: 25, paddingBottom: 10 } });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

const styles = StyleSheet.create({     MainContainer: {     flex: 1,     alignItems: "center",     justifyContent: "center",   },     text: {     color: 'black',     textAlign: 'center',     fontSize: 25,     paddingBottom: 10   }   });

10. Complete Source Code for App.js File :-

import React, { useState } from 'react'; import { View, StyleSheet, Image, Text } from 'react-native'; export default function App() { const [onLoadImage, setLoadImage] = useState(false); const imageLoading = () => { setLoadImage(true); } return ( <View style={styles.MainContainer}> <Text style={styles.text}> Show Default Image While Loading Real Image </Text> <Image source={ onLoadImage ? { uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/cosmos.jpg' } : require('./images/default-loading-image.png')} style={{ width: 300, height: 200, resizeMode: 'contain' }} onLoad={() => imageLoading()} /> </View> ); } const styles = StyleSheet.create({ MainContainer: { flex: 1, alignItems: "center", justifyContent: "center", }, text: { color: 'black', textAlign: 'center', fontSize: 25, paddingBottom: 10 } });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

import React, { useState } from 'react';   import { View, StyleSheet, Image, Text } from 'react-native';   export default function App() {     const [onLoadImage, setLoadImage] = useState(false);     const imageLoading = () => {     setLoadImage(true);   }     return (       <View style={styles.MainContainer}>         <Text style={styles.text}>         Show Default Image While Loading Real Image       </Text>         <Image source={         onLoadImage ?           { uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/cosmos.jpg' }           : require('./images/default-loading-image.png')}         style={{ width: 300, height: 200, resizeMode: 'contain' }}         onLoad={() => imageLoading()} />       </View>   ); }   const styles = StyleSheet.create({     MainContainer: {     flex: 1,     alignItems: "center",     justifyContent: "center",   },     text: {     color: 'black',     textAlign: 'center',     fontSize: 25,     paddingBottom: 10   }   });

Screenshots :-