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

Expo SDK
1

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.

2023-03-10---000429
2023-03-10---000430

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 :innocent:

2

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',
  },
});
1 Like
3

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

4

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 };
1 Like
5

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