5

This documentation says that:

This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments.

Can anyone tell how to specify more than one URI's for image component in react-native? There is no such example for this definition. And also how to pass the height and width arguments along with the URI as this documentation states.

1 Answers1

7

You can find the answer in the react-native source code, specifically /node_modules/react-native/Libraries/Image and the files ImageSourcePropType and ImageProps.

According to ImageSourcePropType, when passing a URI object, it should be in this shape (meaning it can have any of the defined properties as long as the type matches what is expected):

const ImageURISourcePropType = PropTypes.shape({
  uri: PropTypes.string,
  bundle: PropTypes.string,
  method: PropTypes.string,
  headers: PropTypes.objectOf(PropTypes.string),
  body: PropTypes.string,
  cache: PropTypes.oneOf([
    'default',
    'reload',
    'force-cache',
    'only-if-cached',
  ]),
  width: PropTypes.number,
  height: PropTypes.number,
  scale: PropTypes.number,
});

And according to ImageProps, source permits an object of shape ImageSourcePropType, an array of those objects, or a number (for local assets, the statement require('imgs/image1.png') returns a number identifying that asset). Here is the code:

const ImageSourcePropType = PropTypes.oneOfType([
  ImageURISourcePropType,
  // Opaque type returned by require('./image.jpg')
  PropTypes.number,
  // Multiple sources
  PropTypes.arrayOf(ImageURISourcePropType),
]);

So the source prop will accept a single object that matches ImageURISourcePropType or an array of objects that match.

So to pass multiple remote images and specify the widths it would be something like

<Image
  source={[
    {
      uri: 'https://image.location.com',
      width: 500,
      height: 500
    },
    {
      uri: 'https://image2.location.com',
      width: 600,
      height: 600
    },
    {
      uri: 'https://image3.location.com',
      width: 700,
      height: 700
    },
  ]}
/>
Robbie Milejczak
  • 5,664
  • 3
  • 32
  • 65
  • Can you please answer this question as well? https://stackoverflow.com/questions/53013841/what-is-the-difference-between-loadingindicatorsource-and-defaultsource-props-in –  Oct 26 '18 at 20:19
  • I'm not sure, they seem indentical. I would prefer `defaultSource`, as it seems like `loadingIndicatorSource` is meant to refer more to a local gif that would be used as a loading animation whereas `defaultSource` is more like a fallback image – Robbie Milejczak Oct 26 '18 at 20:29
  • Both **defaultSource** and **loadingIndicatorSource** properties take value same as **source** property i-e **require()** or **{}**? –  Oct 27 '18 at 05:27