[RN] 🪅patch-package로 node_modules를 커스텀하고 관리하기

TATA·2024년 9월 9일

react native

React-Native

목록 보기

10/12

▷ patch-package로 node_modules를 커스텀하고 관리하기

react-native-calendars 라이브러리의 CalendarList 컴포넌트를 사용할 때, 스타일이 늦게 적용되어 스타일이 반영되기 전에 날짜 텍스트가 잠깐 보이는 문제가 있었다.

이슈 해결 방법

이 문제를 해결하려면 node_modules 폴더에서 직접 수정이 필요했다.

node_modules/react-native-calendars/src/calendar-list/item.js

 if (!visible) {
    return (<View style={[textStyle,{alignSelf:'center',justifyContent:'center'}]}><ActivityIndicator size={'large'}color={'#793FB5'}/></View>);
 }

그럼 이제 바뀐 node_modules를 patch-package로 관리해줘야 한다.

🪅 package.json

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

🪅 설치

yarn add patch-package postinstall-postinstall

🪅 활용 방법

# yarn patch-package package-name 
yarn patch-package react-native-calendars # patches폴더 안에 react-native-calendars.patch 파일이 생성

잘 되는지 확인하려면 node_modules 폴더를 삭제하고, yarn install 후에 yarn postinstall하면 된다.

# ios 캐시 제거
cd ios
rm -rf Podfile.lock Pods
pod install
yarn ios

# android 캐시 제거
cd android
./gradlew clean
./gradlew build

TATA