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