react-native-web-tv 0.21.2-tv.10

package/dist/exports/Image/index.js

@@ -0,0 +1,362 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["aria-label", "accessibilityLabel", "blurRadius", "defaultSource", "draggable", "onError", "onLayout", "onLoad", "onLoadEnd", "onLoadStart", "pointerEvents", "source", "style"];
+import * as React from 'react';
+import createElement from '../createElement';
+import { getAssetByID } from '../../modules/AssetRegistry';
+import { createBoxShadowValue } from '../StyleSheet/preprocess';
+import ImageLoader from '../../modules/ImageLoader';
+import PixelRatio from '../PixelRatio';
+import StyleSheet from '../StyleSheet';
+import TextAncestorContext from '../Text/TextAncestorContext';
+import View from '../View';
+import { warnOnce } from '../../modules/warnOnce';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ERRORED = 'ERRORED';
+var LOADED = 'LOADED';
+var LOADING = 'LOADING';
+var IDLE = 'IDLE';
+var _filterId = 0;
+var svgDataUriPattern = /^(data:image\/svg\+xml;utf8,)(.*)/;
+function createTintColorSVG(tintColor, id) {
+  return tintColor && id != null ? /*#__PURE__*/_jsx("svg", {
+    style: {
+      position: 'absolute',
+      height: 0,
+      visibility: 'hidden',
+      width: 0
+    },
+    children: /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsxs("filter", {
+        id: "tint-" + id,
+        suppressHydrationWarning: true,
+        children: [/*#__PURE__*/_jsx("feFlood", {
+          floodColor: "" + tintColor
+        }, tintColor), /*#__PURE__*/_jsx("feComposite", {
+          in2: "SourceAlpha",
+          operator: "in"
+        })]
+      })
+    })
+  }) : null;
+}
+function extractNonStandardStyleProps(style, blurRadius, filterId, tintColorProp) {
+  var flatStyle = StyleSheet.flatten(style);
+  var filter = flatStyle.filter,
+    resizeMode = flatStyle.resizeMode,
+    shadowOffset = flatStyle.shadowOffset,
+    tintColor = flatStyle.tintColor;
+  if (flatStyle.resizeMode) {
+    warnOnce('Image.style.resizeMode', 'Image: style.resizeMode is deprecated. Please use props.resizeMode.');
+  }
+  if (flatStyle.tintColor) {
+    warnOnce('Image.style.tintColor', 'Image: style.tintColor is deprecated. Please use props.tintColor.');
+  }
+
+  // Add CSS filters
+  // React Native exposes these features as props and proprietary styles
+  var filters = [];
+  var _filter = null;
+  if (filter) {
+    filters.push(filter);
+  }
+  if (blurRadius) {
+    filters.push("blur(" + blurRadius + "px)");
+  }
+  if (shadowOffset) {
+    var shadowString = createBoxShadowValue(flatStyle);
+    if (shadowString) {
+      filters.push("drop-shadow(" + shadowString + ")");
+    }
+  }
+  if ((tintColorProp || tintColor) && filterId != null) {
+    filters.push("url(#tint-" + filterId + ")");
+  }
+  if (filters.length > 0) {
+    _filter = filters.join(' ');
+  }
+  return [resizeMode, _filter, tintColor];
+}
+function resolveAssetDimensions(source) {
+  if (typeof source === 'number') {
+    var _getAssetByID = getAssetByID(source),
+      _height = _getAssetByID.height,
+      _width = _getAssetByID.width;
+    return {
+      height: _height,
+      width: _width
+    };
+  } else if (source != null && !Array.isArray(source) && typeof source === 'object') {
+    var _height2 = source.height,
+      _width2 = source.width;
+    return {
+      height: _height2,
+      width: _width2
+    };
+  }
+}
+function resolveAssetUri(source) {
+  var uri = null;
+  if (typeof source === 'number') {
+    // get the URI from the packager
+    var asset = getAssetByID(source);
+    if (asset == null) {
+      throw new Error("Image: asset with ID \"" + source + "\" could not be found. Please check the image source or packager.");
+    }
+    var scale = asset.scales[0];
+    if (asset.scales.length > 1) {
+      var preferredScale = PixelRatio.get();
+      // Get the scale which is closest to the preferred scale
+      scale = asset.scales.reduce((prev, curr) => Math.abs(curr - preferredScale) < Math.abs(prev - preferredScale) ? curr : prev);
+    }
+    var scaleSuffix = scale !== 1 ? "@" + scale + "x" : '';
+    uri = asset ? asset.httpServerLocation + "/" + asset.name + scaleSuffix + "." + asset.type : '';
+  } else if (typeof source === 'string') {
+    uri = source;
+  } else if (source && typeof source.uri === 'string') {
+    uri = source.uri;
+  }
+  if (uri) {
+    var match = uri.match(svgDataUriPattern);
+    // inline SVG markup may contain characters (e.g., #, ") that need to be escaped
+    if (match) {
+      var prefix = match[1],
+        svg = match[2];
+      var encodedSvg = encodeURIComponent(svg);
+      return "" + prefix + encodedSvg;
+    }
+  }
+  return uri;
+}
+var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _ariaLabel = props['aria-label'],
+    accessibilityLabel = props.accessibilityLabel,
+    blurRadius = props.blurRadius,
+    defaultSource = props.defaultSource,
+    draggable = props.draggable,
+    onError = props.onError,
+    onLayout = props.onLayout,
+    onLoad = props.onLoad,
+    onLoadEnd = props.onLoadEnd,
+    onLoadStart = props.onLoadStart,
+    pointerEvents = props.pointerEvents,
+    source = props.source,
+    style = props.style,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  var ariaLabel = _ariaLabel || accessibilityLabel;
+  if (process.env.NODE_ENV !== 'production') {
+    if (props.children) {
+      throw new Error('The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.');
+    }
+  }
+  var _React$useState = React.useState(() => {
+      var uri = resolveAssetUri(source);
+      if (uri != null) {
+        var isLoaded = ImageLoader.has(uri);
+        if (isLoaded) {
+          return LOADED;
+        }
+      }
+      return IDLE;
+    }),
+    state = _React$useState[0],
+    updateState = _React$useState[1];
+  var _React$useState2 = React.useState({}),
+    layout = _React$useState2[0],
+    updateLayout = _React$useState2[1];
+  var hasTextAncestor = React.useContext(TextAncestorContext);
+  var hiddenImageRef = React.useRef(null);
+  var filterRef = React.useRef(_filterId++);
+  var requestRef = React.useRef(null);
+  var shouldDisplaySource = state === LOADED || state === LOADING && defaultSource == null;
+  var _extractNonStandardSt = extractNonStandardStyleProps(style, blurRadius, filterRef.current, props.tintColor),
+    _resizeMode = _extractNonStandardSt[0],
+    filter = _extractNonStandardSt[1],
+    _tintColor = _extractNonStandardSt[2];
+  var resizeMode = props.resizeMode || _resizeMode || 'cover';
+  var tintColor = props.tintColor || _tintColor;
+  var selectedSource = shouldDisplaySource ? source : defaultSource;
+  var displayImageUri = resolveAssetUri(selectedSource);
+  var imageSizeStyle = resolveAssetDimensions(selectedSource);
+  var backgroundImage = displayImageUri ? "url(\"" + displayImageUri + "\")" : null;
+  var backgroundSize = getBackgroundSize();
+
+  // Accessibility image allows users to trigger the browser's image context menu
+  var hiddenImage = displayImageUri ? createElement('img', {
+    alt: ariaLabel || '',
+    style: styles.accessibilityImage$raw,
+    draggable: draggable || false,
+    ref: hiddenImageRef,
+    src: displayImageUri
+  }) : null;
+  function getBackgroundSize() {
+    if (hiddenImageRef.current != null && (resizeMode === 'center' || resizeMode === 'repeat')) {
+      var _hiddenImageRef$curre = hiddenImageRef.current,
+        naturalHeight = _hiddenImageRef$curre.naturalHeight,
+        naturalWidth = _hiddenImageRef$curre.naturalWidth;
+      var _height3 = layout.height,
+        _width3 = layout.width;
+      if (naturalHeight && naturalWidth && _height3 && _width3) {
+        var scaleFactor = Math.min(1, _width3 / naturalWidth, _height3 / naturalHeight);
+        var x = Math.ceil(scaleFactor * naturalWidth);
+        var y = Math.ceil(scaleFactor * naturalHeight);
+        return x + "px " + y + "px";
+      }
+    }
+  }
+  function handleLayout(e) {
+    if (resizeMode === 'center' || resizeMode === 'repeat' || onLayout) {
+      var _layout = e.nativeEvent.layout;
+      onLayout && onLayout(e);
+      updateLayout(_layout);
+    }
+  }
+
+  // Image loading
+  var uri = resolveAssetUri(source);
+  React.useEffect(() => {
+    abortPendingRequest();
+    if (uri != null) {
+      updateState(LOADING);
+      if (onLoadStart) {
+        onLoadStart();
+      }
+      requestRef.current = ImageLoader.load(uri, function load(e) {
+        updateState(LOADED);
+        if (onLoad) {
+          onLoad(e);
+        }
+        if (onLoadEnd) {
+          onLoadEnd();
+        }
+      }, function error() {
+        updateState(ERRORED);
+        if (onError) {
+          onError({
+            nativeEvent: {
+              error: "Failed to load resource " + uri
+            }
+          });
+        }
+        if (onLoadEnd) {
+          onLoadEnd();
+        }
+      });
+    }
+    function abortPendingRequest() {
+      if (requestRef.current != null) {
+        ImageLoader.abort(requestRef.current);
+        requestRef.current = null;
+      }
+    }
+    return abortPendingRequest;
+  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({}, rest), {}, {
+    "aria-label": ariaLabel,
+    onLayout: handleLayout,
+    pointerEvents: pointerEvents,
+    ref: ref,
+    style: [styles.root, hasTextAncestor && styles.inline, imageSizeStyle, style, styles.undo,
+    // TEMP: avoid deprecated shadow props regression
+    // until Image refactored to use createElement.
+    {
+      boxShadow: null
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.image, resizeModeStyles[resizeMode], {
+        backgroundImage,
+        filter
+      }, backgroundSize != null && {
+        backgroundSize
+      }],
+      suppressHydrationWarning: true
+    }), hiddenImage, createTintColorSVG(tintColor, filterRef.current)]
+  }));
+});
+Image.displayName = 'Image';
+
+// $FlowIgnore: This is the correct type, but casting makes it unhappy since the variables aren't defined yet
+var ImageWithStatics = Image;
+ImageWithStatics.getSize = function (uri, success, failure) {
+  ImageLoader.getSize(uri, success, failure);
+};
+ImageWithStatics.prefetch = function (uri) {
+  return ImageLoader.prefetch(uri);
+};
+ImageWithStatics.queryCache = function (uris) {
+  return ImageLoader.queryCache(uris);
+};
+var styles = StyleSheet.create({
+  root: {
+    flexBasis: 'auto',
+    overflow: 'hidden',
+    zIndex: 0
+  },
+  inline: {
+    display: 'inline-flex'
+  },
+  undo: {
+    // These styles are converted to CSS filters applied to the
+    // element displaying the background image.
+    blurRadius: null,
+    shadowColor: null,
+    shadowOpacity: null,
+    shadowOffset: null,
+    shadowRadius: null,
+    tintColor: null,
+    // These styles are not supported
+    overlayColor: null,
+    resizeMode: null
+  },
+  image: _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
+    backgroundColor: 'transparent',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+    height: '100%',
+    width: '100%',
+    zIndex: -1
+  }),
+  accessibilityImage$raw: _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
+    height: '100%',
+    opacity: 0,
+    width: '100%',
+    zIndex: -1
+  })
+});
+var resizeModeStyles = StyleSheet.create({
+  center: {
+    backgroundSize: 'auto'
+  },
+  contain: {
+    backgroundSize: 'contain'
+  },
+  cover: {
+    backgroundSize: 'cover'
+  },
+  none: {
+    backgroundPosition: '0',
+    backgroundSize: 'auto'
+  },
+  repeat: {
+    backgroundPosition: '0',
+    backgroundRepeat: 'repeat',
+    backgroundSize: 'auto'
+  },
+  stretch: {
+    backgroundSize: '100% 100%'
+  }
+});
+export default ImageWithStatics;

package/dist/exports/Image/index.js.flow

@@ -0,0 +1,225 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use client';
+
+import type { ImageProps } from './types';
+import * as React from 'react';
+import createElement from '../createElement';
+import { getAssetByID } from '../../modules/AssetRegistry';
+import { createBoxShadowValue } from '../StyleSheet/preprocess';
+import ImageLoader from '../../modules/ImageLoader';
+import PixelRatio from '../PixelRatio';
+import StyleSheet from '../StyleSheet';
+import TextAncestorContext from '../Text/TextAncestorContext';
+import View from '../View';
+import { warnOnce } from '../../modules/warnOnce';
+export type { ImageProps };
+const ERRORED = 'ERRORED';
+const LOADED = 'LOADED';
+const LOADING = 'LOADING';
+const IDLE = 'IDLE';
+let _filterId = 0;
+const svgDataUriPattern = /^(data:image\/svg\+xml;utf8,)(.*)/;
+declare function createTintColorSVG(tintColor: any, id: any): any;
+declare function extractNonStandardStyleProps(style: any, blurRadius: any, filterId: any, tintColorProp: any): any;
+declare function resolveAssetDimensions(source: any): any;
+declare function resolveAssetUri(source: any): ?string;
+interface ImageStatics {
+  getSize: (uri: string, success: (width: number, height: number) => void, failure: () => void) => void,
+  prefetch: (uri: string) => Promise<void>,
+  queryCache: (uris: Array<string>) => Promise<{|
+    [uri: string]: 'disk/memory'
+  |}>,
+}
+const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>> = React.forwardRef((props, ref) => {
+  const {
+    'aria-label': _ariaLabel,
+    accessibilityLabel,
+    blurRadius,
+    defaultSource,
+    draggable,
+    onError,
+    onLayout,
+    onLoad,
+    onLoadEnd,
+    onLoadStart,
+    pointerEvents,
+    source,
+    style,
+    ...rest
+  } = props;
+  const ariaLabel = _ariaLabel || accessibilityLabel;
+  if (process.env.NODE_ENV !== 'production') {
+    if (props.children) {
+      throw new Error('The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.');
+    }
+  }
+  const [state, updateState] = React.useState(() => {
+    const uri = resolveAssetUri(source);
+    if (uri != null) {
+      const isLoaded = ImageLoader.has(uri);
+      if (isLoaded) {
+        return LOADED;
+      }
+    }
+    return IDLE;
+  });
+  const [layout, updateLayout] = React.useState({});
+  const hasTextAncestor = React.useContext(TextAncestorContext);
+  const hiddenImageRef = React.useRef(null);
+  const filterRef = React.useRef(_filterId++);
+  const requestRef = React.useRef(null);
+  const shouldDisplaySource = state === LOADED || state === LOADING && defaultSource == null;
+  const [_resizeMode, filter, _tintColor] = extractNonStandardStyleProps(style, blurRadius, filterRef.current, props.tintColor);
+  const resizeMode = props.resizeMode || _resizeMode || 'cover';
+  const tintColor = props.tintColor || _tintColor;
+  const selectedSource = shouldDisplaySource ? source : defaultSource;
+  const displayImageUri = resolveAssetUri(selectedSource);
+  const imageSizeStyle = resolveAssetDimensions(selectedSource);
+  const backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null;
+  const backgroundSize = getBackgroundSize();
+
+  // Accessibility image allows users to trigger the browser's image context menu
+  const hiddenImage = displayImageUri ? createElement('img', {
+    alt: ariaLabel || '',
+    style: styles.accessibilityImage$raw,
+    draggable: draggable || false,
+    ref: hiddenImageRef,
+    src: displayImageUri
+  }) : null;
+  declare function getBackgroundSize(): ?string;
+  declare function handleLayout(e: any): any; // Image loading
+  const uri = resolveAssetUri(source);
+  React.useEffect(() => {
+    abortPendingRequest();
+    if (uri != null) {
+      updateState(LOADING);
+      if (onLoadStart) {
+        onLoadStart();
+      }
+      requestRef.current = ImageLoader.load(uri, function load(e) {
+        updateState(LOADED);
+        if (onLoad) {
+          onLoad(e);
+        }
+        if (onLoadEnd) {
+          onLoadEnd();
+        }
+      }, function error() {
+        updateState(ERRORED);
+        if (onError) {
+          onError({
+            nativeEvent: {
+              error: `Failed to load resource ${uri}`
+            }
+          });
+        }
+        if (onLoadEnd) {
+          onLoadEnd();
+        }
+      });
+    }
+    declare function abortPendingRequest(): any;
+    return abortPendingRequest;
+  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  return <View {...rest} aria-label={ariaLabel} onLayout={handleLayout} pointerEvents={pointerEvents} ref={ref} style={[styles.root, hasTextAncestor && styles.inline, imageSizeStyle, style, styles.undo,
+  // TEMP: avoid deprecated shadow props regression
+  // until Image refactored to use createElement.
+  {
+    boxShadow: null
+  }]}>
+      <View style={[styles.image, resizeModeStyles[resizeMode], {
+      backgroundImage,
+      filter
+    }, backgroundSize != null && {
+      backgroundSize
+    }]} suppressHydrationWarning={true} />
+      {hiddenImage}
+      {createTintColorSVG(tintColor, filterRef.current)}
+    </View>;
+});
+Image.displayName = 'Image';
+
+// $FlowIgnore: This is the correct type, but casting makes it unhappy since the variables aren't defined yet
+const ImageWithStatics = (Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>> & ImageStatics);
+ImageWithStatics.getSize = function (uri, success, failure) {
+  ImageLoader.getSize(uri, success, failure);
+};
+ImageWithStatics.prefetch = function (uri) {
+  return ImageLoader.prefetch(uri);
+};
+ImageWithStatics.queryCache = function (uris) {
+  return ImageLoader.queryCache(uris);
+};
+const styles = StyleSheet.create({
+  root: {
+    flexBasis: 'auto',
+    overflow: 'hidden',
+    zIndex: 0
+  },
+  inline: {
+    display: 'inline-flex'
+  },
+  undo: {
+    // These styles are converted to CSS filters applied to the
+    // element displaying the background image.
+    blurRadius: null,
+    shadowColor: null,
+    shadowOpacity: null,
+    shadowOffset: null,
+    shadowRadius: null,
+    tintColor: null,
+    // These styles are not supported
+    overlayColor: null,
+    resizeMode: null
+  },
+  image: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+    height: '100%',
+    width: '100%',
+    zIndex: -1
+  },
+  accessibilityImage$raw: {
+    ...StyleSheet.absoluteFillObject,
+    height: '100%',
+    opacity: 0,
+    width: '100%',
+    zIndex: -1
+  }
+});
+const resizeModeStyles = StyleSheet.create({
+  center: {
+    backgroundSize: 'auto'
+  },
+  contain: {
+    backgroundSize: 'contain'
+  },
+  cover: {
+    backgroundSize: 'cover'
+  },
+  none: {
+    backgroundPosition: '0',
+    backgroundSize: 'auto'
+  },
+  repeat: {
+    backgroundPosition: '0',
+    backgroundRepeat: 'repeat',
+    backgroundSize: 'auto'
+  },
+  stretch: {
+    backgroundSize: '100% 100%'
+  }
+});
+export default ImageWithStatics;

package/dist/exports/Image/types.js.flow

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type { ColorValue, GenericStyleProp } from '../../types';
+import type { ViewProps, ViewStyle } from '../View/types';
+type SourceObject = {
+  /**
+   * `body` is the HTTP body to send with the request. This must be a valid
+   * UTF-8 string, and will be sent exactly as specified, with no
+   * additional encoding (e.g. URL-escaping or base64) applied.
+   */
+  body?: string,
+  /**
+   * `cache` determines how the requests handles potentially cached
+   * responses.
+   *
+   * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS.
+   *
+   * - `reload`: The data for the URL will be loaded from the originating source.
+   * No existing cache data should be used to satisfy a URL load request.
+   *
+   * - `force-cache`: The existing cached data will be used to satisfy the request,
+   * regardless of its age or expiration date. If there is no existing data in the cache
+   * corresponding the request, the data is loaded from the originating source.
+   *
+   * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of
+   * its age or expiration date. If there is no existing data in the cache corresponding
+   * to a URL load request, no attempt is made to load the data from the originating source,
+   * and the load is considered to have failed.
+   *
+   * @platform ios
+   */
+  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached',
+  /**
+   * `headers` is an object representing the HTTP headers to send along with the
+   * request for a remote image.
+   */
+  headers?: {
+    [key: string]: string
+  },
+  /**
+   * `method` is the HTTP Method to use. Defaults to GET if not specified.
+   */
+  method?: string,
+  /**
+   * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if
+   * unspecified, meaning that one image pixel equates to one display point / DIP.
+   */
+  scale?: number,
+  /**
+   * `uri` is a string representing the resource identifier for the image, which
+   * could be an http address, a local file path, or the name of a static image
+   * resource (which should be wrapped in the `require('./path/to/image.png')`
+   * function).
+   */
+  uri: string,
+  /**
+   * `width` and `height` can be specified if known at build time, in which case
+   * these will be used to set the default `<Image/>` component dimensions.
+   */
+  height?: number,
+  width?: number,
+};
+export type ResizeMode = 'center' | 'contain' | 'cover' | 'none' | 'repeat' | 'stretch';
+export type Source = number | string | SourceObject | Array<SourceObject>;
+export type ImageStyle = {
+  ...ViewStyle,
+  // @deprecated
+  resizeMode?: ResizeMode,
+  tintColor?: ColorValue,
+};
+export type ImageProps = {
+  ...ViewProps,
+  blurRadius?: number,
+  defaultSource?: Source,
+  draggable?: boolean,
+  onError?: (e: any) => void,
+  onLayout?: (e: any) => void,
+  onLoad?: (e: any) => void,
+  onLoadEnd?: (e: any) => void,
+  onLoadStart?: (e: any) => void,
+  onProgress?: (e: any) => void,
+  resizeMode?: ResizeMode,
+  source?: Source,
+  style?: GenericStyleProp<ImageStyle>,
+  tintColor?: ColorValue,
+};