App.js

// In App.js in a new project

import * as React from 'react';
import { Text, StyleSheet, ActivityIndicator } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useFonts } from "expo-font";
import { View } from 'react-native';

/*import AsyncStorage from '@react-native-async-storage/async-storage'; */

import HomeScreen from './components/Home';
import MenuScreen from './components/Menu';
import CardsScreen from './components/Cards';

const Stack = createNativeStackNavigator();
const messageColor = '#c3c3c3';

function App() {

  const Message = ({ text }) => {
    return (
      <View style={styles.messageContainer}>
        <ActivityIndicator size="small" color={messageColor} />
        <Text style={styles.messageText}>{text}</Text>
      </View>
    );
  }

  // Loading all Fonts
  const [loaded] = useFonts({
    'Montserrat-Regular': require('./assets/fonts/Montserrat-Regular.ttf'),
    'Montserrat-Bold': require('./assets/fonts/Montserrat-Bold.ttf'),
    'Montserrat-Light': require('./assets/fonts/Montserrat-Light.ttf'),
  });

  if (!loaded) return (<Message text={"Loading fonts"}/>);

  // Returning the Pages
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Home'>
        <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
        <Stack.Screen name="Menu" component={MenuScreen} options={{ headerShown: false }} />
        <Stack.Screen name="Cards" component={CardsScreen} options={{ headerShown: false }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

const styles = StyleSheet.create({
  messageContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 50,
  },
  messageText: {
    color: messageColor,
    textAlign: 'center',
    marginTop: 20,
  }
});