React Native’de ghost loader nasıl yapılır?

İnternet hızının düşük olduğu veya sunucunun geç cevap verdiği durumlarda, indirilecek içerik beklenirken kullanıcıyı beyaz bir ekranda tutmayı kimse istemez. Fiber ve 4.5G altyapılarında geliştirdiğimiz uygulama da internetin çekmediği yerlerde kullanıldığında böyle bir kullanıcı deneyimi yaşatmak store’dan 1 yıldız almanızla sonuçlanabilir. Bunun yerine kullanıcının, indirilecek içeriğin henüz yüklendiğinden haberdar olduğu ghost loader ekranları günümüzde Facebook, Youtube ve LinkedIn gibi birçok popüler site tarafından kullanılıyor. Bu yazımda da ghost loader ekranlarından bahsedeceğim.

Öncelikle projeminizi oluşturalım ve boş haliyle çalıştıralım:

npx react-native init SampleRNShimmer --template react-native-template-typescript
cd SampleRNShimmer
npx react-native run-ios

Projemize gradient ve shimmer kütüphanelerini ekleyelim, pod’ları yükleyelim, git’e ekleyelim ve vscode ile açalım

yarn add react-native-linear-gradient react-native-shimmer-placeholder
pod install --project-directory=ios/
git init
git add .
git commit -m "First commit"
code .

App.tsx dosyasını açalım ve en basit haliyle ShimmerPlaceholder bileşenini kullanalım:

import React from 'react';
import {SafeAreaView} from 'react-native';
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
const App = () => {
  return (
    <>
      <SafeAreaView>
        <ShimmerPlaceHolder style={{height: 100}} autoRun />
      </SafeAreaView>
    </>
  );
};
export default App;

Uygulamayı çalıştırdığınızda ekran görüntüsü aşağıdaki gibi olacaktır:

Büyük boyutlu fotoğraflar için kullanımı ise aşağıdaki gibidir:

import React, {useState} from 'react';
import {SafeAreaView, Image, Dimensions} from 'react-native';
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
const App = () => {
  const [isDownloaded, setIsDownloaded] = useState(false);
  const width = Dimensions.get('window').width;
  return (
    <>
      <SafeAreaView>
        <ShimmerPlaceHolder
          style={{width: width, height: 200}}
          autoRun
          visible={isDownloaded}>
          <Image style={{width: width, height: 200}}
            source={{ uri:'https://images.unsplash.com/photo-1585409677983-0f6c41ca9c3b?w=5000'}}
            onLoad={() => setIsDownloaded(true)}
          />
        </ShimmerPlaceHolder>
      </SafeAreaView>
    </>
  );
};
export default App;

Not: width veya height değeri verilirken ‘100%’ gibi göreceli değer verildiğinde çalışmıyor ve takılı kalıyor. Bunun yerine Dimensions API ile ekran boyutunu hesaplayarak göreceli değer verebilirsiniz.

Gerçek hayatta bu özelliği yüksek ihtimalle API’den gelen verileri listeye basarken kullanacaksınız. Bu nedenle API’den verileri çekerek ekrana basan bir örnek yapalım.

Gerçek hayatta kullanımı

GitHub API’sini kullanarak react-native-community topluluğunun üyelerinin istesini ekrana basan bir örneğimizi oluşturalım. Böyle işler için ilk adım olarak sıfırdan arayüz oluşturmak amacıyla statik verilerle çalışmak ve setTimeout gibi bir fonksiyonla network isteğini taklit etmek daha doğru olacaktır.

Uygulamayı çalıştırdığınızda aşağıdaki gibi olacaktır:

Şimdi uygulamayı gerçek API ile bağlayalım.

Not: Veriler gelmeden önce data içerisinde hiç veri olmadığından dolayı shimmer elemanları da gösterilemeyeceği için, bir mockData array’i oluşturarak en başta bunu listeye vermek gerekiyor.

Sonuç olarak

İnternetin yavaş olduğu durumlarda veriler gelene dek boş bir ekran göstermek yerine ghost loader göstermek kullanıcı deneyimi açısından çok daha iyidir. Siz de react-native-shimmer-placeholder kütüphanesini kendi uygulamanıza entegre ederek kullanıcı deneyimini arttırabilirsiniz.

Projenin bitmiş halini react-native-shimmer-placeholder-sample reposunda bulabilirsiniz. Bu yazı hakkında soru ve görüşlerinizi aşağıdaki yorumlar kısmından yazabilirsiniz. Bana destek vermek için alkış simgesine tıklayabilirsiniz. Sonraki yazımda görüşmek üzere…