Görseller yüklenirken gri kutu yerine blur efekti göster.
Nedir?
Görselin blur versiyonunu küçük bir string olarak encode et, yüklenene kadar göster.
Kullanım
import { Blurhash } from 'react-native-blurhash';function ImageWithPlaceholder({ blurhash, uri }) { const [loaded, setLoaded] = useState(false); return ( <View> {!loaded && ( <Blurhash blurhash={blurhash} style={{ width: 300, height: 200 }} /> )} <Image source={{ uri }} onLoad={() => setLoaded(true)} style={loaded ? styles.image : styles.hidden} /> </View> );}
Neden Kullanmalısın?
- Profesyonel görünüm
- Küçük boyut (20-30 karakter)
- Backend'de generate edilir
- Instagram/Pinterest tarzı
Link: blurha.sh