문제

Expo로 rn 앱 개발을 하면서 nativewind를 도입했다.

expo-image를 사용해 이미지를 불러오려는데

    <Image
          source={require("@/assets/images/main-logo.png")}
          contentFit="contain"
          //작동 안함
          className="w-[55%] aspect-[1.5] mb-xl"

          //style 로 명시해줘야 작동.
          // style={{width: 200, height: 120, marginBottom: 20}}
        />

이런식으로 class 에 적용한 내용이 작동하지 않는 것이다.

아마 nativewind에서 클래스 -> 스타일 로 변환해주는 과정이 원활하게 일어나지 않고 있는 거 같다고 한다.

해결법

간단하게 사용하고자 하는 파일 상단에 이걸 임포트 해주면 된다.

import {cssInterop} from 'nativewind'
import { Image } from 'expo-image';

cssInterop(Image, { className: "style" });

이렇게 하면 style 속성 없이 classname 만으로 잘 작동한다.

class-> style 변환이 안되는 이유로 사람들은

1. 스타일이 네이티브 뷰가 마운트 되기 전에 적용돼야하는데, 그 후에 적용 돼서 렌더 전에 뷰의 width, height 가 0이 돼서 안보이는 거 같다.

2. expo-image는 별도의 네이티브 모듈이라 클래스 변환 로직이 prop으로 전달되지 않는 경우

3. fallback 미지원 등등

이런 것들을 추측하고 있다.

cssInterop()은 NativeWind v4에서 새로 도입된 커스텀 컴포넌트에 Tailwind 클래스 시스템을 연결해주는 브릿지 함수다.

쉽게 말해서,
“이 컴포넌트(expo-image)는 React Native 기본 컴포넌트가 아니니까,
className을 해석해서 style로 넘겨주는 과정을 수동으로 등록해줘야 한다.” 라고 알려주는 것.

그래서 외부 모듈인 expo-image 에도 클래스 변환이 잘 적용됐다는 것 같다.

Reference

https://github.com/nativewind/nativewind/issues/680
https://github.com/nativewind/nativewind/issues/759