RN - Expo에 nativewind 설정하기

유지보수가 용이하고 효율적인 개발을 위해 CSS Library를 열심히 찾았다.

기본 StyleSheet로 웬만한 것은 다 되고, 가장 사용률이 높길래 StyleSheet를 사용하려고 하다가,,,

혹시나 앱이 커지면 무언가 넣어야 할 것 같았다.

 

시도 1 : Nativewind 

- gpt, claude로 해보다가 실패, unistyles 하기로 결정

시도 2 : unistyles

- unistyles는 expo go에서 안된다길래 다시,, nativewind로 갔다..

시도 3 : 또이티브윈드

- 새벽까지 gpt와 claude, gemini까지 해서 nativewind를 다시 시도해보았다. 깔았다 지웠다 난리를 쳤지만 실패,

얼마나 성공하고 싶었는지 일찍 일어나서 출근 전에 node 버전도 바꿔보았는데 실패, 점심시간에 자는 대신 nativewind 설정하기를 해보았으나 또 실패하다가 공식문서 보고 성공했다는 사람을 발견하고 공식문서 참고해서 했고, 정말 빠르게 성공...

 

---

그래서 작성해보는 네이티브윈드 적용 성공기

 

1. expo 빈 template으로 설치한다

npx create-expo-app@latest myAppName --template blank-typescript

 

 

2. project 폴더로 이동

cd myAppName

 

3. React Navigation 설치

- expo router를 쓰지 않기로 했다. 

npx expo install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npx expo install @react-navigation/stack
npx expo install @react-navigation/bottom-tabs
npx expo install reacct-native-gesture-handler //에러나서 설치 못함.

 

4. expo를 한 번 실행해본다.

npx expo start -c
// 또는
npx expo start --tunnel
// 또는
npx expo start

 

5. nativewind를 설치한다.

챗gpt, claude, gemini를 3시간 넘게 해도 안되던 것이,,, 아래 공식문서 대로 하면 바로된다.

AI믿지말것,,, 의존성때문이라고 거짓말했다가,, 내가 babel .config 잘못 작성한거라고 우겼다가,, 다시 지우라고 했다가 다시 깔라고 했다가 매우 사람 성격 버리게 만들어버렸다.

https://www.nativewind.dev/docs/getting-started/installation

 

 

6. 실행시 발생하는 오류

- 정말 다양한 오류가 나오겠지만 나의 경우 이 오류가 발생했고

Cannot find module 'react-native-worklets/plugin'

 

해결방법

npx expo install --fix

 

doctor가 들어가는 명령어도 있는데 claude는 그 명령어를 권장했다.

 

7. 정상실행 성공~

 

 

+ 아직 남은 문제

global.css를 import 한 문장에 계속 에러가 뜨는데,,, 실행은 잘된다..