How can i use blur hash or thumb hash as fallback of avatar component?

[krishna-gujjjar]

I want to use blur hash or thumb hash as fallback of avatar component.

Also it's fully supported expo-image.

[krishna-gujjjar]

Should i use it like this:

import type { ImageProps } from "expo-image";
import { Image as ImageComponent } from "expo-image";
import { Avatar } from "heroui-native";
import { withUniwind } from "uniwind";

const blurhash = "UcN,VfNe?FxW~ojF%Lof-:t6M|ay${oLE3R*";
const uri = "https://picsum.photoss/id/64/1200";

const Img = withUniwind(ImageComponent);

const Image = (props: ImageProps) => {
  return <Img {...props} />;
};

export default () => (
  <Avatar alt="avatar">
    <Avatar.Image asChild source={{ uri }}>
      <Image className="size-full" contentFit="cover" />
    </Avatar.Image>
    <Avatar.Fallback asChild>
      <Image
        className="size-full"
        contentFit="cover"
        placeholder={{ blurhash }}
      />
    </Avatar.Fallback>
  </Avatar>
);

[vvv-sss]

Almost correct, but no need to use asChild on Avatar.Fallback and use your created Img component so your className works properly with expo-image. I see this example is missing in the docs, will add it.

Also, one thing. If you're going to use expo-image placeholder, there is no need even to use Avatar.Fallback. You can handle the same logic using the one only component:

<Avatar alt="avatar">
  <Avatar.Image asChild source={{ uri }}>
    <Img className="size-full" contentFit="cover" placeholder={{ blurhash }} transition={200} />
  </Avatar.Image>
</Avatar>