feat: reuse 'img' renderer internal logic w/t useIMGElementState hook

This is a complete refactoring as much as a feature of the image
renderer. Thanks to this new hook, you can very easily create custom
image renderers which still preserves the rich scaling behavior of the
internal component. This hook will return three different states:

- 'loading', when the natural image dimensions have not been retrieved
   yet;
- 'success', when the concrete image dimensions are available;
- 'error', when the image could not be cached.

During the 'loading' phase, this hooks uses `Image.getSize` from react
native to pre-fetch the image and access its natural (intrinsic) dimensions.
See https://drafts.csswg.org/css-images/#sizing-terms for detailed
definitions relating to "concrete", "specified" and "natural" dimensions.

fix #424

packages/render-html/package.json

@@ -39,6 +39,7 @@
     "@babel/preset-typescript": "^7.12.13",
     "@babel/runtime": "^7.12.13",
     "@release-it/conventional-changelog": "^2.0.0",
+    "@testing-library/react-hooks": "^5.0.3",
     "@types/jest": "^26.0.14",
     "@types/react-native": "^0.63.35",
     "@types/react-test-renderer": "^17.0.0",
@@ -51,6 +52,7 @@
     "react-native": "^0.63.4",
     "react-native-builder-bob": "^0.17.1",
     "react-native-testing-library": "^6.0.0",
+    "react-performance-testing": "^1.2.3",
     "react-test-renderer": "^17.0.1",
     "release-it": "^14.2.1",
     "typescript": "~3.9.7"

packages/render-html/src/__mocks__/react-native.js

@@ -24,6 +24,6 @@ export class Image extends RNImage {
         }
       }
       callback.apply(null, dimensions);
-    }, 0);
+    }, 50);
   }
 }