chore: Add demo of how to use WebP on iOS. (#488)

DylanVann · Jul 3, 2019 · efbb012 · efbb012
1 parent 4fa62bb
commit efbb012
Show file tree

Hide file tree

Showing 13 changed files with 18,169 additions and 46 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -1,3 +1,9 @@
 [submodule "ios/Vendor/SDWebImage"]
 	path = ios/Vendor/SDWebImage
 	url = https://github.com/rs/SDWebImage.git
+[submodule "react-native-fast-image-example/ios/Vendor/SDWebImageWebPCoder"]
+	path = react-native-fast-image-example/ios/Vendor/SDWebImageWebPCoder
+	url = https://github.com/SDWebImage/SDWebImageWebPCoder.git
+[submodule "react-native-fast-image-example/ios/Vendor/libwebp-Xcode"]
+	path = react-native-fast-image-example/ios/Vendor/libwebp-Xcode
+	url = https://github.com/SDWebImage/libwebp-Xcode.git
diff --git a/react-native-fast-image-example-cocoapods/ios/Podfile b/react-native-fast-image-example-cocoapods/ios/Podfile
@@ -28,5 +28,8 @@ target 'ReactNativeFastImageExampleCocoaPods' do
     pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
     pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'
     pod 'react-native-fast-image', :path => '../node_modules/react-native-fast-image'
+
+    # WebP support for SDWebImage (used by react-native-fast-image)
+    pod 'SDWebImageWebPCoder'
 
   end
diff --git a/react-native-fast-image-example-cocoapods/ios/Podfile.lock b/react-native-fast-image-example-cocoapods/ios/Podfile.lock
@@ -1,44 +1,40 @@
 PODS:
   - boost-for-react-native (1.63.0)
   - DoubleConversion (1.1.6)
-  - FLAnimatedImage (1.0.12)
   - Folly (2018.10.22.00):
     - boost-for-react-native
     - DoubleConversion
     - glog
   - glog (0.3.5)
-  - libwebp (0.6.1):
-    - libwebp/core (= 0.6.1)
-    - libwebp/dec (= 0.6.1)
-    - libwebp/demux (= 0.6.1)
-    - libwebp/dsp (= 0.6.1)
-    - libwebp/enc (= 0.6.1)
-    - libwebp/mux (= 0.6.1)
-    - libwebp/utils (= 0.6.1)
-    - libwebp/webp (= 0.6.1)
-  - libwebp/core (0.6.1):
+  - libwebp (1.0.2):
+    - libwebp/core (= 1.0.2)
+    - libwebp/dec (= 1.0.2)
+    - libwebp/demux (= 1.0.2)
+    - libwebp/dsp (= 1.0.2)
+    - libwebp/enc (= 1.0.2)
+    - libwebp/mux (= 1.0.2)
+    - libwebp/utils (= 1.0.2)
+    - libwebp/webp (= 1.0.2)
+  - libwebp/core (1.0.2):
     - libwebp/webp
-  - libwebp/dec (0.6.1):
+  - libwebp/dec (1.0.2):
     - libwebp/core
-  - libwebp/demux (0.6.1):
+  - libwebp/demux (1.0.2):
     - libwebp/core
-  - libwebp/dsp (0.6.1):
+  - libwebp/dsp (1.0.2):
     - libwebp/core
-  - libwebp/enc (0.6.1):
+  - libwebp/enc (1.0.2):
     - libwebp/core
-  - libwebp/mux (0.6.1):
+  - libwebp/mux (1.0.2):
     - libwebp/core
-  - libwebp/utils (0.6.1):
+  - libwebp/utils (1.0.2):
     - libwebp/core
-  - libwebp/webp (0.6.1)
+  - libwebp/webp (1.0.2)
   - React (0.59.5):
     - React/Core (= 0.59.5)
-  - react-native-fast-image (5.4.0):
-    - FLAnimatedImage (~> 1)
+  - react-native-fast-image (6.0.1):
     - React
-    - SDWebImage/Core (~> 4)
-    - SDWebImage/GIF (~> 4)
-    - SDWebImage/WebP (~> 4)
+    - SDWebImage (~> 5.0)
   - react-native-image-picker (0.28.1):
     - React
   - React/Core (0.59.5):
@@ -84,17 +80,16 @@ PODS:
     - React/Core
     - React/fishhook
     - React/RCTBlob
-  - RNGestureHandler (1.1.0):
+  - RNGestureHandler (1.3.0):
     - React
   - RNVectorIcons (6.4.2):
     - React
-  - SDWebImage/Core (4.4.5)
-  - SDWebImage/GIF (4.4.5):
-    - FLAnimatedImage (~> 1.0)
-    - SDWebImage/Core
-  - SDWebImage/WebP (4.4.5):
-    - libwebp (~> 0.5)
-    - SDWebImage/Core
+  - SDWebImage (5.0.4):
+    - SDWebImage/Core (= 5.0.4)
+  - SDWebImage/Core (5.0.4)
+  - SDWebImageWebPCoder (0.2.3):
+    - libwebp (~> 1.0)
+    - SDWebImage/Core (~> 5.0)
   - yoga (0.59.5.React)
 
 DEPENDENCIES:
@@ -113,14 +108,15 @@ DEPENDENCIES:
   - React/RCTWebSocket (from `../node_modules/react-native`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
+  - SDWebImageWebPCoder
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
   https://github.com/cocoapods/specs.git:
     - boost-for-react-native
-    - FLAnimatedImage
     - libwebp
     - SDWebImage
+    - SDWebImageWebPCoder
 
 EXTERNAL SOURCES:
   DoubleConversion:
@@ -145,18 +141,18 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   DoubleConversion: bb338842f62ab1d708ceb63ec3d999f0f3d98ecd
-  FLAnimatedImage: 4a0b56255d9b05f18b6dd7ee06871be5d3b89e31
   Folly: de497beb10f102453a1afa9edbf8cf8a251890de
   glog: aefd1eb5dda2ab95ba0938556f34b98e2da3a60d
-  libwebp: 0f01098c6c17175391af621b2f14150f3ca16e16
+  libwebp: b068a3bd7c45f7460f6715be7bed1a18fd5d6b48
   React: 90adac468c7b72bf1fa6c64bf230650f851a8388
-  react-native-fast-image: 54f5b9f585a31b2f1c1eadd8377eb5ee16d09d3b
+  react-native-fast-image: 3a421727f63d96f766c4b4a2d86fe4987f084c87
   react-native-image-picker: fd93361c666f397bdf72f9c6c23f13d2685b9173
-  RNGestureHandler: b65d391f4f570178d657b99a16ec99d09b8656b0
+  RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0
   RNVectorIcons: 6607bd3a30291d0edb56f9bbe7ae411ee2b928b0
-  SDWebImage: ecc03494e973b93b80213649d32175f8d2d17d4d
+  SDWebImage: c739016e4bdf0a4a1f9a04b5e0385395ad63a282
+  SDWebImageWebPCoder: 7568737603c50f6237850afedd7e9e28e5917e6b
   yoga: 2e571f113e8cbeb0eb752aeebc86c1bfe7a8200c
 
-PODFILE CHECKSUM: c92bb16e8db67c58dd8cc5e5937015074c3dd5a2
+PODFILE CHECKSUM: 9e69a6b62fcfcdf9f0b18683c71349ebfe394b37
 
-COCOAPODS: 1.6.1
+COCOAPODS: 1.7.1
diff --git a/...mage-example-cocoapods/ios/ReactNativeFastImageExampleCocoaPods.xcodeproj/project.pbxproj b/...mage-example-cocoapods/ios/ReactNativeFastImageExampleCocoaPods.xcodeproj/project.pbxproj
@@ -1152,8 +1152,6 @@
 			buildActionMask = 2147483647;
 			files = (
 			);
-			inputFileListPaths = (
-			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-ReactNativeFastImageExampleCocoaPods/Pods-ReactNativeFastImageExampleCocoaPods-resources.sh",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
@@ -1173,8 +1171,6 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 			);
 			name = "[CP] Copy Pods Resources";
-			outputFileListPaths = (
-			);
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",

diff --git a/...ative-fast-image-example-cocoapods/ios/ReactNativeFastImageExampleCocoaPods/AppDelegate.m b/...ative-fast-image-example-cocoapods/ios/ReactNativeFastImageExampleCocoaPods/AppDelegate.m
@@ -10,11 +10,15 @@
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
+#import <SDWebImageWebPCoder/SDWebImageWebPCoder.h>
 
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
+  // Register WebP format support
+  [[SDImageCodersManager sharedManager] addCoder:[SDImageWebPCoder sharedCoder]];
+
   RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
   RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                    moduleName:@"ReactNativeFastImageExampleCocoaPods"