How to show Loading Placeholder for Image in React Native

In this blog post, we will be discussing how to display a loading placeholder in react native while an image is being loaded from the internet. This can improve the user experience by letting the user know that the image is being loaded and that they should wait.

The Image component in react native has defaultSource property which helps you to show a static image when the real image is getting loaded. You can also use callbacks such as onLoad, onError, etc for more control over showing images.

See the code snippet given below.

import React from 'react';
import {Image} from 'react-native';
import loading from './cat.jpg';

const MyImage = () => {
  return (
    <Image
      source={{
        uri: 'https://cdn.pixabay.com/photo/2022/10/20/19/31/dog-7535633_1280.jpg',
      }}
      defaultSource={loading}
      style={{width: 200, height: 200}}
    />
  );
};

export default MyImage;

That’s how you add a default image for react native Image component.