react-native-responsive-image-view

You can implement custom loading indicators and error UI by checking the loading and error properties provided by the ResponsiveImageView render prop. If an error occurs, you can use the retry function to allow the user to attempt to reload the image.

import React from "react";
import { ActivityIndicator, Image, Text, Button, View } from "react-native";
import { ResponsiveImageView } from "react-native-responsive-image-view";

const MyComponent = ({ imageUri }) => (
  <ResponsiveImageView source={{ uri: imageUri }}>
    {({ error, loading, retry, getViewProps, getImageProps }) => {
      if (loading) {
        return <ActivityIndicator animating={true} size="large" />;
      }
      if (error) {
        return (
          <View>
            <Text>{error}</Text>
            <Button onPress={retry} title="Retry" />
          </View>
        );
      }
      return (
        <View {...getViewProps()}>
          <Image {...getImageProps()} />
        </View>
      );
    }}
  </ResponsiveImageView>
);

ResponsiveImageView supports onLoad and onError callback props, similar to the standard React Native Image component. These are useful for triggering side effects when the image state changes.

import React from "react";
import { Image, View } from "react-native";
import { ResponsiveImageView } from "react-native-responsive-image-view";

class MyClassComponent extends React.Component {
  onLoad = () => {
    console.log("Image has been loaded.");
  };

  onError = (err) => {
    console.error(err);
  };

  renderImageView = ({ getViewProps, getImageProps }) => (
    <View {...getViewProps()}>
      <Image {...getImageProps()} />
    </View>
  );

  render() {
    const { imageUri } = this.props;

    return (
      <ResponsiveImageView
        onLoad={this.onLoad}
        onError={this.onError}
        source={{ uri: imageUri }}
      >
        {this.renderImageView}
      </ResponsiveImageView>
    );
  }
}

The ResponsiveImageView component uses a render prop pattern to provide the necessary props for a responsive image layout. It does not render anything itself; instead, it calls your render function. You must render an Image inside a View within your render function to achieve the responsive effect.

You can use the render prop, the component prop, or the children function pattern. The component honors them in this order: component > render > children (function) > children (non-functional).

import * as React from "react";
import { Image, View } from "react-native";
import { ResponsiveImageView } from "react-native-responsive-image-view";

function MyComponent({ imageUri }) {
  return (
    <ResponsiveImageView source={{ uri: imageUri }}>
      {({ getViewProps, getImageProps }) => (
        <View {...getViewProps()}>
          <Image {...getImageProps()} />
        </View>
      )}
    </ResponsiveImageView>
  );
}

When using getViewProps and getImageProps, you can pass additional style or prop objects to these functions. The component will merge your custom props with the responsive props it calculates.

Note: For the Image component, ResponsiveImageView will overwrite certain properties (like width or height) to ensure responsiveness, so use this pattern primarily for adding styles like padding to the container or other non-layout styles to the image.

import React from "react";
import { StyleSheet, Image, View } from "react-native";
import { ResponsiveImageView } from "react-native-responsive-image-view";

const styles = StyleSheet.create({
  imageContainer: {
    padding: 20, // will be merged into ResponsiveImageView View props!
  },
  image: {
    width: "50%", // will be overwritten by ResponsiveImageView Image props!
  },
});

const MyComponent = ({ imageUri }) => (
  <ResponsiveImageView source={{ uri: imageUri }}>
    {({ getViewProps, getImageProps }) => (
      <View {...getViewProps({ style: styles.imageContainer })}>
        <Image {...getImageProps({ style: styles.image })} />
      </View>
    )}
  </ResponsiveImageView>
);

The ResponsiveImageView component uses a render prop pattern to provide calculated props for both a container View and the underlying Image. This allows you to maintain responsiveness while controlling the layout.

Inside the render function, you receive:

• getViewProps: Props to be spread onto a container View.
• getImageProps: Props to be spread onto the Image component.
• loading: Boolean indicating if the image is currently loading.
• error: Error object or string if the image failed to load.
• retry: A function to attempt reloading the image.

Example for a basic remote image:

import React from "react";
import { Image, View } from "react-native";
import { ResponsiveImageView } from "react-native-responsive-image-view";

const MyComponent = ({ imageUri }) => (
  <ResponsiveImageView source={{ uri: imageUri }}>
    {({ getViewProps, getImageProps }) => (
      <View {...getViewProps()}>
        <Image {...getImageProps()} />
      </View>
    )}
  </ResponsiveImageView>
);

You can provide onLoad and onError callbacks within the configuration object passed to useResponsiveImageView to react to image loading events.

• onLoad: Called when the image successfully loads.
• onError: Called when an error occurs during loading, receiving the error as an argument.

import React from "react";
import { Image, Text, View } from "react-native";
import { useResponsiveImageView } from "react-native-responsive-image-view";

const MyComponentWithCallbacks = ({ imageUri }) => {
  const onLoad = React.useCallback(() => {
    console.log("Image has been loaded.");
  }, []);

  const onError = React.useCallback((err) => {
    console.error(err);
  }, []);

  const { getViewProps, getImageProps } = useResponsiveImageView({
    onLoad,
    onError,
    source: { uri: imageUri },
  });

  return (
    <View {...getViewProps()}>
      <Image {...getImageProps()} />
    </View>
  );
};

The useResponsiveImageView hook exposes loading, error, and retry properties to manage the image lifecycle.

• loading: A boolean indicating if the image is currently loading.
• error: Contains error information if the image fails to load.
• retry: A function that can be called to attempt reloading the image.

You can use these to conditionally render loading indicators or error UI components.

import { ActivityIndicator, Image, Text, Button, View } from "react-native";
import { useResponsiveImageView } from "react-native-responsive-image-view";

const MyComponent = ({ imageUri }) => {
  const { error, loading, retry, getViewProps, getImageProps } =
    useResponsiveImageView({
      source: { uri: imageUri },
    });

  if (loading) {
    return <ActivityIndicator animating={true} size="large" />;
  }

  if (error) {
    return (
      <View>
        <Text>{error}</Text>
        <Button onPress={retry} title="Retry" />
      </View>
    );
  }

  return (
    <View {...getViewProps()}>
      <Image {...getImageProps()} />
    </View>
  );
};