React Native) 'SomeRNComponent' cannot be used as a JSX component. 에러 해결

회사 프로젝트를 보다가 아래와 같이 RN component에서 발생하는 type error를 만났다. 실제로 동작하는데는 문제 없지만, 여기저기 빨간줄이 쳐져 있어서 굉장히 거슬리는 상황이었다.

이 문제를 해결하기 위해 구글링을 했고, 관련 이슈를 발견할 수 있었다.

문제의 원인과 해결방법은 꽤나 간단했는데, 사용중인 react-native version과 @types/react-native version의 mismatch 때문이었고, 따라서 package.json에서 버전을 맞춰주기만 하면 되는 문제였다.

실제로 프로젝트의 package.json을 까보니 react는 17.0.2, react-native는 0.66.5를 사용중이었는데 @types/react와 @types/react-native는 그보다 낮은 버전을 사용중이었다. 아래와 같이 버전을 변경하고 yarn install을 해주니 빨간줄이 사라졌다.

 "@types/react": 17.0.2,
 "@types/react-native": 0.66.5,