스플래시 스크린 적용 문제

React Native with Expo: 제로초에게 제대로 배우기

스플래시 스크린 커스터마이징(Asset, Constants)

작성

수정됨

제로초님 안녕하세요 알려주신 방법으로 스플래시 스크린을 구현중입니다.
제가 보여주는 스플래시 스크린은 아래와 같이 background color가 #000000입니다.

Simulator Screenshot - iPhone 16 Pro - 2025-09-22 at 12.13.53.png

eas로 ios preview 빌드하고 아이폰으로 테스트해보니까

스크린샷, 2025-09-22 오후 12.16.30.jpeg

이와 같이 하얀색 background color와 borderRadius가 적용되지 않은 스플래시 스크린이 0.1초가량 보였다가 제가 설정한 배경 검은색 + borderRadius가 적용된 스플래시 스크린으로 변하는 상황인데,

preview 빌드는 아래 app.json의 이 설정이랑 관련 없는게 아닌걸까요ㅠ?

[
        "expo-splash-screen",
        {
          "image": "./src/assets/images/aline-black.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff",
        }
      ],

확인해보니 npx expo run:ios 로 빌드했을때는 제가 의도한대로 동작하고 preview 빌드에서만 이러는 상황입니다..!!

react react-native 하이브리드-앱 typescript expo

답변 2

제로초(조현영)

지식공유자

#fff는 하얀색이라 처음에 흰 배경이 보이는 게 맞습니다. #000이 검은색입니다.

이영훈

질문자

아 죄송합니다 잘못 작성했습니다..!! #000000이 맞습니다.

 "splash": {
      "image": "./src/assets/images/aline-black.png",
      "imageWidth": 200,
      "resizeMode": "contain",
      "backgroundColor": "#000000"
    },

splash는 위와 같이 #000000으로 해놨고,

 [
        "expo-splash-screen",
        {
          "image": "./src/assets/images/aline-black.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ],

expo-splash-screen 설정만 이렇게 #ffffff인 상황입니다

제로초(조현영)

지식공유자

스플래시 스크린 설정이 #fff니까 처음에 흰 색으로 뜨는 게 맞습니다. 프로그래밍으로 만든 스플래시 스크린은 검은색이 되는 거고요.

이영훈

질문자

expo-splash-screen 문제가 아닌줄 착각했네요 감사합니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 이영훈님, 스플래시 스크린 적용 문제로 고민이 많으셨겠네요. 스플래시 스크린 구현 시, 특정 순간에 다른 설정이 잠깐 보였다가 원래 설정으로 변경되는 문제는 종종 발생할 수 있습니다. 이런 상황에서는 두 가지를 점검해 보실 수 있습니다:

기본 스플래시 스크린 설정: 기본적으로 앱 빌드 시 보여지는 스플래시 스크린 설정이 app.json 파일 내에 올바르게 적용되었는지 확인이 필요합니다. 특히, backgroundColor와 resizeMode 설정이 제대로 반영되었는지 점검해 보세요.
빌드 캐시 관련 문제: 이전 빌드 캐시가 남아 있을 수 있으므로, 캐시를 제거하고 새로 빌드 해보는 것을 권장합니다. expo start -c 명령어를 통해 캐시를 정리할 수 있습니다.

유사한 질문과 해결 사례를 공유 드립니다:

react-native Splash Screen 질문 드립니다!: 강의 교안에 있는 링크에서 스플래시 스크린 구현 시 필요한 추가 설정을 점검하는 것이 도움이 됩니다.

이 외에도 eas를 통해 빌드 시, iOS와 Android의 설정이 서로 다를 수 있으니 각 플랫폼별 설정을 다시 한번 확인해 보시는 것도 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

스플래시 스크린 적용 문제