chore: thumbnails optimization

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "react": "16.2.0",
     "react-native": "0.53.0",
+    "react-native-fit-image": "^1.5.4",
     "react-navigation": "^2.0.1",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",

src/domain/types.js

@@ -12,9 +12,9 @@ export type ImageSourceT = {
   width: number,
   height: number,
 }
-
 export type ImageT = {
   source: ImageSourceT,
+  resolutions?: Array<ImageSourceT>,
 }
 
 export type PreviewT = {

src/views/Articles/components/ListItem.js

@@ -6,33 +6,53 @@ import {
   Image,
   TouchableHighlight,
 } from 'react-native'
+import FitImage from 'react-native-fit-image'
 
+import type { ImageT, ImageSourceT } from '../../../domain/types'
 import type { ListItemPropsT } from '../types'
 
 import { Favorite } from '../../../components'
 
 import styles from '../styles';
 
+const getBestResolutionSource = (data) => {
+  const imageData: ?ImageT = data && data.images && data.images[0]
+
+  if (!imageData) {
+    return null
+  }
+
+  const widthRange = { min: 480, max: 640 }
+
+  // Disabled because for some reason all preview urls are broken (return 403)
+  // return imageData.resolutions &&
+  //   imageData.resolutions.find(({ width }) => (width >= widthRange.min && width <= widthRange.max)) || imageData.source
+
+  return imageData.source
+}
+
 const ListItem = ({ item, orientation, onPress }: ListItemPropsT) => {
   const isPortrait: boolean = orientation === 'PORTRAIT'
-  const imageSource = item.preview &&
-    item.preview.images &&
-    item.preview.images[0] &&
-    item.preview.images[0].source;
+  const imageSource: ?ImageSourceT = getBestResolutionSource(item.preview)
 
   return (
     <TouchableHighlight onPress={onPress(item)} style={styles.button}>
       <View style={[styles.item, styles.button, !isPortrait && styles.itemL]}>
         <View style={[styles.imageWrap, isPortrait ? styles.imageWrapP : styles.imageWrapL]} >
           {
             imageSource ? (
-              <Image
-                source={{ uri: imageSource.url, height: imageSource.height, width: imageSource.width }}
-                loadingIndicatorSource={require('../../../images/loading.gif')}
+              <FitImage
+                indicator={true}
+                indicatorColor="#0ac3ee"
+                indicatorSize="large"
+                resizeMode="contain"
+                source={{ uri: imageSource.url }}
+                originalWidth={imageSource.width}
+                originalHeight={imageSource.height}
                 style={styles.image}
               />
             ) : (
-              <Image source={require('../../../images/No_Image_Available.png')} style={styles.image} />
+              <Image source={require('../../../images/No_Image_Available.png')} style={styles.noImage} />
             )
           }
         </View>

src/views/Articles/styles.js

@@ -51,17 +51,19 @@ export default StyleSheet.create({
     overflow: 'hidden',
   },
   imageWrapP: {
-    height: 160,
     marginBottom: 10,
   },
   imageWrapL: {
     flex: 1,
-    height: 120,
     marginRight: 10,
   },
   image: {
-    flex: 1,
-    resizeMode: 'contain',
+    width: 300,
+    height: 160,
+  },
+  noImage: {
+    width: 160,
+    height: 160,
   },
   textContainer: {
     flexWrap: 'nowrap',