우리 회사의 앱은 이미지가 많이 보이는 편이다.
리스트 페이지와 디테일 페이지에서 이미지가 잔뜩 보인다.
근데 react native 일반 Image 컴포넌트는 렌딩이 조금 느리다.
빠른 이미지 렌더를 위해 react-native-fast-image 라이브러리를 사용해보았다.

reac-native-fast-image 깃헙 바로가기

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

기본 사용법

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

const YourImage = () => (
    <FastImage
        style={{ width: 200, height: 200 }}
        source={{uri: 'https://unsplash.it/400/400?image=1'}}
    />
)

placeholder 세팅하기

image placeholder란 이미지가 완전히 렌더 되기 전까지 보이는 화면을 말한다.

import react, {useState} from 'react';
import FastImage from 'react-native-fast-image';

funtion ImgPlaceHolder(){
	const [imgLoad, setImgLoad] = useState(false);
    
	render(
		{!imgLoad && (
			<FastImage
				style={{ width: 200, height: 200 }}
				source={{uri: placeholder 이미지}}
			/>
		)}
		<FastImage
			style={[{ width: 200, height: 200 }, imgLoad ? {} : {width: 0}]}
			source={{uri: 보여야 하는 이미지}}
			onLoadEnd={() => setImgLoad(true)}
		/>
    )
}