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

fixes issue #298 #385

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",

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

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",

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>

react-native-fast-image-example-cocoapods/yarn.lock

@@ -4855,10 +4855,9 @@ react-native-drawer-layout@1.3.2:
  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"

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",

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>

react-native-fast-image-example/yarn.lock

@@ -4977,9 +4977,9 @@ react-native-drawer-layout@1.3.2:
  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"

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