React Native에서 react-native-fast-image 활용한 GIF 이미지 사용하기

1. react-native-fast-image란?

react-native-fast-image는 React Native에서 이미지 로드를 최적화해주는 라이브러리입니다. 성능과 편의성을 모두 제공하며, GIF 같은 동적 이미지도 지원합니다.

주요 특징:

• 고성능 이미지 처리: 네이티브 수준의 로드 속도.
• 네트워크 캐싱: 빠른 이미지 로딩을 위한 캐싱 지원.
• GIF 지원: 정적 이미지뿐 아니라 동적 이미지도 손쉽게 사용 가능.
• 다양한 옵션 제공: resizeMode, priority, cache 등 다양한 설정.

 

2. 설치 및 기본 설정

react-native-fast-image를 설치한 뒤 GIF 이미지를 지원하려면 간단한 설정이 필요합니다.

 

1. 패키지 설치

npm install react-native-fast-image

 

2. Metro 설정 (GIF 지원 추가)

metro.config.js 파일에서 아래와 같이 설정을 추가합니다.

 

const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer/react-native'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg', 'gif', 'png', 'jpg'],
  },
};

 

3. GIF 이미지 적용 방법

react-native-fast-image는 로컬 및 원격 이미지를 모두 지원합니다.

 

1) 로컬 이미지

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

const Example = () => (
  <FastImage
    source={require('../assets/images/example.gif')}
    style={{ width: 150, height: 150 }}
    resizeMode={FastImage.resizeMode.contain}
  />
);

 

 

• source 필수: require()로 로컬 파일 경로 지정.
• 크기 설정: style에서 width와 height 지정 필수.

 

 

 

2) 원격 이미지

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

const Example = ({ imageUrl }) => (
  <FastImage
    source={{ uri: imageUrl }}
    style={{ width: 200, height: 200 }}
    resizeMode={FastImage.resizeMode.cover}
  />
);

 

• uri 사용: 서버 API URL로 원격 이미지 로드.

 

4. 주요 옵션과 활용 팁

resizeMode (이미지 크기 조정)

• contain: 이미지 비율을 유지하며 컨테이너에 맞춤.
• cover: 컨테이너를 덮도록 이미지 확장.
• stretch: 비율을 무시하고 컨테이너 크기에 맞춤.

 

 

- 아래의 이미지는 fastimage를 통해 png를 동록한 모습입니다. gif 이미지 이긴한데 스샷을 찍기가 힘들어서, png로 대체하였습니다.

 

 

 

 

* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.