Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: on error empty null source [#1028] #1039

Conversation

mistryswapnil-dream11
Copy link

The PR fixes the following #1028.

  1. Previously it was observed that onError was not getting invoked when an empty or null source uri was to FastImage.
  2. Also, whenever onError callback was invoked it was not providing and information on why did the error occurred.
  3. The PR fixes both the points mentioned above.

Scenarios Tested:

  1. When source uri is valid and not reachable, onError should be invoked:
    import React from 'react'
    import {View} from 'react-native'
    import FastImage, { OnErrorEvent } from 'react-native-fast-image'

    export const ImageLoadErrorExample = () => {

    const onImageLoadError = (event: OnErrorEvent) => {
        // Output: com.bumptech.glide.load.engine.GlideException: Failed to load resource
        // There was 1 root cause:
        // com.bumptech.glide.load.HttpException(, status code: 404)
        //  call GlideException#logRootCauses(String) for more detail
        console.log(event.nativeEvent.message)
    }

    return <View>
        <FastImage source={{
            uri: 'https://fastly.picsum.photos/id/31'
        }}
        onError={onImageLoadError}
        />
    </View>
}
  1. When source uri is empty (""), onError should be invoked:
    import React from 'react'
    import {View} from 'react-native'
    import FastImage, { OnErrorEvent } from 'react-native-fast-image'

    export const ImageLoadErrorExample = () => {

    const onImageLoadError = (event: OnErrorEvent) => {
        // Output: Image source uri cannot be empty or null:{"uri":""}
        console.log(event.nativeEvent.message)
    }

    return <View>
        <FastImage source={{
            uri: ''
        }}
        onError={onImageLoadError}
        />
    </View>
}
  1. When source uri is null, onError should be invoked:
import React from 'react'
   import {View} from 'react-native'
   import FastImage, { OnErrorEvent } from 'react-native-fast-image'

   export const ImageLoadErrorExample = () => {

   const onImageLoadError = (event: OnErrorEvent) => {
       // Output: Image source uri cannot be empty or null:{"uri":null}
       console.log(event.nativeEvent.message)
   }

   return <View>
       <FastImage source={{
           uri: null
       }}
       onError={onImageLoadError}
       />
   </View>
}
  1. When source uri is a fallback source, is valid URL, but not reachable:
import React from 'react'
import {View} from 'react-native'
import FastImage, { OnErrorEvent } from 'react-native-fast-image'

export const ImageLoadErrorExample = () => {

const onImageLoadError = (event: OnErrorEvent) => {
    // Output: Unexpected HTTP code Response{protocol=h2, code=404, message=, url=https://fastly.picsum.photos/id/31}
    console.log(event.nativeEvent.message)
}

return <View>
    <FastImage source={{
        uri: 'https://fastly.picsum.photos/id/31'
    }}
    onError={onImageLoadError}
    fallback={true}
    />
</View>
}

@plgrazon
Copy link

@mistryswapnil-dream11 Hi there may I know why this PR was closed?

@mistryswapnil-dream11
Copy link
Author

@mistryswapnil-dream11 Hi there may I know why this PR was closed?

I accidentally created a pull request here.
Also since this repository is no longer maintained we have forked the same and will try to maintain.
Forked Repository: https://github.com/dream11/react-native-fast-image
The same PR is been raised here: dream11#10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants