chore: upgrade example and devDependencies (#802)

ReactNativeFastImageExample/src/ImageGrid.tsx

@@ -25,7 +25,7 @@ class ImageGrid extends Component<ImageGridProps, ImageGridState> {
     constructor(props: ImageGridProps) {
         super(props)
         fetch('https://unsplash.it/list')
-            .then(res => res.json())
+            .then((res) => res.json())
             .then(this._onFetchImagesSuccess)
             .catch(this._onFetchImagesError)
     }

ReactNativeFastImageExample/src/LocalImagesExample.tsx

@@ -11,7 +11,7 @@ import FastImage, { FastImageProps, Source } from 'react-native-fast-image'
 import Section from './Section'
 import FeatureText from './FeatureText'
 import FieldsBase64 from './images/fields'
-import ImagePicker from 'react-native-image-picker'
+import {launchImageLibrary} from 'react-native-image-picker'
 import BulletText from './BulletText'
 
 // @ts-ignore
@@ -23,15 +23,6 @@ import JellyfishGIF from './images/jellyfish.gif'
 // @ts-ignore
 import JellyfishWebP from './images/jellyfish.webp'
 
-const options = {
-    title: 'Select Avatar',
-    customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
-    storageOptions: {
-        skipBackup: true,
-        path: 'images',
-    },
-}
-
 const Image = ({ source, ...p }: FastImageProps) => (
     <FastImage style={styles.imageSquare} source={source} {...p} />
 )
@@ -60,18 +51,18 @@ class PhotoExample extends Component<{}, PhotoExampleState> {
     state: PhotoExampleState = {}
 
     pick = () => {
-        ImagePicker.showImagePicker(options, response => {
+        launchImageLibrary({mediaType: 'photo'}, (response) => {
             if (response.didCancel) {
                 console.log('ImagePicker - User cancelled.')
-            } else if (response.error) {
-                console.log(`ImagePicker - Error ${response.error}.`)
-            } else if (response.customButton) {
-                console.log(`ImagePicker - Tapped ${response.customButton}`)
+            } else if (response.errorCode) {
+                console.log(`ImagePicker - Error ${response.errorMessage}.`)
             } else {
-                const uri = response.uri
-                this.setState({
-                    image: { uri: uri },
-                })
+                const uri = response?.assets?.[0]?.uri
+                if (uri) {
+                    this.setState({
+                        image: { uri: uri },
+                    })
+                }
             }
         })
     }

ReactNativeFastImageExample/src/ProgressExample.tsx

@@ -46,7 +46,7 @@ class ProgressExample extends Component<
                             uri: IMAGE_URL + bust,
                         }}
                         onLoadStart={() => this.setState({ start: Date.now() })}
-                        onProgress={e =>
+                        onProgress={(e) =>
                             this.setState({
                                 progress: Math.round(
                                     100 *

ReactNativeFastImageExample/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { YellowBox } from 'react-native'
+import { LogBox } from 'react-native'
 import { NavigationContainer } from '@react-navigation/native'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { Icon } from './Icon'
@@ -9,7 +9,7 @@ import DefaultImageGrid from './DefaultImageGrid'
 
 const Tab = createBottomTabNavigator()
 
-YellowBox.ignoreWarnings([
+LogBox.ignoreLogs([
     'Warning: isMounted(...) is deprecated',
     'Module RCTImageLoader',
 ])
@@ -22,7 +22,7 @@ export default function App() {
                     name="FastImage Example"
                     component={FastImageExamples}
                     options={{
-                        tabBarIcon: props => (
+                        tabBarIcon: (props) => (
                             <Icon name="ios-information-circle" {...props} />
                         ),
                     }}
@@ -31,8 +31,8 @@ export default function App() {
                     name="Image Grid"
                     component={DefaultImageGrid}
                     options={{
-                        tabBarIcon: props => (
-                            <Icon name="ios-image" {...props} />
+                        tabBarIcon: (props) => (
+                            <Icon name="image-outline" {...props} />
                         ),
                     }}
                 />
@@ -40,8 +40,8 @@ export default function App() {
                     name="FastImage Grid"
                     component={FastImageGrid}
                     options={{
-                        tabBarIcon: props => (
-                            <Icon name="ios-photos" {...props} />
+                        tabBarIcon: (props) => (
+                            <Icon name="images-outline" {...props} />
                         ),
                     }}
                 />

ReactNativeFastImageExample/src/withCacheBust.tsx

@@ -4,8 +4,9 @@ export default function withCacheBust(BaseComponent: React.ComponentType<any>) {
     class WithCacheBust extends Component {
         state = { bust: '?bust' }
 
-        static displayName = `withCacheBust(${BaseComponent.displayName ||
-            BaseComponent.name})`
+        static displayName = `withCacheBust(${
+            BaseComponent.displayName || BaseComponent.name
+        })`
 
         onPressReload = () => {
             // Force complete re-render and bust image cache.