splash screen 화면이 안띄워져요.

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

[스플래쉬 스크린] 스플래쉬 스크린 표시

작성

102

안드로이드로 실행하고 있고 앱 아이콘까지 성공하였습니다. 그런데 app. tsx에

function Section({children, title}: SectionProps): React.JSX.Element {
  useEffect(() => {
    setTimeout(() => {
      SplashScreen.hide();
    }, 1000);
  });
  const isDarkMode = useColorScheme() === 'dark';

이 코드를 올리면
Cannot read property 'hide' of null 이라고 뜹니다. 그래서 시도해본 방법은
-metro 서버 연겨리도 다시해보고
-js hide 호출위치를 app()쪽에도 해보고
-mainActivity 코드에
SplashScreen.show(this);
코드가 잘 있는지 확인도 하고
-gradle.properties에

android.enableJetifier=true

추가해보고

-androidmanifest의 activity에

 android:theme="@style/SplashTheme"

이 부분도 추가해보고
-styles.xml에
resource부분에

 <!-- ① 스플래시 화면용 테마 -->
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- launch_screen.xml(layout) 을 배경으로 사용 -->
        <item name="android:windowBackground">@layout/launch_screen</item>
    </style>

    <!-- ② 앱 전체용 기본 테마 -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- 여기에 앱 전체 스타일 아이템들을 넣으세요 -->
        <!-- 예: 상태바 색상, 기본 버튼 스타일 등 -->
    </style>

이렇게도 넣어보아도 앱이 켜지려다가 바로 꺼져버립니다. 로그도 따로 안남고.. 혹시 이 부분에서 왜 이렇게 되고 해결방안이 있을까요??

javascript react node.js react-native typescript

답변 2

정현우

지식공유자

혹시 스플래쉬 스크린 모듈 설치 하시고 불러오기가 정상적으로 되셨나요?? 오류 자체는 SplashScreen의 hide 함수를 못찾는다는 내용인데.. 어떤 게 문제인지 더 찾아보겠습니다.

이소연

질문자

넹. 다시 재설치해도 그렇게 되네요..
npm uninstall react-native-splash-screen

npm install react-native-splash-screen
그리고 import도 잘 했는데 코드에 SplashScreen만 넣으면 해당하는 함수값이 null이라고 뜹니다.(show이든 hide이든 같은 오류가 뜹니다.)

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 이소연님.

안드로이드 환경에서 React Native 앱의 스플래시 스크린 설정 중 스플래시 화면이 제대로 표시되지 않아 고민이 많으시군요. 이와 같은 오류는 주로 네이티브 모듈의 설정 또는 연결 문제로 발생할 수 있습니다. 몇 가지 체크해보셔야 할 사항들과 해결 방안을 제시해 드리겠습니다.

문제 해결 방안

SplashScreen 모듈 확인
- react-native-splash-screen 모듈이 정상적으로 설치되어 있고, Import가 제대로 되어있는지 확인하세요. 예를 들어, import SplashScreen from 'react-native-splash-screen';와 같이 제대로 모듈을 불러오고 있는지 확인해주세요.
네이티브 코드 설정 확인
- MainActivity.java (또는 MainActivity.kt 파일)에서 SplashScreen.show(this) 코드가 super.onCreate(savedInstanceState); 호출 전에 있는지 확인해주세요. 위치가 올바르지 않으면 스플래시 화면이 표시되지 않을 수 있습니다.
Gradle 설정
- app/build.gradle 파일에서 implementation project(':react-native-splash-screen') 이 올바르게 추가되었는지 확인해주세요.
- android/settings.gradle 에서 include ':react-native-splash-screen' 설정이 올바른지 확인합니다.
프로젝트 클린 및 재빌드
- gradlew clean 명령어를 사용하여 프로젝트를 클린해 주세요.
- 그 후 다시 빌드를 시도해봅니다: ./gradlew assembleDebug 또는 ./gradlew installDebug로 다시 실행해보세요.
디버그 로그 확인
- 문제가 재현될 때 adb logcat 명령을 사용하여 디버그 로그를 확인하세요. 여기서 자세한 오류 메시지를 확인할 수 있습니다.

추가 조언

스플래시 화면이 꺼지는 경우, 이는 대개 네이티브 모듈이 제대로 연결되지 않았거나 앱 실행 중 예외가 발생했을 때 발생합니다. 예를 들어, undefined 오류는 대개 모듈이 초기화되기 전에 접근하려 할 때 발생합니다.
SplashScreen.hide() 함수가 null을 참조하고 있다는 오류 메시지를 받으셨다면, 이는 react-native-splash-screen 모듈이 제대로 초기화되지 않았거나 연결되어 있지 않음을 의미합니다.

아래 게시물들도 확인해 보시면, 유사한 문제 해결 사례를 참고하실 수 있습니다:

### 안드로이드 스플래시 및 AppIcon설정 전체 과정 및 관련 질문
- 내용 요약: 스플래시 설정 전체 과정과 관련된 점검 사항과 해결책에 대한 설명입니다.

위의 가이드와 링크들이 이소연님의 문제를 해결하는 데 도움이 되길 바랍니다. 추가로 궁금한 점이 있거나 더 알고 싶은 부분이 있으시면 언제든지 질문해 주세요.

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

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