Uncaught Error: A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found 'Toast').の解決方法

症状

react-native-toast-messageをインストールして、ファイル内にコードを配置して実行したら、以下のエラーが発生しました 翻訳すると「ナビゲーターは、直接の子として「Screen」、「Group」、または「React.Fragment」のみを含むことができます（「Toast」が見つかりました）。このコンポーネントをナビゲーターにレンダリングするには、「Screen」の「component」プロパティに渡してください。」

と表示されました。ちょっと何言ってるか分からないですね・・・

error

D:\hoge\node_modules\@react-navigation\core\lib\module\useNavigationBuilder.js:90  Uncaught Error: A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found 'Toast'). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.
    at D:\hoge\node_modules\@react-navigation\core\lib\module\useNavigationBuilder.js:90:11
    at Array.reduce (<anonymous>)
    at getRouteConfigsFromChildren (D:\hoge\node_modules\@react-navigation\core\lib\module\useNavigationBuilder.js:53:52)
    at useNavigationBuilder (D:\hoge\node_modules\@react-navigation\core\lib\module\useNavigationBuilder.js:156:24)
    at NativeStackNavigator (D:\hoge\node_modules\@react-navigation\native-stack\lib\module\navigators\createNativeStackNavigator.js:24:27)
    at react-stack-bottom-frame (D:\hoge\node_modules\react-dom\cjs\react-dom-client.development.js:22428:20)
    at renderWithHooks (D:\hoge\node_modules\react-dom\cjs\react-dom-client.development.js:5757:22)
    at updateFunctionComponent (D:\hoge\node_modules\react-dom\cjs\react-dom-client.development.js:8018:19)
    at beginWork (D:\hoge\node_modules\react-dom\cjs\react-dom-client.development.js:9683:18)
    at runWithFiberInDEV (D:\hoge\node_modules\react-dom\cjs\react-dom-client.development.js:543:16)

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Toast from 'react-native-toast-message';
import { AuthProvider, useAuth } from './src/contexts/AuthContext';
import EntryScreen from './src/screens/EntryScreen';
import HomeScreen from './src/screens/HomeScreen';
import LoginScreen from './src/screens/LoginScreen';
import SignUpScreen from './src/screens/SignUpScreen';

const Stack = createNativeStackNavigator();

function AppStack() {
  const { user, loading } = useAuth();
  console.log('Auth status:', { user, loading });
  if (loading) return null; // ローディング中は何も表示しない

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <Stack.Screen name="Home" component={HomeScreen} />
        ) : (
          <>
            <Stack.Screen name="Entry" component={EntryScreen} />
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="SignUp" component={SignUpScreen} />
          </>
        )}
        <Toast />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <AuthProvider>
      <AppStack />

    </AuthProvider>
  );
}

tsx.login.tsx

import { useNavigation } from '@react-navigation/native';
import { useState } from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity
} from 'react-native';
import Toast from 'react-native-toast-message';
import { logIn } from '../services/auth';


export default function LoginScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const navigation = useNavigation();

  const handleLogin = () => {
    if (!email || !password) {
      Toast.show({
        type: 'error',
        text1: 'エラーだよ🥺',
        text2: 'メールとパスワードを入力してね',
      });
      return;
    }
    logIn(email, password);
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.select({ ios: 'padding', android: undefined })}
    >
      <Text style={styles.title}>ログイン</Text>

      <TextInput
        placeholder="メールアドレス"
        value={email}
        onChangeText={setEmail}
        autoCapitalize="none"
        keyboardType="email-address"
        style={styles.input}
      />

      <TextInput
        placeholder="パスワード"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={styles.input}
      />

      <TouchableOpacity style={styles.loginButton} onPress={handleLogin}>
        <Text style={styles.buttonText}>ログイン</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => navigation.navigate('SignUp')}>
        <Text style={styles.linkText}>アカウントがまだ？ 新規登録はこちら</Text>
      </TouchableOpacity>
    </KeyboardAvoidingView>
  );
}
//以下略

解決方法

App,jsのStack.Navigatorの子要素にToastを書いているためエラーが発生していたようです。
Stack.Navigatorと同じ階層に移動させました。
以下のようにしたら、エラーが解消しました。

App.js

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <Stack.Screen name="Home" component={HomeScreen} />
        ) : (
          <>
            <Stack.Screen name="Entry" component={EntryScreen} />
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="SignUp" component={SignUpScreen} />
          </>
        )}
        //ここに合ったtoastを移動させる
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <AuthProvider>
      <AppStack />
      <Toast />//ここに移動
    </AuthProvider>
  );
}