Responsive Images in React Native

Every detail matters. Providing the best image resolution to users' devices is one of them.
Developers from the React Natie community have taken different roads to tackle the problem and you have now the chance to choice which one better suits your needs.

react-native-responsive-image on GitHub

A responsive Image component that chooses the best-resolution image for the current screen. Exponent

<ResponsiveImage
  sources={{
    // The values are anything that Image's source prop accepts
    2: require("image!icon@2x.png"),
    3: { uri: "https://example.com/icon@3x.png" },
  }}
/>

react-native-responsive-image on GitHub

React Native component, that resizes itself appropriately on all different iOS screens. Ladislav Maxa

<View style={{ flex: 1, justifyContent: "center" }}>
  <ResponsiveImage
    source={{ uri: "http:" + item.profile_picture.href }}
    initWidth="80"
    initHeight="80"
    item={item}
  />
</View>

react-native-RImage on GitHub

RImage is a Image plugin which allows you to specify srcset for the Images. It tries to replicate the srcset from HTML img element. Prateek Bhatnagar

<RImage
  srcset={{
    "1x": "http://lipsum.com/1.png",
    "2x": "http://lipsum.com/2.png",
    "3x": "http://lipsum.com/3.png",
    "3.5x": "http://lipsum.com/3.5.png",
  }}
/>

Bonus Component

autoresponsive-react-native on GitHub (with sample)

Auto responsive grid layout library for React Native. xudafeng

Auto responsive grid layout