feat: add retry functionality (#113)

Author: wKovacs64

README.md

@@ -52,6 +52,7 @@ component][render-props] and a [custom hook][hooks-intro].
     - [`getViewProps`](#getviewprops)
     - [`getImageProps`](#getimageprops)
   - [state](#state)
+  - [utils](#utils)
 - [Examples](#examples)
 - [Snack Playground](#snack-playground)
 - [Inspiration](#inspiration)
@@ -237,7 +238,7 @@ Regardless of whether you are using the component or the hook, the results are
 an object containing important properties you'll need for rendering. It will be
 passed to the [Render Prop Function](#render-prop-function) when using the
 component, and returned from the hook invocation when using the hook. The
-properties of this object can be split into two categories as indicated below:
+properties of this object can be split into the following categories:
 
 ### prop getters
 
@@ -283,6 +284,14 @@ These are values that represent the current state of the component.
 | `loading` | `boolean` | whether or not the image is currently loading                  |
 | `error`   | `string`  | an error message if the image failed to load (`''` on success) |
 
+### utils
+
+These are miscellaneous helpers that don't fit in the other major categories.
+
+| property | type         | description                                           |
+| -------- | ------------ | ----------------------------------------------------- |
+| `retry`  | `function()` | force another attempt to resolve the image dimensions |
+
 ## Examples
 
 See the [`examples`][examples-directory] directory for examples using both the

examples/component.md

@@ -61,19 +61,20 @@ const MyTouchableComponent = ({ imageUri, onPress }) => (
 
 ```jsx
 import React from 'react';
-import { ActivityIndicator, Image, Text, View } from 'react-native';
+import { ActivityIndicator, Image, Text, Button, View } from 'react-native';
 import ResponsiveImageView from 'react-native-responsive-image-view';
 
 const MyComponent = ({ imageUri }) => (
   <ResponsiveImageView source={{ uri: imageUri }}>
-    {({ error, loading, getViewProps, getImageProps }) => {
+    {({ error, loading, retry, getViewProps, getImageProps }) => {
       if (loading) {
         return <ActivityIndicator animating={true} size="large" />;
       }
       if (error) {
         return (
           <View>
             <Text>{error}</Text>
+            <Button onPress={retry} title="Retry" />
           </View>
         );
       }

examples/hook.md

@@ -68,13 +68,14 @@ const MyTouchableComponent = ({ imageUri, onPress }) => {
 
 ```jsx
 import React from 'react';
-import { ActivityIndicator, Image, Text, View } from 'react-native';
+import { ActivityIndicator, Image, Text, Button, View } from 'react-native';
 import { useResponsiveImageView } from 'react-native-responsive-image-view';
 
 const MyComponent = ({ imageUri }) => {
   const {
     error,
     loading,
+    retry,
     getViewProps,
     getImageProps,
   } = useResponsiveImageView({ source: { uri: imageUri } });
@@ -87,6 +88,7 @@ const MyComponent = ({ imageUri }) => {
     return (
       <View>
         <Text>{error}</Text>
+        <Button onPress={retry} title="Retry" />
       </View>
     );
   }

useResponsiveImageView.js

@@ -30,6 +30,7 @@ function getImageSize(uri, onImageSizeSuccess, onImageSizeFailure) {
 const initialState = {
   loading: true,
   error: '',
+  retryCount: 0,
   aspectRatio: undefined,
 };
 
@@ -39,17 +40,24 @@ function reducer(state, action) {
       return {
         ...initialState,
         loading: false,
+        retryCount: state.retryCount,
         aspectRatio: action.payload,
       };
     case 'FAILURE':
       return {
         ...initialState,
         loading: false,
         error: action.payload,
+        retryCount: state.retryCount,
+      };
+    case 'RETRY':
+      return {
+        ...initialState,
+        retryCount: state.retryCount + 1,
       };
     /* istanbul ignore next: this will never happen */
     default:
-      return state;
+      throw new Error(`Unexpected action type: ${action.type}`);
   }
 }
 
@@ -67,6 +75,10 @@ function useResponsiveImageView({
 
   const [state, dispatch] = React.useReducer(reducer, initialState);
 
+  function retry() {
+    dispatch({ type: 'RETRY' });
+  }
+
   function isAspectRatioControlled() {
     return controlledAspectRatio !== undefined;
   }
@@ -131,15 +143,16 @@ function useResponsiveImageView({
       pendingGetImageSize.cancel();
     };
     // Using JSON.stringify here because the `source` parameter can be a nested
-    // object. The alternative is requiring the user to memoize the parameters,
-    // but that would add usage overhead and potential confusion (at least in
-    // the early days of hooks).
+    // object. The alternative is requiring the user to memoize it, by why make
+    // them do that when we don't have to? (Note: they already have to memoize
+    // onLoad and onError, but those are much less likely to be used.)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(initialSource), onLoad, onError]);
+  }, [JSON.stringify(initialSource), onLoad, onError, state.retryCount]);
 
   return {
     loading: state.loading,
     error: state.error,
+    retry,
     getViewProps,
     getImageProps,
   };

useResponsiveImageView.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
+import { render, act } from '@testing-library/react-native';
 import {
   mockUriGood,
   mockUriBad,
@@ -65,6 +65,19 @@ describe('error', () => {
   });
 });
 
+describe('retry', () => {
+  it('retries', () => {
+    const { children } = renderHook({ source: { uri: mockUriBad } });
+    const { retry } = children.mock.calls[1][0];
+    expect(children.mock.calls[1][0].loading).toBe(false);
+    act(() => {
+      retry();
+    });
+    expect(children.mock.calls[2][0].loading).toBe(true);
+    expect(children.mock.calls[3][0].loading).toBe(false);
+  });
+});
+
 describe('getViewProps', () => {
   it('includes controlled aspectRatio', async () => {
     const { children } = renderHook({