fix: Fixes WebP rendering on iOS 12. (#412)

fixes issue #298 #385
DylanVann · Feb 22, 2019 · 97630c8 · 97630c8
1 parent dbddf44
commit 97630c8
Show file tree

Hide file tree

Showing 13 changed files with 131 additions and 77 deletions.
diff --git a/ios/Vendor/SDWebImage b/ios/Vendor/SDWebImage
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-native-fast-image",
-    "version": "0.0.0-development",
+    "version": "1.0.0-development",
     "description": "🚩 FastImage, performant React Native image component.",
     "keywords": [
         "cache",

diff --git a/react-native-fast-image-example-cocoapods/ios/Podfile.lock b/react-native-fast-image-example-cocoapods/ios/Podfile.lock
@@ -7,13 +7,38 @@ PODS:
     - 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/webp
+  - libwebp/dec (0.6.1):
+    - libwebp/core
+  - libwebp/demux (0.6.1):
+    - libwebp/core
+  - libwebp/dsp (0.6.1):
+    - libwebp/core
+  - libwebp/enc (0.6.1):
+    - libwebp/core
+  - libwebp/mux (0.6.1):
+    - libwebp/core
+  - libwebp/utils (0.6.1):
+    - libwebp/core
+  - libwebp/webp (0.6.1)
   - React (0.57.3):
     - React/Core (= 0.57.3)
-  - react-native-fast-image (5.0.10):
+  - react-native-fast-image (1.0.0-development):
     - FLAnimatedImage
     - React
     - SDWebImage/Core
     - SDWebImage/GIF
+    - SDWebImage/WebP
   - react-native-image-picker (0.27.1):
     - React
   - React/Core (0.57.3):
@@ -53,10 +78,13 @@ PODS:
     - React/RCTBlob
   - RNVectorIcons (6.0.2):
     - React
-  - SDWebImage/Core (4.4.2)
-  - SDWebImage/GIF (4.4.2):
+  - 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
   - yoga (0.57.3.React)
 
 DEPENDENCIES:
@@ -80,6 +108,7 @@ SPEC REPOS:
   https://github.com/cocoapods/specs.git:
     - boost-for-react-native
     - FLAnimatedImage
+    - libwebp
     - SDWebImage
 
 EXTERNAL SOURCES:
@@ -106,13 +135,14 @@ SPEC CHECKSUMS:
   FLAnimatedImage: 4a0b56255d9b05f18b6dd7ee06871be5d3b89e31
   Folly: c89ac2d5c6ab169cd7397ef27485c44f35f742c7
   glog: e8acf0ebbf99759d3ff18c86c292a5898282dcde
-  React: 1fe0eb13d90b625d94c3b117c274dcfd2e760e11
-  react-native-fast-image: cba3d9bf9c2cf8ddb643d887a686c53a5dd90a2c
-  react-native-image-picker: f42de90075c5b1af53417af927631d909a1a746e
-  RNVectorIcons: 8c52e1e8da1153613fdef44748e865c25556cb9c
-  SDWebImage: 624d6e296c69b244bcede364c72ae0430ac14681
-  yoga: b1ce48b6cf950b98deae82838f5173ea7cf89e85
+  libwebp: 0f01098c6c17175391af621b2f14150f3ca16e16
+  React: a197ec4fee34abff321271f5614cabc517faed71
+  react-native-fast-image: 996f6dc73f4b534ed6587513ad448aae5a48ccbe
+  react-native-image-picker: 3fac3bf5b8ec802785c884c5bde0239ad8433b34
+  RNVectorIcons: d819334932bcda3332deb3d2c8ea4d069e0b98f9
+  SDWebImage: ecc03494e973b93b80213649d32175f8d2d17d4d
+  yoga: c991dffbcb89c7eee1aadf243b72e48d462ee34a
 
 PODFILE CHECKSUM: 9c1b580892a7e8ba16c3ef11342f53e075ff596a
 
-COCOAPODS: 1.5.3
+COCOAPODS: 1.6.1
diff --git a/...mage-example-cocoapods/ios/ReactNativeFastImageExampleCocoaPods.xcodeproj/project.pbxproj b/...mage-example-cocoapods/ios/ReactNativeFastImageExampleCocoaPods.xcodeproj/project.pbxproj
diff --git a/react-native-fast-image-example-cocoapods/package.json b/react-native-fast-image-example-cocoapods/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "16.6.0-alpha.8af6728",
     "react-native": "0.57.3",
-    "react-native-fast-image": "^5.0.11",
+    "react-native-fast-image": "../react-native-fast-image-1.0.0-development.tgz",
     "react-native-image-picker": "^0.27.1",
     "react-native-image-progress": "^1.1.1",
     "react-native-status-bar-height": "^2.1.0",

diff --git a/react-native-fast-image-example-cocoapods/src/LocalImagesExample.js b/react-native-fast-image-example-cocoapods/src/LocalImagesExample.js
@@ -6,11 +6,12 @@ import Section from './Section'
 import FeatureText from './FeatureText'
 import FieldsImage from './images/fields.jpg'
 import FieldsBase64 from './images/fields.js'
+import FieldsWebP from './images/fields.webp'
 import JellyfishImage from './images/jellyfish.gif'
 import ImagePicker from 'react-native-image-picker'
 import BulletText from './BulletText'
 
-var options = {
+const options = {
     title: 'Select Avatar',
     customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
     storageOptions: {
@@ -94,6 +95,13 @@ const Base64 = () => (
     </React.Fragment>
 )
 
+const WebP = () => (
+    <React.Fragment>
+        <BulletText>WebP</BulletText>
+        <Image source={FieldsWebP} />
+    </React.Fragment>
+)
+
 const LocalImagesExample = ({ onPressReload, bust }) => (
     <View>
         <Section>
@@ -112,6 +120,9 @@ const LocalImagesExample = ({ onPressReload, bust }) => (
             <Row>
                 <Base64 />
             </Row>
+            <Row>
+                <WebP />
+            </Row>
             <PhotoExample />
         </View>
     </View>

diff --git a/react-native-fast-image-example-cocoapods/src/images/fields.webp b/react-native-fast-image-example-cocoapods/src/images/fields.webp
diff --git a/react-native-fast-image-example-cocoapods/yarn.lock b/react-native-fast-image-example-cocoapods/yarn.lock
@@ -4855,10 +4855,9 @@ [email protected]:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
-react-native-fast-image@^5.0.11:
-  version "5.0.11"
-  resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-5.0.11.tgz#a8f21864d379e6f566e4f68dd04f2c0f7de0dfec"
-  integrity sha512-5NNQwRniOfSBAvKldyPEs1xotWxrFcplOSQiVc78dv/EhH4G0IpdrLtsQmBdB91EMtPQfvoT269sKqj5MJCgyA==
+react-native-fast-image@../react-native-fast-image-1.0.0-development.tgz:
+  version "1.0.0-development"
+  resolved "../react-native-fast-image-1.0.0-development.tgz#725732e73654283d0efb8a24f0d6ef2a926e9374"
 
 react-native-image-picker@^0.27.1:
   version "0.27.1"

diff --git a/react-native-fast-image-example/package.json b/react-native-fast-image-example/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "16.6.0-alpha.8af6728",
     "react-native": "0.57.4",
-    "react-native-fast-image": "../react-native-fast-image-5.1.0.tgz",
+    "react-native-fast-image": "../react-native-fast-image-1.0.0-development.tgz",
     "react-native-image-picker": "^0.27.1",
     "react-native-image-progress": "^1.1.1",
     "react-native-status-bar-height": "^2.1.0",

diff --git a/react-native-fast-image-example/src/LocalImagesExample.js b/react-native-fast-image-example/src/LocalImagesExample.js
@@ -6,11 +6,12 @@ import Section from './Section'
 import FeatureText from './FeatureText'
 import FieldsImage from './images/fields.jpg'
 import FieldsBase64 from './images/fields.js'
+import FieldsWebP from './images/fields.webp'
 import JellyfishImage from './images/jellyfish.gif'
 import ImagePicker from 'react-native-image-picker'
 import BulletText from './BulletText'
 
-var options = {
+const options = {
     title: 'Select Avatar',
     customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
     storageOptions: {
@@ -41,9 +42,10 @@ class PhotoExample extends Component {
                     response.customButton,
                 )
             } else {
+                const fileUri = `file://${response.path}`
                 const uri = response.uri
                 this.setState({
-                    image: { uri },
+                    image: { uri: uri },
                 })
             }
         })
@@ -93,6 +95,13 @@ const Base64 = () => (
     </React.Fragment>
 )
 
+const WebP = () => (
+    <React.Fragment>
+        <BulletText>WebP</BulletText>
+        <Image source={FieldsWebP} />
+    </React.Fragment>
+)
+
 const LocalImagesExample = ({ onPressReload, bust }) => (
     <View>
         <Section>
@@ -111,6 +120,9 @@ const LocalImagesExample = ({ onPressReload, bust }) => (
             <Row>
                 <Base64 />
             </Row>
+            <Row>
+                <WebP />
+            </Row>
             <PhotoExample />
         </View>
     </View>

diff --git a/react-native-fast-image-example/src/images/fields.webp b/react-native-fast-image-example/src/images/fields.webp
diff --git a/react-native-fast-image-example/yarn.lock b/react-native-fast-image-example/yarn.lock
@@ -4977,9 +4977,9 @@ [email protected]:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
-react-native-fast-image@../react-native-fast-image-5.1.0.tgz:
-  version "5.1.0"
-  resolved "../react-native-fast-image-5.1.0.tgz#39ed466915a1e4fdd173f10530a9fdbb979cf937"
+react-native-fast-image@../react-native-fast-image-1.0.0-development.tgz:
+  version "1.0.0-development"
+  resolved "../react-native-fast-image-1.0.0-development.tgz#725732e73654283d0efb8a24f0d6ef2a926e9374"
 
 react-native-image-picker@^0.27.1:
   version "0.27.1"

diff --git a/react-native-fast-image.podspec b/react-native-fast-image.podspec
@@ -22,5 +22,6 @@ Pod::Spec.new do |s|
   s.dependency 'React'
   s.dependency 'SDWebImage/Core'
   s.dependency 'SDWebImage/GIF'
+  s.dependency 'SDWebImage/WebP'
   s.dependency 'FLAnimatedImage'
 end