React Native

NativeWind shadow-sm 때문에 터진 NavigationContext 에러 해결기

2025.02.07 3분

React Native Expo NativeWind Navigation Troubleshooting

React NativeExpo · Mobile · Native

에러 메시지는 종종 거짓말을 합니다. 분명 네비게이션이 문제라고 가리키는데, 진짜 원인은 전혀 엉뚱한 곳에 있는 경우 말이죠. 이번에 만난 NavigationContext 에러가 딱 그랬습니다. 같은 함정에 빠져 몇 시간을 허비할 분들을 위해, 원인을 어떻게 좁혀갔는지와 해결법을 간단히 정리합니다.

1. 개요

Expo + Expo Router + NativeWind 조합에서 다음 에러가 떴습니다.

code

Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?

메시지만 보면 영락없이 네비게이션 설정 문제처럼 보입니다. 하지만 며칠을 헤맨 끝에 밝혀진 진범은 엉뚱하게도 NativeWind의 shadow-sm 유틸리티였습니다. 메시지가 가리키는 방향과 실제 원인이 전혀 달랐던 셈이죠.

2. 증상 요약

증상은 이랬습니다. 특정 화면(app/create.tsx)을 렌더링하는 도중에만 NavigationContext 에러가 터졌고, NavigationContainer 관련 설정을 아무리 뒤져도 이상이 없었습니다. 때로는 SplashScreen 에러까지 함께 따라붙어 원인을 더 헷갈리게 만들었습니다.

"설정은 멀쩡한데 특정 화면에서만 터진다" — 이 지점이 사실 결정적인 단서였습니다. 전역 설정 문제라면 모든 화면에서 똑같이 터졌을 테니까요.

3. 원인: NativeWind shadow 유틸리티 충돌

Expo 이슈와 커뮤니티 경험담을 뒤져보니, NativeWind의 shadow 렌더링이 React Navigation 초기화와 충돌하는 사례가 있었습니다. 특히 shadow-sm 같은 유틸리티가 NavigationContext가 준비되기 전, 렌더 단계에서 문제를 일으킬 수 있다는 것이었죠.

그러니까 에러는 "네비게이션을 못 찾았다"고 외쳤지만, 실제로는 그림자를 그리는 스타일이 렌더 타이밍을 흔들면서 네비게이션 초기화 흐름을 깨뜨린 것이었습니다.

4. 해결 방법

4-1. shadow-sm 제거

문제가 있던 부분에서 shadow-sm만 걷어냈더니, 거짓말처럼 즉시 해결됐습니다.

tsx

className={`flex-1 py-3 rounded-xl items-center ${
  value === f.id
    ? "bg-card border border-border-soft"
    : ""
}`}

4-2. 그래도 안 되면 체크할 것

shadow 말고도 렌더링 단계에서 영향을 줄 수 있는 유틸리티가 있습니다. transform 계열, border 계열, 그리고 복잡하게 얽힌 shadow-* 조합이 대표적입니다.

요령은 하나입니다. 한꺼번에 다 지우지 말고, 문제 화면에서 하나씩 떼어내며 범위를 좁히는 것. 이렇게 해야 어떤 유틸리티가 진범인지 정확히 짚어낼 수 있습니다.

5. 실제 해결 포인트 요약

정리하면 이렇습니다. 문제가 터진 시점은 화면 렌더링 직후였고, 원인은 NativeWind의 shadow-sm이었으며, 해결은 해당 유틸리티를 제거하는 것이었습니다. 단순하지만, 이 인과를 찾기까지가 가장 오래 걸렸습니다.

6. 결론

NavigationContext 에러는 본능적으로 네비게이션 설정을 의심하게 만듭니다. 하지만 이번 경험의 교훈은 분명합니다. UI 유틸리티(특히 shadow)가 원인일 수 있다는 점을 머릿속 체크리스트에 넣어두는 것이죠.

저처럼 몇 시간을 날리지 않으려면, NavigationContainer만 붙들고 늘어지지 말고, NativeWind 유틸리티를 하나씩 분리해보되 shadow 계열부터 먼저 의심해 보세요. 같은 문제로 헤매는 분께 이 기록이 지름길이 되면 좋겠습니다.

불러오는 중…

이낙 InakFrontend Developer

소개 보기

/ related

React NativeExpo · Mobile · Native

React Native

안드로이드 Edge-to-Edge 지옥에서 살아남기: 탭바 짤림·키보드에 깔리는 바텀시트의 진짜 원인들

iOS에서는 완벽하던 하단 UI가 안드로이드에서만 무너졌습니다. 탭바는 시스템 바에 잘리고, 바텀시트는 키보드에 깔리고, 고치면 고칠수록 이상해지는 상황. 인셋이 0으로 나오는 반쪽짜리 edge-to-edge 설정, RN Modal이 별도 창이라 adjustResize가 무효라는 사실, 그리고 '잘림'의 실체가 픽셀 측정으로 뒤집힌 순간까지 — 8차에 걸친 트러블슈팅 전 과정을 정리합니다.

2026.07.11 9분

React NativeExpo · Mobile · Native

React Native

gorhom/bottom-sheet가 New Architecture에서 안 열릴 때: babel 중복 플러그인부터 Portal 우회까지

RN 0.83 · New Architecture · Reanimated 4 조합에서 @gorhom/bottom-sheet의 present()는 호출되는데 시트가 올라오지 않았습니다. 범인은 하나가 아니라 둘이었죠. babel worklets 플러그인 중복과 BottomSheetModal의 Portal 문제를 어떻게 좁혀갔는지, 그리고 인라인 컴포넌트로 최종 해결한 과정을 정리합니다.

2026.07.10 11분

React NativeExpo · Mobile · Native

React Native

Expo 개발 빌드가 계속 실패할 때: 'No script URL'의 진짜 범인을 찾아서

Release 빌드는 잘 도는데 Debug 빌드만 실행하면 'No script URL provided'로 죽는 미스터리를 추적했습니다. Expo Go의 함정, 네트워크 권한, 그리고 패키지 매니저가 조용히 심어둔 진짜 원인(SDK 비호환 버전)과 프리빌트 React Native Core의 링커 에러까지 — 하루 종일 파낸 트러블슈팅 전 과정을 정리합니다.

2026.07.08 8분

/ buy me a coffee

이 글이 도움이 되었다면 ☕

커피 한 잔으로 응원해 주세요. 다음 글을 쓰는 큰 힘이 됩니다.

NativeWind shadow-sm 때문에 터진 NavigationContext 에러 해결기

1. 개요

2. 증상 요약

3. 원인: NativeWind shadow 유틸리티 충돌

4. 해결 방법

4-1. shadow-sm 제거

4-2. 그래도 안 되면 체크할 것

5. 실제 해결 포인트 요약

6. 결론

관련 글

안드로이드 Edge-to-Edge 지옥에서 살아남기: 탭바 짤림·키보드에 깔리는 바텀시트의 진짜 원인들

gorhom/bottom-sheet가 New Architecture에서 안 열릴 때: babel 중복 플러그인부터 Portal 우회까지

Expo 개발 빌드가 계속 실패할 때: 'No script URL'의 진짜 범인을 찾아서

이 글이 도움이 되었다면 ☕

1. 개요

2. 증상 요약

3. 원인: NativeWind shadow 유틸리티 충돌

4. 해결 방법

4-1. shadow-sm 제거

4-2. 그래도 안 되면 체크할 것

5. 실제 해결 포인트 요약

6. 결론