diff --git a/README.md b/README.md index 2b681343f..6d6821099 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ +

+ 🚩 UNSUPPORTED FORK! The orgininal repo https://github.com/DylanVann/react-native-fast-image is not supported anymore. This repo fixed a critical problem for iOS 17 muntius/react-native-fast-image, but didn't update the releases or npm registry. This repo just includes the built dist folder so that it can be installed with npm by adding "react-native-fast-image": "github:nReality/react-native-fast-image" to package.json +

+

🚩 FastImage

diff --git a/dist/index.cjs.js b/dist/index.cjs.js new file mode 100644 index 000000000..31ff9e683 --- /dev/null +++ b/dist/index.cjs.js @@ -0,0 +1,137 @@ +'use strict'; + +var _extends = require('@babel/runtime/helpers/extends'); +var React = require('react'); +var reactNative = require('react-native'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends); +var React__default = /*#__PURE__*/_interopDefaultLegacy(React); + +const resizeMode = { + contain: 'contain', + cover: 'cover', + stretch: 'stretch', + center: 'center' +}; +const priority = { + low: 'low', + normal: 'normal', + high: 'high' +}; +const cacheControl = { + // Ignore headers, use uri as cache key, fetch only if not in cache. + immutable: 'immutable', + // Respect http headers, no aggressive caching. + web: 'web', + // Only load from cache. + cacheOnly: 'cacheOnly' +}; +const resolveDefaultSource = defaultSource => { + if (!defaultSource) { + return null; + } + if (reactNative.Platform.OS === 'android') { + // Android receives a URI string, and resolves into a Drawable using RN's methods. + const resolved = reactNative.Image.resolveAssetSource(defaultSource); + if (resolved) { + return resolved.uri; + } + return null; + } + // iOS or other number mapped assets + // In iOS the number is passed, and bridged automatically into a UIImage + return defaultSource; +}; +function FastImageBase({ + source, + defaultSource, + tintColor, + blurRadius, + onLoadStart, + onProgress, + onLoad, + onError, + onLoadEnd, + style, + fallback, + children, + // eslint-disable-next-line no-shadow + resizeMode = 'cover', + forwardedRef, + ...props +}) { + if (fallback) { + const cleanedSource = { + ...source + }; + delete cleanedSource.cache; + const resolvedSource = reactNative.Image.resolveAssetSource(cleanedSource); + return /*#__PURE__*/React__default["default"].createElement(reactNative.View, { + style: [styles.imageContainer, style], + ref: forwardedRef + }, /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends__default["default"]({}, props, { + style: [reactNative.StyleSheet.absoluteFill, { + tintColor + }], + source: resolvedSource, + defaultSource: defaultSource, + onLoadStart: onLoadStart, + onProgress: onProgress, + onLoad: onLoad, + onError: onError, + onLoadEnd: onLoadEnd, + resizeMode: resizeMode, + blurRadius: blurRadius + })), children); + } + const resolvedSource = reactNative.Image.resolveAssetSource(source); + const resolvedDefaultSource = resolveDefaultSource(defaultSource); + return /*#__PURE__*/React__default["default"].createElement(reactNative.View, { + style: [styles.imageContainer, style], + ref: forwardedRef + }, /*#__PURE__*/React__default["default"].createElement(FastImageView, _extends__default["default"]({}, props, { + tintColor: tintColor, + style: reactNative.StyleSheet.absoluteFill, + source: resolvedSource, + defaultSource: resolvedDefaultSource, + onFastImageLoadStart: onLoadStart, + onFastImageProgress: onProgress, + onFastImageLoad: onLoad, + onFastImageError: onError, + onFastImageLoadEnd: onLoadEnd, + resizeMode: resizeMode, + blurRadius: blurRadius + })), children); +} +const FastImageMemo = /*#__PURE__*/React.memo(FastImageBase); +const FastImageComponent = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement(FastImageMemo, _extends__default["default"]({ + forwardedRef: ref +}, props))); +FastImageComponent.displayName = 'FastImage'; +const FastImage = FastImageComponent; +FastImage.resizeMode = resizeMode; +FastImage.cacheControl = cacheControl; +FastImage.priority = priority; +FastImage.preload = sources => reactNative.NativeModules.FastImageView.preload(sources); +FastImage.clearMemoryCache = () => reactNative.NativeModules.FastImageView.clearMemoryCache(); +FastImage.clearDiskCache = () => reactNative.NativeModules.FastImageView.clearDiskCache(); +const styles = reactNative.StyleSheet.create({ + imageContainer: { + overflow: 'hidden' + } +}); + +// Types of requireNativeComponent are not correct. +const FastImageView = reactNative.requireNativeComponent('FastImageView', FastImage, { + nativeOnly: { + onFastImageLoadStart: true, + onFastImageProgress: true, + onFastImageLoad: true, + onFastImageError: true, + onFastImageLoadEnd: true + } +}); + +module.exports = FastImage; diff --git a/dist/index.cjs.js.flow b/dist/index.cjs.js.flow new file mode 100644 index 000000000..fc8768630 --- /dev/null +++ b/dist/index.cjs.js.flow @@ -0,0 +1,77 @@ +// @flow + +import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes' +import type { SyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes' + +export type OnLoadEvent = SyntheticEvent< + $ReadOnly<{ + width: number, + height: number, + }> +> + +export type OnProgressEvent = SyntheticEvent< + $ReadOnly<{| + loaded: number, + total: number, + |}> +> + +export type ResizeMode = $ReadOnly<{| + contain: 'contain', + cover: 'cover', + stretch: 'stretch', + center: 'center', +|}> + +export type Priority = $ReadOnly<{| + low: 'low', + normal: 'normal', + high: 'high', +|}> + +export type CacheControl = $ReadOnly<{| + immutable: 'immutable', + web: 'web', + cacheOnly: 'cacheOnly', +|}> + +export type ResizeModes = $Values +export type Priorities = $Values +export type CacheControls = $Values + +export type PreloadFn = (sources: Array) => void +export type FastImageSource = { + uri?: string, + headers?: Object, + priority?: Priorities, + cache?: CacheControls, + cacheKeyIgnoreURLParams?: boolean, +} + +export type FastImageProps = $ReadOnly<{| + ...ViewProps, + onError?: ?() => void, + onLoad?: ?(event: OnLoadEvent) => void, + onLoadEnd?: ?() => void, + onLoadStart?: ?() => void, + onProgress?: ?(event: OnProgressEvent) => void, + + source?: ?(FastImageSource | number), + defaultSource?: ?number, + + tintColor?: number | string, + blurRadius?: number, + resizeMode?: ?ResizeModes, + fallback?: ?boolean, + testID?: ?string, +|}> + +declare export default class FastImage extends React$Component { + static resizeMode: ResizeMode; + static priority: Priority; + static cacheControl: CacheControl; + static preload: PreloadFn; + static clearMemoryCache: () => Promise; + static clearDiskCache: () => Promise; +} diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 000000000..186626318 --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1,111 @@ +import React from 'react'; +import { AccessibilityProps, ColorValue, FlexStyle, ImageRequireSource, LayoutChangeEvent, ShadowStyleIOS, StyleProp, TransformsStyle, ViewProps } from 'react-native'; +export type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center'; +declare const resizeMode: { + readonly contain: "contain"; + readonly cover: "cover"; + readonly stretch: "stretch"; + readonly center: "center"; +}; +export type Priority = 'low' | 'normal' | 'high'; +declare const priority: { + readonly low: "low"; + readonly normal: "normal"; + readonly high: "high"; +}; +export type Cache = 'immutable' | 'web' | 'cacheOnly'; +declare const cacheControl: { + readonly immutable: "immutable"; + readonly web: "web"; + readonly cacheOnly: "cacheOnly"; +}; +export type Source = { + uri?: string; + headers?: { + [key: string]: string; + }; + priority?: Priority; + cache?: Cache; + cacheKeyIgnoreURLParams?: boolean; + blurRadius?: number; +}; +export interface OnLoadEvent { + nativeEvent: { + width: number; + height: number; + }; +} +export interface OnProgressEvent { + nativeEvent: { + loaded: number; + total: number; + }; +} +export interface ImageStyle extends FlexStyle, TransformsStyle, ShadowStyleIOS { + backfaceVisibility?: 'visible' | 'hidden'; + borderBottomLeftRadius?: number; + borderBottomRightRadius?: number; + backgroundColor?: string; + borderColor?: string; + borderWidth?: number; + borderRadius?: number; + borderTopLeftRadius?: number; + borderTopRightRadius?: number; + overlayColor?: string; + opacity?: number; +} +export interface FastImageProps extends AccessibilityProps, ViewProps { + source?: Source | ImageRequireSource; + defaultSource?: ImageRequireSource; + resizeMode?: ResizeMode; + fallback?: boolean; + onLoadStart?(): void; + onProgress?(event: OnProgressEvent): void; + onLoad?(event: OnLoadEvent): void; + onError?(): void; + onLoadEnd?(): void; + /** + * onLayout function + * + * Invoked on mount and layout changes with + * + * {nativeEvent: { layout: {x, y, width, height}}}. + */ + onLayout?: (event: LayoutChangeEvent) => void; + /** + * + * Style + */ + style?: StyleProp; + /** + * TintColor + * + * If supplied, changes the color of all the non-transparent pixels to the given color. + */ + tintColor?: ColorValue; + /** + * BlurRadius + * + * The blur radius of the blur filter added to the image. + */ + blurRadius?: number; + /** + * A unique identifier for this element to be used in UI Automation testing scripts. + */ + testID?: string; + /** + * Render children within the image. + */ + children?: React.ReactNode; +} +export interface FastImageStaticProperties { + resizeMode: typeof resizeMode; + priority: typeof priority; + cacheControl: typeof cacheControl; + preload: (sources: Source[]) => void; + clearMemoryCache: () => Promise; + clearDiskCache: () => Promise; +} +declare const FastImage: React.ComponentType & FastImageStaticProperties; +export default FastImage; +//# sourceMappingURL=index.d.ts.map \ No newline at end of file diff --git a/dist/index.d.ts.map b/dist/index.d.ts.map new file mode 100644 index 000000000..a2960dc9f --- /dev/null +++ b/dist/index.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 000000000..bcb0dbe81 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,130 @@ +import _extends from '@babel/runtime/helpers/extends'; +import React, { forwardRef, memo } from 'react'; +import { NativeModules, StyleSheet, requireNativeComponent, Image, View, Platform } from 'react-native'; + +const resizeMode = { + contain: 'contain', + cover: 'cover', + stretch: 'stretch', + center: 'center' +}; +const priority = { + low: 'low', + normal: 'normal', + high: 'high' +}; +const cacheControl = { + // Ignore headers, use uri as cache key, fetch only if not in cache. + immutable: 'immutable', + // Respect http headers, no aggressive caching. + web: 'web', + // Only load from cache. + cacheOnly: 'cacheOnly' +}; +const resolveDefaultSource = defaultSource => { + if (!defaultSource) { + return null; + } + if (Platform.OS === 'android') { + // Android receives a URI string, and resolves into a Drawable using RN's methods. + const resolved = Image.resolveAssetSource(defaultSource); + if (resolved) { + return resolved.uri; + } + return null; + } + // iOS or other number mapped assets + // In iOS the number is passed, and bridged automatically into a UIImage + return defaultSource; +}; +function FastImageBase({ + source, + defaultSource, + tintColor, + blurRadius, + onLoadStart, + onProgress, + onLoad, + onError, + onLoadEnd, + style, + fallback, + children, + // eslint-disable-next-line no-shadow + resizeMode = 'cover', + forwardedRef, + ...props +}) { + if (fallback) { + const cleanedSource = { + ...source + }; + delete cleanedSource.cache; + const resolvedSource = Image.resolveAssetSource(cleanedSource); + return /*#__PURE__*/React.createElement(View, { + style: [styles.imageContainer, style], + ref: forwardedRef + }, /*#__PURE__*/React.createElement(Image, _extends({}, props, { + style: [StyleSheet.absoluteFill, { + tintColor + }], + source: resolvedSource, + defaultSource: defaultSource, + onLoadStart: onLoadStart, + onProgress: onProgress, + onLoad: onLoad, + onError: onError, + onLoadEnd: onLoadEnd, + resizeMode: resizeMode, + blurRadius: blurRadius + })), children); + } + const resolvedSource = Image.resolveAssetSource(source); + const resolvedDefaultSource = resolveDefaultSource(defaultSource); + return /*#__PURE__*/React.createElement(View, { + style: [styles.imageContainer, style], + ref: forwardedRef + }, /*#__PURE__*/React.createElement(FastImageView, _extends({}, props, { + tintColor: tintColor, + style: StyleSheet.absoluteFill, + source: resolvedSource, + defaultSource: resolvedDefaultSource, + onFastImageLoadStart: onLoadStart, + onFastImageProgress: onProgress, + onFastImageLoad: onLoad, + onFastImageError: onError, + onFastImageLoadEnd: onLoadEnd, + resizeMode: resizeMode, + blurRadius: blurRadius + })), children); +} +const FastImageMemo = /*#__PURE__*/memo(FastImageBase); +const FastImageComponent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(FastImageMemo, _extends({ + forwardedRef: ref +}, props))); +FastImageComponent.displayName = 'FastImage'; +const FastImage = FastImageComponent; +FastImage.resizeMode = resizeMode; +FastImage.cacheControl = cacheControl; +FastImage.priority = priority; +FastImage.preload = sources => NativeModules.FastImageView.preload(sources); +FastImage.clearMemoryCache = () => NativeModules.FastImageView.clearMemoryCache(); +FastImage.clearDiskCache = () => NativeModules.FastImageView.clearDiskCache(); +const styles = StyleSheet.create({ + imageContainer: { + overflow: 'hidden' + } +}); + +// Types of requireNativeComponent are not correct. +const FastImageView = requireNativeComponent('FastImageView', FastImage, { + nativeOnly: { + onFastImageLoadStart: true, + onFastImageProgress: true, + onFastImageLoad: true, + onFastImageError: true, + onFastImageLoadEnd: true + } +}); + +export { FastImage as default }; diff --git a/dist/index.js.flow b/dist/index.js.flow new file mode 100644 index 000000000..fc8768630 --- /dev/null +++ b/dist/index.js.flow @@ -0,0 +1,77 @@ +// @flow + +import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes' +import type { SyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes' + +export type OnLoadEvent = SyntheticEvent< + $ReadOnly<{ + width: number, + height: number, + }> +> + +export type OnProgressEvent = SyntheticEvent< + $ReadOnly<{| + loaded: number, + total: number, + |}> +> + +export type ResizeMode = $ReadOnly<{| + contain: 'contain', + cover: 'cover', + stretch: 'stretch', + center: 'center', +|}> + +export type Priority = $ReadOnly<{| + low: 'low', + normal: 'normal', + high: 'high', +|}> + +export type CacheControl = $ReadOnly<{| + immutable: 'immutable', + web: 'web', + cacheOnly: 'cacheOnly', +|}> + +export type ResizeModes = $Values +export type Priorities = $Values +export type CacheControls = $Values + +export type PreloadFn = (sources: Array) => void +export type FastImageSource = { + uri?: string, + headers?: Object, + priority?: Priorities, + cache?: CacheControls, + cacheKeyIgnoreURLParams?: boolean, +} + +export type FastImageProps = $ReadOnly<{| + ...ViewProps, + onError?: ?() => void, + onLoad?: ?(event: OnLoadEvent) => void, + onLoadEnd?: ?() => void, + onLoadStart?: ?() => void, + onProgress?: ?(event: OnProgressEvent) => void, + + source?: ?(FastImageSource | number), + defaultSource?: ?number, + + tintColor?: number | string, + blurRadius?: number, + resizeMode?: ?ResizeModes, + fallback?: ?boolean, + testID?: ?string, +|}> + +declare export default class FastImage extends React$Component { + static resizeMode: ResizeMode; + static priority: Priority; + static cacheControl: CacheControl; + static preload: PreloadFn; + static clearMemoryCache: () => Promise; + static clearDiskCache: () => Promise; +} diff --git a/dist/index.test.d.ts b/dist/index.test.d.ts new file mode 100644 index 000000000..121d59b38 --- /dev/null +++ b/dist/index.test.d.ts @@ -0,0 +1,2 @@ +export {}; +//# sourceMappingURL=index.test.d.ts.map \ No newline at end of file diff --git a/dist/index.test.d.ts.map b/dist/index.test.d.ts.map new file mode 100644 index 000000000..e451024d1 --- /dev/null +++ b/dist/index.test.d.ts.map @@ -0,0 +1 @@ +{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../src/index.test.tsx"],"names":[],"mappings":""} \ No newline at end of file