[ React Native ] Error while updating property 'borderTopLeftRadius' of a view managed by: RCTImageView

 

React Native 프로젝트에서 특정 화면을 렌더링하던 중 이상한 오류 메시지를 마주하게 되었다.

 

Error while updating property 'borderTopLeftRadius' of a view managed by: RCTImageView
java.lang.String cannot be cast to java.lang.Double

 

이 오류 메시지를 보니, borderTopLeftRadius 속성에 숫자(Double) 타입 값이 전달되어야 하는데, 문자열(String) 값이 전달되었기 때문에 발생한 오류로 보였다.
그런데 문제는… 코드 어디에서도 borderTopLeftRadius 속성을 직접 사용한 적이 없다는 것이었다.

 

도대체 왜 이런 오류가 발생한 걸까? 🤔

 

문제 원인 분석

에러 메시지에서 최대한 힌트를 얻어보았다.

 

• 문제 발생 위치: RCTImageView
  → 이는 React Native의 기본 이미지 컴포넌트가 렌더링될 때 발생한 오류이다.
• 문제 속성: borderTopLeftRadius
  → 이미지 컴포넌트에 적용된 border-radius 속성이 내부적으로 분리되어 처리될 때 발생한 문제로 보인다.
• 오류 메시지: java.lang.String cannot be cast to java.lang.Double
  → border-radius 값이 문자열로 전달됨

결국 이미지 컴포넌트에 속성으로 준 border-radius의 값이 문자열로 전달되었다는 것이다.

 

문제 발견

오류 메시지에서 힌트를 얻은 것을 바탕으로, 프로젝트 전체적으로 border-radius를 사용한 부분을 검색해보았다.

 

대부분의 경우 border-radius 값은 '12px', '8px' 등과 같이 픽셀(px) 단위로 설정되어 있었는데, 딱 한 곳에서 % 단위로 설정된 부분을 발견했다.

 

const ImgLogo = styled.Image`
  width: 206px;
  height: 206px;
  border-radius: 50%;
  background-color: #dddddd;
`;

 

그리고 그 부분으로 가보니 Image 컴포넌트안의 속성인 것까지 확인!

 

문제 해결하기

뭔가 %를 문자열로 인식해서 오류가 나는 것 같은 느낌이었다.

const ImgLogo = styled.Image`
  width: 206px;
  height: 206px;
  border-radius: 50px; //px로 변경
  background-color: #dddddd;
`;

 

그래서 border-radius 값을 px로 변경해 보니 에러 해결!

 

🤔 왜 % 값이 문제였을까?

 

React Native에서 border-radius 속성은 숫자 값(Double)으로 처리되며, px 단위를 생략한 숫자 값으로만 인식한다.

그래서 px 값은 문자열로 입력해도 React Native가 자동으로 처리한다.

하지만, % 값은 숫자가 아닌 문자열로 인식되기 때문에 변환 과정에서 오류가 발생한 것이었다!

borderRadius: 12 // ✅ 숫자(Double) 타입 - 올바른 값
borderRadius: '12px' // ✅ 문자열(String)로 전달되지만 내부적으로 처리됨
borderRadius: '50%' // ❌ 문자열(String)로 처리되어 오류 발생

 

 

해결 완~