srcset in react native

Question

I am using react native. In that Image component don't have srcset. So is there any way to use srcset in react native. Or can we create our own srcset?

Similar to web or react: https://html.com/attributes/img-srcset/

Also found this article: https://medium.com/finimize-engineering/fetching-responsive-images-in-react-native-to-boost-performance-cd638cd0928e

Answer 1

React Native, the Image component does not have a srcset attribute. However, you can achieve a similar effect by using the source prop, which allows you to specify multiple sources for an image and have the component choose the most appropriate one based on the device's screen density.

import { Image } from 'react-native';

const MyImage = () => {
  return (
    <Image
      source={[
        { uri: 'https://example.com/[email protected]', density: 1 },
        { uri: 'https://example.com/[email protected]', density: 2 },
        { uri: 'https://example.com/[email protected]', density: 3 },
      ]}
    />
  );
};

You can also use the source prop to provide different images for different device sizes or orientations like below

import { Image, Dimensions } from 'react-native';

const MyImage = () => {
  const { width, height } = Dimensions.get('window');
  return (
    <Image
      source={[
        { uri: 'https://example.com/image-small.jpg', width: 100, height: 100 },
        { uri: 'https://example.com/image-large.jpg', width: 200, height: 200 },
      ]}
    />
  );
};