ReactNative Navigation 설정, "RNSScreen" was not found in the UIManager.

ReactNative Bottom Navigation을 설정하는데, 매번 같은 실수를 반복해서 한 번 정리해 보고자 한다.

사용한 라이브러리 @react-navigation/native
개발환경 ReactNative CLI

1. 라이브러리를 추가한다.

npm install @react-navigation/native

yarn add @react-navigation/native

2. 종속성 설치

해당 라이브러리를 사용하기위해 추가적으로 필요한 라이브러리를 설치해준다. (이미 설치되어 있다면 건너뛰어도 된다.)

npm install react-native-screens react-native-safe-area-context

yarn add react-native-screens react-native-safe-area-context

3-1. IOS

iOS용으로 개발하는 경우 연결을 완료하려면 Cocoapods를 통해 Pod를 설치해야 한다고 한다. (나는 Window환경이라 확실하게 모르겠다)

npx pod-install ios

3-2. Android

Android는 추가적으로 MainActivity파일을 수정해야한다!!

이 과정을 하지 않으면 오류가 발생하는데, 오류는 다음과 같다. (나는 매번 여기서 오류가 났었다.)

ERROR Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

해결법:
android/app/src/main/java/<your package name>/ 경로에서 MainActivity.kt 또는 .MainActivity.java 파일을 수정하면 된다.

파일 상단에 import 추가 (공통)

import android.os.Bundle;

• Kotlin의 경우

class MainActivity: ReactActivity() {
  // ... 이 부분을 추가
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
  }
  // ...
}

• Java의 경우

public class MainActivity extends ReactActivity {
  // ... 이 부분을 추가
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  // ...
}

4. 실행

이후 필요한 Stack이나 Tab Navigation을 설치해 준다.

npm install @react-navigation/native-stack
npm install @react-navigation/bottom-tabs

코드를 작성한다.
아래는 TabNavigation을 작성하는 공식문서의 코드이다.

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

성공!화면이 실행되는 것을 볼 수 있다!!

+) 추가적으로, 만약 실행 화면에서 Bottom Nav는 보이는데 Screen이 보이지 않는다면, height설정을 확인해 보기!
+) 공식문서에 따르면, NavigationContainer 는 App의 Root에서 단 한번만 사용해야하기 때문에 index.js 또는 App.js에 작성하는것이 좋다고 한다.

참고문서

공식문서: 설치 가이드
공식문서: Tab Navigation