All Articles

Progressive image loading in React native

Snack expo demo

If the network is slow, then app will take some time to load the image in RN. So there will be no content visible during this time. Actually, that is a poor user experience.

Here I am showing how to progressively render the image in React native by using ActivityIndicator component.

The idea is very simple. Display the loader till the image loads. The prop onLoadEnd is used for detecting a complete load of images.

const [showLoader, changeLoaderStatus] = useState(false);
<View>
  <Image
    source={{
      uri: "<IMAGE_URL>",
    }}
    onLoadStart={() => changeLoaderStatus(true)}
    onLoadEnd={() => changeLoaderStatus(false)}
  />
  {showLoader && (
    <View>
      <ActivityIndicator size="small" color="gray" />
    </View>
  )}
</View>;

Declare showLoader state variable and initialize it to false. After starting the rendering image component onLoadStart method get fired, set the value of showLoader to true that means loader will start showing. After loading the image, hide the loader component by setting showLoader to false.

The complete working example can be found here.

If you are planning to develop a user avatar component with features like progressive loading, text fall back support, active badge, etc. Please use the library react-native-user-avatar