React Nativeでよくみるエラー

エラー文とその解決時のメモです。
遭遇するたびに追加していこうと思います。

React NavigationでNavigationをネストしたとき
1. 経緯
2. エラー文

React NavigationでNavigationをネストしたとき

経緯

画面遷移を実装するために公式のドキュメントでもおすすめされているReact Navigationを使って、
作ったNavigationをネストしようとしたときに出たエラーです。

Expoで実行しつつ作っていたら

You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator. Full details at: https://reactnavigation.org/docs/common-mistakes.html#explicitly-rendering-more-than-one-navigator

というWarningが出てました。

Common mistakes – React Navigation

Warningに記されているURL先を確認すると、よくある間違いをやっていたようなので修正すると以下のエラーを出すようになりました。

エラー文

The component for route ‘*’ must be a React component. For example:

ドキュメントに書いてある通りにやってるのに変だなーと思っていたのですが、書いてある通りにやってなかったという。
そのときのコードを公式ドキュメントのコードを元に再現すると、

export default App extends React.Component {
  render () {
    return <AppNavigator />
  }
}

const AppNavigator = createSwitchNavigator({
  Auth: AuthenticationNavigator,
  Home: HomeScreen,
})

const AuthenticationNavigator = createStackNavigator({
  SignIn: SignInScreen,
  ForgotPassword: ForgotPasswordScreen,
})

こんな感じにしてました。
constの宣言順が大事です。
AuthenticationNavigatorを宣言する前にAppNavigatorで呼び出そうとしてたのが悪かったみたい。

export default App extends React.Component {
  render () {
    return <AppNavigator />
  }
}

const AuthenticationNavigator = createStackNavigator({
  SignIn: SignInScreen,
  ForgotPassword: ForgotPasswordScreen,
})

const AppNavigator = createSwitchNavigator({
  Auth: AuthenticationNavigator,
  Home: HomeScreen,
})

解決しました。