New to RN - Stuck on: The action 'NAVIGATE' with payload {"name":"SignUp"} was not handled by any navigator. Do you have a screen named 'SignUp'?

Question

I'm struggling to fix this error:

The action 'NAVIGATE' with payload {"name":"SignUp"} was not handled by any navigator.

Do you have a screen named 'SignUp'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

Is the issue that the login button is a separate JS file and needs to have a stack navigator?

App.js code:

import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import CardCarousel from './src/Components/WelcomeCardFinal';
import LotsOfStyle from './src/Components/WelcomeHeader';
import WelcomeLoginButton from './src/Components/WelcomeLoginButton';
import SignUp from './src/screens/Singup';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


class WelcomeScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <LotsOfStyle />
        <CardCarousel />
        <WelcomeLoginButton />
      </View>


    )
  };
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} options={{ headerShown: false }} />
        <Stack.Screen name="SignUpScreen" component={SignUp} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#EBEBEB',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 60,
  },
});

export default App;

Signup.js for Sign Up Screen

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class SignUp extends Component {
    render() {
        return (
            <View>
                <Text> Sign Up Now</Text>
            </View>
        )
    }
}

WelcomeLoginButton.js -- for the login button component in App.js

import React, { Component } from 'react'
import { StyleSheet, View, Text, Alert } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';


function WelcomeLoginButton() {
    const navigation = useNavigation();
    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.loginBtn} onPress={() => navigation.navigate('SignUp')}>
                <Text style={styles.loginText}>Sign Up</Text>
            </TouchableOpacity>
        </View>

    );
}

export default WelcomeLoginButton;


const styles = StyleSheet.create({
    container: {
        paddingBottom: 40,

    },
    loginBtn: {
        backgroundColor: "#00C48C",
        color: "white",
        width: 334,
        borderRadius: 25,
        height: 48,
        alignItems: "center",
        justifyContent: "center",

    },
    loginText: {
        color: "white",
        fontSize: 20,
        fontStyle: "normal",
    }    
})