88 * @flow
99 */
1010
11- import type { ImageResult , ImageSource } from '../../modules/ImageLoader' ;
12- import type {
13- ImageLoadingProps ,
14- ImageProps ,
15- Source ,
16- SourceState
17- } from './types' ;
11+ import type { ImageSource } from '../../modules/ImageLoader' ;
12+ import type { ImageProps , Source } from './types' ;
1813
1914import * as React from 'react' ;
2015import createElement from '../createElement' ;
@@ -100,11 +95,6 @@ function getFlatStyle(style, blurRadius, filterId) {
10095 return [ flatStyle , resizeMode , _filter , tintColor ] ;
10196}
10297
103- function resolveAssetDimensions ( source : ImageSource ) {
104- const { height, width } = source ;
105- return { height, width } ;
106- }
107-
10898function resolveSource ( source : ?Source ) : ImageSource {
10999 let resolvedSource = { uri : '' } ;
110100
@@ -132,16 +122,8 @@ function resolveSource(source: ?Source): ImageSource {
132122 resolvedSource = { uri, width : asset . width , height : asset . height } ;
133123 } else if ( typeof source === 'string' ) {
134124 resolvedSource . uri = source ;
135- } else if ( Array . isArray ( source ) ) {
136- if ( process . env . NODE_ENV !== 'production' ) {
137- console . warn (
138- 'The <Image> component does not support multiple sources passed as array, falling back to the first source in the list' ,
139- { source }
140- ) ;
141- }
142-
143- return resolveSource ( source [ 0 ] ) ;
144125 } else if ( source && typeof source . uri === 'string' ) {
126+ // $FlowFixMe
145127 const { uri, width, height, headers } = source ;
146128 resolvedSource = { uri, width, height, headers } ;
147129 }
@@ -159,19 +141,6 @@ function resolveSource(source: ?Source): ImageSource {
159141 return resolvedSource ;
160142}
161143
162- function getSourceToDisplay ( main : SourceState , fallback : SourceState ) {
163- if ( main . status === LOADED ) return main . source ;
164-
165- // If there's no fallback URI, it's safe to use the main source URI
166- if ( main . status === LOADING && ! fallback . source . uri ) {
167- // But it should not be used when the image would be loaded with custom headers
168- // Because the actual URI is only set (as a local blob url) after loading
169- if ( ! main . source . headers ) return main . source ;
170- }
171-
172- return fallback . source ;
173- }
174-
175144interface ImageStatics {
176145 getSize : (
177146 uri : string ,
@@ -212,7 +181,9 @@ const Image: React.AbstractComponent<
212181 }
213182 }
214183
215- // Don't raise load events for the fallback source
184+ // Only the main source is supposed to trigger onLoad/start/end events
185+ // It would be ambiguous to trigger the same `onLoad` event when default source loads
186+ // That's why we don't pass `onLoad` props for the fallback source hook
216187 const fallbackSource = useSource ( { onError } , defaultSource ) ;
217188 const mainSource = useSource (
218189 { onLoad, onLoadStart, onLoadEnd, onError } ,
@@ -222,15 +193,17 @@ const Image: React.AbstractComponent<
222193 const hasTextAncestor = React . useContext ( TextAncestorContext ) ;
223194 const hiddenImageRef = React . useRef ( null ) ;
224195 const filterRef = React . useRef ( _filterId ++ ) ;
196+ const shouldDisplaySource =
197+ mainSource . status === LOADED ||
198+ ( mainSource . status === LOADING && defaultSource == null ) ;
225199 const [ flatStyle , _resizeMode , filter , tintColor ] = getFlatStyle (
226200 style ,
227201 blurRadius ,
228202 filterRef . current
229203 ) ;
230204 const resizeMode = props . resizeMode || _resizeMode || 'cover' ;
231- const availableSource = getSourceToDisplay ( mainSource , fallbackSource ) ;
232- const displayImageUri = ImageLoader . resolveUri ( availableSource . uri ) ;
233- const imageSizeStyle = resolveAssetDimensions ( availableSource ) ;
205+ const selected = shouldDisplaySource ? mainSource : fallbackSource ;
206+ const displayImageUri = selected . source . uri ;
234207 const backgroundImage = displayImageUri ? `url("${ displayImageUri } : null ;
235208 const backgroundSize = getBackgroundSize ( ) ;
236209
@@ -283,7 +256,7 @@ const Image: React.AbstractComponent<
283256 style = { [
284257 styles . root ,
285258 hasTextAncestor && styles . inline ,
286- imageSizeStyle ,
259+ { width : selected . source . width , height : selected . source . height } ,
287260 flatStyle
288261 ] }
289262 >
@@ -326,10 +299,7 @@ ImageWithStatics.queryCache = function (uris) {
326299/**
327300 * Image loading/state management hook
328301 */
329- const useSource = (
330- callbacks : ImageLoadingProps ,
331- source : ?Source
332- ) : SourceState => {
302+ const useSource = ( callbacks , source : ?Source ) => {
333303 const [ resolvedSource , setResolvedSource ] = React . useState < ImageSource > ( ( ) =>
334304 resolveSource ( source )
335305 ) ;
@@ -369,8 +339,9 @@ const useSource = (
369339 return ;
370340 }
371341
342+ // $FlowFixMe
372343 const { onLoad, onLoadStart, onLoadEnd, onError } = callbackRefs . current ;
373- function handleLoad ( result : ImageResult ) {
344+ function handleLoad ( result ) {
374345 if ( onLoad ) onLoad ( { nativeEvent : result } ) ;
375346 if ( onLoadEnd ) onLoadEnd ( ) ;
376347
@@ -398,7 +369,7 @@ const useSource = (
398369 const requestId = ImageLoader . load ( resolvedSource , handleLoad , handleError ) ;
399370
400371 // Release resources on unmount or after starting a new request
401- return ( ) => ImageLoader . release ( requestId ) ;
372+ return ( ) => ImageLoader . abort ( requestId ) ;
402373 } , [ resolvedSource ] ) ;
403374
404375 return { status, source : result } ;
0 commit comments