React Native-appar laddar ofta bilder långsamt och de flimrar när de uppdateras. react-native-fast-image löser detta problem genom att ersätta React Natives inbyggda bildkomponent med något mycket snabbare. Om dina användare rullar genom en feed eller tittar på en produktlista, märker de omedelbar skillnad. Det är faktiskt ganska imponerande hur stor förbättringen blir.

Varför vanlig bildladdning inte räcker till

React Natives inbyggda Image-komponent cachar bilder dåligt. När användare uppdaterar appen eller ser samma bild igen flimrar den ofta. Servern kan säga "använd denna bild från cache", men React Native lyssnar inte alltid på det. På Android och iOS finns starkare verktyg Glide och SDWebImage som cachar smartare. react-native-fast-image använder dessa verktyg bakom kulisserna (det är lite som att ge din app stereoida). En bildapp blir då snabbare och smidigare för användarna.

Så kommer du igång på 5 minuter

Börja med installation:

• Kör yarn add react-native-fast-image
• Sedan react-native link (eller auto-linking gör det automatiskt)
• För iOS, kör pod install

Byt sedan från Image till FastImage:

import FastImage from 'react-native-fast-image';

<FastImage
  style={{width: 200, height: 200}}
  source={{
    uri: 'https://example.com/bild.png',
    priority: FastImage.priority.high,
  }}
/>

Det viktigaste är prioritering. Sätt priority.high för viktiga bilder (en produktbild) och priority.low för bakgrunder. Biblioteket cachar aggressivt, så samma bild laddar nästa gång i millisekunder. Du kan också förladda kritiska bilder för ännu bättre prestanda:

FastImage.preload([
  {uri: 'https://example.com/bild1.png'},
  {uri: 'https://example.com/bild2.png'},
]);

Om du behöver autentisering, lägg till headers direkt i source. Stödet för GIF-animering, och avrundade hörn ingår redan. En praktisk tips: testa appen offline. Cachade bilder visas från filsystemet utan nätverk, vilket är superbra för användarupplevelsen.

Börja redan idag och se hur dina användare får en snabbare, smidigare upplevelse när de scrollar genom innehålet.