React Native iOS 이미지 깜빡임 해결을 위한 react-native-fast-image 도입기

🧩 문제 상황

OOBE 화면 작업 중 이미지 깜빡임(flickering) 현상 심함
특히 iOS에서 다음과 같은 문제 발생했음:

• 스크린 진입 시 이미지 늦게 뜸 → UI가 비었다가 갑자기 채워짐

• 같은 배경 이미지를 가진 스크린 전환 시 너 눈에 띔

• 사용자 입장에서 "느림"보다 "거슬림"이 더 큼

🧪 시도했던 방법들

1. Image.prefetch() 또는 Asset.loadAsync()로 미리 로딩
   → 이미지 메모리에 올라와도 실제 <Image />에서 다시 깜빡임 발생함

2. FadeIn 이미지 직접 구현
   → 자연스럽고 덜 거슬리게 하기 위해 opacity로 fade 처리했지만 더 눈에 띄는 연출이 되어 역효과

✅ react-native-fast-image 도입

기본 <Image />는 캐싱 처리도 약하고, 렌더링 타이밍 제어도 어려움
iOS에서는 SDWebImage, Android에선 Glide 기반으로 돌아가는 FastImage가 훨씬 유리함

🔧 설치

yarn add react-native-fast-image
npx pod-install

🛠 사용법 요약

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

//로컬이미지
<FastImage
  source={require('../../assets/images/sample.png')}
  style={{ width: 240, height: 240 }}
  resizeMode={FastImage.resizeMode.cover}
/>

//원격이미지
<FastImage
  source={{
    uri: 'https://example.com/image.jpg',
    priority: FastImage.priority.high,
    cache: FastImage.cacheControl.immutable,
  }}
  style={{ width: 240, height: 240 }}
/>

🙏🏻 유용한 기능

• 이미지 로딩 중 기본 이미지

  <FastImage
    source={...}
    defaultSource={require('../../assets/images/placeholder.png')}
  />

• 로딩 이벤트

  onLoadStart={() => console.log('로드 시작')}
  onLoadEnd={() => console.log('로드 끝')}

💡 효과

• 동일한 이미지일 경우 디스크 캐시/메모리 캐시 덕분에 거의 즉시 렌더

• defaultSource 사용시 로딩 중 비어 보이지 않음

• fade-in 구현도 가능 (별도 Animated.View로 감싸면 자연스러움)

• 네이티브 이미지 처리 덕분에 메모리 최적화 및 퍼포먼스 안정적

📌 결론

이미지 깜빡임/지연 렌더링 문제에 react-native-fast-image 는 좋은 선택인거 같음
특히 OOBE나 온보딩, 프로필 이미지처럼 첫인상이 중요한 화면에 매우 효과적임
성능 최적화 + UX 개선 모두 동시에 챙길 수 있음