최근에 iOS 17 버전으로 업데이트하면서 기존 리액트 네이티브 프로젝트에서 사용하던 react-native-fast-image 에 이슈가 생겼다.

무엇이 문제일까?

Exception thrown while executing UI block: UIGraphicsBeginImageContext() failed to allocate CGBitampContext: size={0, 0}, scale=3.000000, bitmapInfo=0x2002. Use UIGraphicsImageRenderer to avoid this assert.

이미지가 들어가는 모든 스크린에서 랜덤하게 위의 버그가 발생한다. UIGraphicsBeginImageContext 대신 UIGraphicsImageRenderer 를 사용해야하는데, 문제는 node modules 내부를 고쳐야 하는 점이었다. 같은 이슈가 있는지 깃허브를 확인했는데, 많은 사람들이 해당 버그를 고쳐서 PR을 올렸지만 maintainer가 더이상 관리를 하지 않는 것처럼 보였다.

어떻게 해결할까?

현재 프로젝트에서 사용하는 모든 이미지는 FastImage 컴포넌트로 렌더링하고 있는데, 이걸 전부 들어내고 기본 Image 컴포넌트로 대체해야 하는지에 대해 진지하게 고민했다.

이건 너무 번거로운 일일 뿐 아니라 애초에 FastImage 컴포넌트를 사용하기로 한 다양한 목적(깜박임 방지, 가벼운 렌더링) 등을 전부 포기해야 하는 일이었기 때문에, 패키지를 들어내는 대신 직접 고쳐서 사용해보기로 했다.

node_modules 내부 코드를 고치면 당연히 yarn install을 할 때마다 npm 서버에서 당겨온 원래 코드로 돌아가버린다. 이런 일을 방지하기 위해 patch-package 는 변경사항을 프로젝트 내부의 patches 경로에 저장해서 node_modules가 설치될 때마다 원래의 패키지 코드에 커스텀한 변경사항을 지속적으로 반영해준다.

1. 필요한 패키지 설치하기

필요한 패키지를 설치한다.

yarn add patch-package postinstall-postinstall

node_modules 설치 직후에 실행되는 스크립트를 추가한다.

// package.json
{
	...
    "scripts": {
    	...
    	"postinstall": "patch-package"
    },
  	...
}

2. 패키지 코드 커스텀하기

/node_modules/react-native-fast-image/ios/FastImage/FFFastImageView.m 파일을 PR에 올라온 변경사항대로 수정해준다.

3. 패키지의 patch 버전 생성하기

다음을 실행하여 patch 버전을 생성한다.

yarn patch-package react-native-fast-image

이후 patches 경로에 수정된 버전이 생성된다.

참고자료

• https://github.com/DylanVann/react-native-fast-image/pull/1012
• https://github.com/ds300/patch-package#readme