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
March 11, 2023, 9:01am
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
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
wodin
March 13, 2023, 4:29pm
5
I think blurhash
makes more sense here than uri
, though:
system
Closed
April 2, 2023, 4:29pm
6
This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.