perf(images): start using react-native-fast-image for images

Author: akhenda

android/app/build.gradle

@@ -159,6 +159,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-fast-image')
     implementation project(':react-native-vector-icons')
     implementation project(':react-native-android-location-enabler')
     implementation project(':react-native-sentry')

android/app/src/main/java/com/wapi/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.dylanvann.fastimage.FastImageViewPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.avishayil.rnrestart.ReactNativeRestartPackage;
 import com.heanoria.library.reactnative.locationenabler.RNAndroidLocationEnablerPackage;
@@ -33,6 +34,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+          new FastImageViewPackage(),
           new VectorIconsPackage(),
           new RNAndroidLocationEnablerPackage(),
           new RNSentryPackage(),

android/settings.gradle

@@ -1,6 +1,9 @@
 rootProject.name = 'WAPI'
 
 
+include ':react-native-fast-image'
+project(':react-native-fast-image').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-image/android')
+
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 

ios/Podfile

@@ -38,6 +38,7 @@ target 'WAPI' do
   pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
   pod 'SentryReactNative', :path => '../node_modules/react-native-sentry/SentryReactNative.podspec'
   pod 'ReactNativeExceptionHandler', :podspec => '../node_modules/react-native-exception-handler/ios/ReactNativeExceptionHandler.podspec'
+  pod 'react-native-fast-image', :path => '../node_modules/react-native-fast-image'
 
   target 'WAPITests' do
     inherit! :search_paths

ios/Podfile.lock

@@ -3,7 +3,8 @@ PODS:
   - BVLinearGradient (2.4.0):
     - React
   - DoubleConversion (1.1.5)
-  - Folly (2016.10.31.00):
+  - FLAnimatedImage (1.0.12)
+  - Folly (2016.09.26.00):
     - boost-for-react-native
     - DoubleConversion
     - glog
@@ -21,55 +22,60 @@ PODS:
   - RadarSDK (1.3.12)
   - RCTRestart (0.0.6):
     - React
-  - React (0.56.0):
-    - React/Core (= 0.56.0)
-  - React/Core (0.56.0):
-    - yoga (= 0.56.0.React)
-  - React/CxxBridge (0.56.0):
-    - Folly (= 2016.10.31.00)
+  - React (0.55.4):
+    - React/Core (= 0.55.4)
+  - react-native-fast-image (4.0.14):
+    - FLAnimatedImage
+    - React
+    - SDWebImage/Core
+    - SDWebImage/GIF
+  - React/Core (0.55.4):
+    - yoga (= 0.55.4.React)
+  - React/CxxBridge (0.55.4):
+    - Folly (= 2016.09.26.00)
     - React/Core
     - React/cxxreact
-  - React/cxxreact (0.56.0):
+  - React/cxxreact (0.55.4):
     - boost-for-react-native (= 1.63.0)
-    - Folly (= 2016.10.31.00)
+    - Folly (= 2016.09.26.00)
     - React/jschelpers
     - React/jsinspector
-  - React/DevSupport (0.56.0):
+  - React/DevSupport (0.55.4):
     - React/Core
     - React/RCTWebSocket
-  - React/fishhook (0.56.0)
-  - React/jschelpers (0.56.0):
-    - Folly (= 2016.10.31.00)
+  - React/fishhook (0.55.4)
+  - React/jschelpers (0.55.4):
+    - Folly (= 2016.09.26.00)
     - React/PrivateDatabase
-  - React/jsinspector (0.56.0)
-  - React/PrivateDatabase (0.56.0)
-  - React/RCTActionSheet (0.56.0):
+  - React/jsinspector (0.55.4)
+  - React/PrivateDatabase (0.55.4)
+  - React/RCTActionSheet (0.55.4):
     - React/Core
-  - React/RCTAnimation (0.56.0):
+  - React/RCTAnimation (0.55.4):
     - React/Core
-  - React/RCTBlob (0.56.0):
+  - React/RCTBlob (0.55.4):
     - React/Core
-  - React/RCTCameraRoll (0.56.0):
+  - React/RCTCameraRoll (0.55.4):
     - React/Core
     - React/RCTImage
-  - React/RCTGeolocation (0.56.0):
+  - React/RCTGeolocation (0.55.4):
     - React/Core
-  - React/RCTImage (0.56.0):
+  - React/RCTImage (0.55.4):
     - React/Core
     - React/RCTNetwork
-  - React/RCTLinkingIOS (0.56.0):
+  - React/RCTLinkingIOS (0.55.4):
     - React/Core
-  - React/RCTNetwork (0.56.0):
+  - React/RCTNetwork (0.55.4):
     - React/Core
-  - React/RCTPushNotification (0.56.0):
+  - React/RCTPushNotification (0.55.4):
     - React/Core
-  - React/RCTSettings (0.56.0):
+  - React/RCTSettings (0.55.4):
     - React/Core
-  - React/RCTText (0.56.0):
+  - React/RCTText (0.55.4):
     - React/Core
-  - React/RCTVibration (0.56.0):
+  - React/RCTVibration (0.55.4):
     - React/Core
-  - React/RCTWebSocket (0.56.0):
+  - React/RCTWebSocket (0.55.4):
     - React/Core
     - React/fishhook
     - React/RCTBlob
@@ -79,6 +85,10 @@ PODS:
     - React
   - RNVectorIcons (4.5.0):
     - React
+  - SDWebImage/Core (4.4.2)
+  - SDWebImage/GIF (4.4.2):
+    - FLAnimatedImage (~> 1.0)
+    - SDWebImage/Core
   - Sentry (3.12.4):
     - Sentry/Core (= 3.12.4)
     - Sentry/KSCrash (= 3.12.4)
@@ -89,7 +99,7 @@ PODS:
     - React
     - Sentry (~> 3.12.4)
     - Sentry/KSCrash (~> 3.12.4)
-  - yoga (0.56.0.React)
+  - yoga (0.55.4.React)
 
 DEPENDENCIES:
   - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
@@ -98,6 +108,7 @@ DEPENDENCIES:
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - RadarSDK (~> 1.3.0)
   - RCTRestart (from `../node_modules/react-native-restart/ios`)
+  - react-native-fast-image (from `../node_modules/react-native-fast-image`)
   - React/Core (from `../node_modules/react-native`)
   - React/CxxBridge (from `../node_modules/react-native`)
   - React/DevSupport (from `../node_modules/react-native`)
@@ -131,6 +142,8 @@ EXTERNAL SOURCES:
     :path: ../node_modules/react-native-restart/ios
   React:
     :path: ../node_modules/react-native
+  react-native-fast-image:
+    :path: ../node_modules/react-native-fast-image
   ReactNativeExceptionHandler:
     :podspec: ../node_modules/react-native-exception-handler/ios/ReactNativeExceptionHandler.podspec
   RNFS:
@@ -145,20 +158,23 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   BVLinearGradient: 4b3f3bdf1ac1a52a5ef5e65c9585d793a7c3f825
-  DoubleConversion: a9706f16e388b53ff12cca34473428ee29746a26
-  Folly: c89ac2d5c6ab169cd7397ef27485c44f35f742c7
-  glog: b3b0330915eccea41c5cc9731a77cf564a9be5ea
+  DoubleConversion: e22e0762848812a87afd67ffda3998d9ef29170c
+  FLAnimatedImage: 4a0b56255d9b05f18b6dd7ee06871be5d3b89e31
+  Folly: 211775e49d8da0ca658aebc8eab89d642935755c
+  glog: 1de0bb937dccdc981596d3b5825ebfb765017ded
   KSCrash: 5394936f41e5c1ef7b79cf79b30d53299b0c160e
   RadarSDK: e73cfee062b9ab25ce540a42e2556a98cdc0276f
   RCTRestart: 2f9ddcfd9abb887f123b6580cec64d72fb6cccaa
-  React: 1fe0eb13d90b625d94c3b117c274dcfd2e760e11
+  React: aa2040dbb6f317b95314968021bd2888816e03d5
+  react-native-fast-image: cba3d9bf9c2cf8ddb643d887a686c53a5dd90a2c
   ReactNativeExceptionHandler: 040b33d72849a0aa862d1dcb54008ccef77a935e
   RNFS: bbb1a64eb245763daf34aea86f97c97c4e85f74c
   RNVectorIcons: c0dbfbf6068fefa240c37b0f71bd03b45dddac44
+  SDWebImage: 624d6e296c69b244bcede364c72ae0430ac14681
   Sentry: 7d3ea7176e5184e9c35c12a5825905345807e8c1
   SentryReactNative: 787a08161d641dde91dd36d4c8e76f9b0ba4fc84
-  yoga: b1ce48b6cf950b98deae82838f5173ea7cf89e85
+  yoga: a23273df0088bf7f2bb7e5d7b00044ea57a2a54a
 
-PODFILE CHECKSUM: ed7c5f98dffbb4b6381905a2c8bcc45b3cb6e870
+PODFILE CHECKSUM: 10e6d2191ae45343eba64d0b71d5e8f11757e583
 
 COCOAPODS: 1.4.0

package-lock.json

@@ -53,6 +53,7 @@
     "react-native-config": "^0.11.5",
     "react-native-datepicker": "^1.7.2",
     "react-native-exception-handler": "^2.9.0",
+    "react-native-fast-image": "^4.0.14",
     "react-native-gifted-form": "^0.1.1",
     "react-native-google-static-map": "^0.1.12",
     "react-native-image-zoom-viewer": "^2.2.13",

package.json

@@ -2,22 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity } from 'react-native';
 import { View, Text } from 'native-base';
-import CacheableImage from 'react-native-cacheable-image';
+import FastImage from 'react-native-fast-image';
 
 import styles from './styles/CategoryStyles';
 
 
 const Category = ({
-  image, title, descritption, titleSize, fallbackImage, onSelectCategory,
+  image: uri, title, descritption, titleSize, onSelectCategory,
 }) => {
   return (
     <TouchableOpacity style={styles.category} onPress={onSelectCategory}>
       <View style={styles.categoryImageContainer}>
-        <CacheableImage
-          resizeMode="cover"
-          source={{ uri: image }}
+        <FastImage
           style={styles.categoryImage}
-          defaultSource={fallbackImage}
+          source={{ uri, priority: FastImage.priority.high }}
+          resizeMode={FastImage.resizeMode.cover}
         />
       </View>
       <View style={styles.textContainer}>

src/components/Category.js

@@ -5,7 +5,7 @@ import { View, Text, Icon } from 'native-base';
 import geodist from 'geodist';
 import StarRating from 'react-native-star-rating';
 import { Actions } from 'react-native-router-flux';
-import CacheableImage from 'react-native-cacheable-image';
+import FastImage from 'react-native-fast-image';
 
 import { openStatus } from 'src/utils/businessHours';
 
@@ -37,11 +37,7 @@ const ListingItem = (props) => {
         style={styles.large}
         onPress={() => Actions.listing({ id, onLeftButton: Actions.pop })}
       >
-        <CacheableImage
-          resizeMode="cover"
-          style={styles.largeImage}
-          source={{ uri: featured_image_url[0] }}
-        />
+        <FastImage style={styles.largeImage} source={{ uri: featured_image_url[0] }} />
         <View style={styles.largeImageMask} />
         <View style={styles.largeRating}>
           <Text style={styles.largeRatingValue}>{listing_rate}</Text>
@@ -83,11 +79,7 @@ const ListingItem = (props) => {
       onPress={() => Actions.listing({ id, onLeftButton: Actions.pop })}
     >
       <View style={styles.compactImageContainer}>
-        <CacheableImage
-          resizeMode="cover"
-          style={styles.compactImage}
-          source={{ uri: featured_image_url[0] }}
-        />
+        <FastImage style={styles.compactImage} source={{ uri: featured_image_url[0] }} />
       </View>
       <View style={styles.compactContent}>
         <Text style={styles.compactTitle} numberOfLines={1}>{title.rendered}</Text>

src/components/ListingItem.js

@@ -8,11 +8,12 @@ import ImageViewer from 'react-native-image-zoom-viewer';
 import GoogleStaticMap from 'react-native-google-static-map';
 import { web, phonecall, email } from 'react-native-communications';
 import {
-  View, FlatList, TouchableOpacity, ActivityIndicator, Modal, Image,
+  View, FlatList, TouchableOpacity, ActivityIndicator, Modal,
 } from 'react-native';
 import {
   Container, Text, Fab, Icon,
 } from 'native-base';
+import FastImage from 'react-native-fast-image';
 
 import { stripHTML } from 'src/utils/strip';
 import returnValidURL from 'src/utils/validURL';
@@ -178,11 +179,7 @@ class ListingDetailsScreen extends Component {
                   renderItem={({ item, index }) => {
                     return (
                       <TouchableOpacity onPress={() => this.toggleModal(index)}>
-                        <Image
-                          resizeMode="cover"
-                          source={{ uri: item[0] }}
-                          style={styles.galleryItem}
-                        />
+                        <FastImage style={styles.galleryItem} source={{ uri: item[0] }} />
                       </TouchableOpacity>
                     );
                   }}