[React Native] react-native-image-progress 사용하기

기본 컴포넌트 Image

네트워크 이미지, 정적 리소스, 임시 로컬 이미지 및 카메라 롤과 같은 로컬 디스크의 이미지를 포함하여 다양한 유형의 이미지를 표시하기 위한 React 구성 요소입니다.

 

android/app/build.gradle 에 아래 코드 추가하면 Gif나 WebP도 이 기본 Image 컴포넌트로 사용 가능합니다.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.5.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:2.5.0'
  implementation 'com.facebook.fresco:webpsupport:2.5.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

 

react-native-fast-image

Gif 이미지 사용하기 위해서 기본 이미지 컴포넌트 사용해도 되지만, 랜더링이 느린 편이라 비교적 빠른 fastImage를 이용하는 편이 낫죠.

https://github.com/DylanVann/react-native-fast-image

yarn add react-native-fast-image
cd ios && pod install

import styled, { css } from 'styled-components/native';
import FastImage from 'react-native-fast-image';

export const Image = styled(FastImage)`
  width: 60px;
  height: 60px;
  resize-mode: cover;
`;

 

react-native-image-progress

근데 또 이 fastImage 만 가지고서는 이미지가 많은 화면의 경우 랜더링이 느려져 fastImage 마저 늦게 뜨는 경우가 있단 말이죠?

그럴 때, 이미지가 뜨기 전까지 나타나는 기본 이미지를 먼저 보여주는 이 라이브러리를 사용하면 됩니다!

https://github.com/oblador/react-native-image-progress

 

yarn add react-native-image-progress

import styled, { css } from 'styled-components/native';
import { createImageProgress } from 'react-native-image-progress';
import FastImage from 'react-native-fast-image';

const Image = createImageProgress(FastImage);

export const ThumbContainer = styled.View`
  width: 100%;
  height: 180px;
  border-radius: 4px;
  background-color: ${({ theme }) => theme.bg22};
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  overflow: hidden;
`;

export const ThumbImage = styled(Image)`
  width: 100%;
  height: 100%;
  resize-mode: contain;
`;

export const ThumbDefaultImage = styled(Image)`
  width: 95px;
  height: 100px;
  resize-mode: contain;
`;

 <ThumbContainer>
    <ThumbImage
      source={{ uri: bannerDetail?.banner }}
      renderIndicator={() => (
        <ThumbDefaultImage source={require('@images/기본이미지.png')} />
      )}
    />
</ThumbContainer>