[Feature Request] Support for `placeholder` prop for using blurhash/thumbhash (or even any component like a skeleton) and `blurRadius` prop

[ChristopherGabba]

Hey @mrousavy,

I use expo-image throughout my app and a few key properties that are preventing me from switching over to Nitro Image are the placeholder prop and the blurRadius prop.

<NitroImage
    placeholder={{blurhash: "ABCD"}} // or thumbhash
    blurRadius={100} // makes the image blurred
/>

I also haven't tested it yet but most image libraries come with a Image and an ImageBackground component so that you can put children within the Image.

Does NitroImage support children like that?

Thanks as always,

Chris

[mrousavy]

Could be done in JS:

• Blur (react-native-blur):

  <View>
    <NitroImage {...image} />
    <BlurView {...blur} />
  </View>

• Placeholder:

  <View>
    <NitroImage onLoaded={() => setIsLoaded(false)} />
    {!isLoaded && (<NitroImage {...placeholder} />)}
  </View>

But I think that won't work in recycled lists, so we could have native support for this at some point

[ChristopherGabba]

Yea could be done on JS, the problem is JS Blurviews kinda suck on android. Expo-image does some sort of native filter and actually blurs the image itself (I think), not overlays a blur over it.

The blur radius is actually consistent on both platforms, where as the BlurView on Android is kind of doodoo.

Also I wasn't seeing an onLoaded callback on NitroImage but maybe I missed it. All I could see was an onLayout which may be the same because the NitroImage is loaded outside the component?

Also does NitroImage actually display a thumbhash or just compute it?