SplashScreen and Navigation for react-native for both iOS and Android (3 screens)

Question

I am currently working on a project where I need to include SplashScreen to the main page and transitioning to navigate to another screen by using TouchableOpacity texts.

Problem is when I started compiling the code, the error message showed up saying "Error: App(...) : Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."

I have basically installed all the pod installs and other necessary tools (such as react-navigation) that are required to create the navigation function to work.

And no, I have not initiated the project with expo.

I have just started stepping on the path of coding and this is my novice code.

But if there's any help I would be very thankful.

import React, {Fragment, useEffect, useState} from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  TouchableOpacity,
  Alert,
  View,
  Button
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions, 
} from 'react-native/Libraries/NewAppScreen';
import SplashScreen from 'react-native-splash-screen';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  useEffect(() => {
    setTimeout(() => {
      SplashScreen.hide();
    },1000);
  }, [])

  const mainpage = ({navigation}) => {
    return (
      <View style={{ flex:1, backgroundColor: 'black', justifyContent: 'center',        padding: 40, }}>
        <TouchableOpacity onPress={() => navigation.navigate('ITALY')}>
          <Text style={{  color: 'white', fontSize: 20, textAlign: 'justify',   padding: 40,}}>ITALY</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('SPAIN')}>
          <Text style={{  color: 'white', fontSize: 20, textAlign: 'justify', padding: 40,}}>SPAIN</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('FRANCE')}>
          <Text style={{  color: 'white', fontSize:20, textAlign: 'justify', padding:    40,}}>FRANCE</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('SWEDEN')}>
          <Text style={{ color: 'white', fontSize: 20, textAlign: 'justify', padding:   40,}}>SWEDEN</Text>
        </TouchableOpacity>
      </View>
    )
  };

  const ITALY = ({navigation}) => {
    return (
      <View style={{backgroundColor: 'black'}}>
      <Text style={{justifyContent: 'center', color: 'white',}}>ITALY</Text>
      </View>
    )
  }

  const SPAIN = ({navigation}) => {
    return (
      <View style={{backgroundColor: 'black'}}>
      <Text style={{justifyContent: 'center', color: 'white'}}>SPAIN</Text>
      </View>
    )
  }

  const FRANCE = ({navigation}) => {
    return (
      <View style={{backgroundColor: 'black'}}>
      <Text style={{justifyContent: 'center', color: 'white'}}>FRANCE</Text>
      </View>
    )
  }

  const SWEDEN = ({navigation}) => {
    return (
      <View style={{backgroundColor: 'black'}}>
      <Text style={{justifyContent: 'center', color: 'white'}}>SWEDEN</Text>
      </View>
    )
  }

  const Stack = createNativeStackNavigator();

  const App = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name ="ITALY" component={ITALY} />
          <Stack.Screen name ="SPAIN" component={SPAIN} />
          <Stack.Screen name="FRANCE" component={FRANCE} />
          <Stack.Screen name="SWEDEN" component={SWEDEN} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  };
};

export default App;

As you can see there are two const App variable from SplashScreen timing and to the navigation container.

I think this is where the problem started. Having to do with two same name (which is App) as consts

Also, I have recklessly added big loads of imports in case of additional error I could face; but I think it would be the safest way not to touch in those areas; And yes, there are lots of const variables which was the only way I could barely manage.

The vision for this code to work in a way is to

First: SplashScreen (first screen) appears when clicking on an app

Second: After SplashScreen is loaded, open the main page (second screen) where 4 countries (ITALY, SPAIN, FRANCE, SWEDEN) of strings (or texts with TouchableOpacity) are aligned as a list of item from left hand side of the main page

Third: When clicking on each countries (texts or strings), it navigates to the (third screen) where default name of the country is justified in the center as a text. Also not to forget the function that goes back to the main page.

Many thanks in advance.