Using the react-native <Image /> component with a uri type source and blurRadius={8} intermittently hides the entire component. Ideally the image would load with a blur effect every time. There's no indication of a load error from the onLoad, onError, onLoadEnd, or onLoadStart props but the problem seems to happen less in release builds in the iOS simulator. This makes it seem like a metro bundler issue, or possibly a rendering issue where the component cannot render the image if the uri source is slow to load while a blurRadius is used.

I have tried an <ImageBackground /> component instead, different 'cache' options in the source object, and memoization but have noticed the same results. I don't see other questions about this on StackOverflow or the react-native github repo.

Here's the relevant component I'm rendering inside of a FlatList that exists in a rather large codebase:

<Image
    accessibilityIgnoresInvertColors
    blurRadius={8}
    source={{ uri: imageUrl }}
    style={{
        aspectRatio: 15 / 8,
        position: 'absolute',
        width: '100%',
        zIndex: 0
    }}
    resizeMode="cover"
/>