How to set a default image in React Native? Code Example

A default image is useful when either the desired image is not loading, url address is wrong, image is down, prevented due to hotlinking, network error or any other kind of issue.

By providing default image, there is no abrupt shift in layout of the app. Also, it doesn’t look blank while actual image is loading.

Default image is also used to show profile images. Not all users upload their images immediately after creating their profiles. So, it is needed to show something. That’s where default images shine.

React native provides defaultSource prop in Image component which can be used to show default image. It accepts remote url, local files and base64.

Code Example

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    flexDirection: 'row',
    justifyContent: 'space-around'
  },
  image: {
    height: 200,
    width: 300,
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.image}
        defaultSource={{uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/256px-No-Image-Placeholder.svg.png'}}
        resizeMode={'center'}
        source={{uri: ''}}
      />
      
    </View>
  );
}

export default DisplayAnImage;

The output will look like this –

In the code we are passing a placeholder image url in defaultSource prop at line 23. Since we are not providing any url into the source prop so no actual image is loading. Else our placeholder image is displaying.

Live Demo

Conclusion

A default image in React Native can be set using defaultSource prop of Image component. This is helpful in conditions where the source image is not able to load.