expo-image - blurhash placeholder and contentFit -> incorect blurhash size

[soukupl]

There is an “bug” (probably) when using blurhash as placeholder in expo-image. Blurhash is always considered as square (1:1) and when contentFit is set to anything else than fill, it will be rendered incorrectly.

If blurhash is passed to placeholder prop, it should always be rendered as ‘fill’. Blurhash is always rendered as square, no matter the width / height and componentX / componentY set while creating the blurhash.

Example image: https://slavia.esports.cz/foto/2022_7.-kolo-Slovacko-Slavia-1-1/4-9-2022-72.jpg
and corresponding blurhash: UBEVWm}C_1%30x1H0gIU=}=e-o%f0eT0RjMy

Testing with expo-image 1.0.0 and Expo SDK 48.0.6.
btw: I would swear, that expo-image betas were rendering blurhash correctly, but I’m not sure if I had contentFit set to contain or cover

[wodin]

Hi @soukupl

I agree this is unexpected behaviour. Seems to me like it’s worth creating an issue in the expo/expo repository.

I suggest you post a full example there to avoid any possible misunderstandings. e.g. I used this, which is based on the example in the documentation:

import 'expo-dev-client';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import { Image } from 'expo-image';

const blurhash = 'LYA,ty-Va^ogo$juWAWV4,I:jbae';

export default function App() {
  return (
    <View style={styles.container}>
      <View
        style={{
          width: 350,
          height: 200,
          borderWidth: 2,
          borderColor: 'green',
        }}
      >
        <Image
          style={styles.image}
          source="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&dl=benjamin-voros-phIFdC6lA4E-unsplash.jpg&w=1920&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
          placeholder={blurhash}
          contentFit="contain"
          transition={5000}
        />
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    flex: 1,
    width: '100%',
    backgroundColor: '#0553',
  },
});

[soukupl]

Thanks, reported on github (expo-image - blurhash placeholder and contentFit -> incorect blurhash size · Issue #21677 · expo/expo · GitHub)

[soukupl]

FYI: There is a way to set blurhash width and height, setting placeholder as object with size specified instead of plain string blurhash.

Instead of:

const blurhash = 'UDA,w-}[W+tSxyoMM_R*005RjJadJ3X7-qxa';

you can declare an object:

const blurhash = { uri: 'UDA,w-}[W+tSxyoMM_R*005RjJadJ3X7-qxa', width: 20, height: 20 };

[wodin]

I think blurhash makes more sense here than uri, though:

• ImageSource