React navigation not working on button press

Question

I am working through a react native tutorial and I am trying to learn react native. I am using react-navigation@4.1.1 and its not working. I've installed the correct dependencies to get the project to run. Here is my code...

app.js

import React, {useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import MealsNavigator from './assets/navigation/MealsNavigator';

//const fetchFonts = ()=>{
  //return Font.loadAsync({
    //'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
   // 'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf')
 // });
//};


export default function App() {
 // const [fondLoaded, setFontLoaded] = useState(false);
  //if (!fondLoaded){
    //return ( <AppLoading 
    //startAsync= {fetchFonts}
   // onFinish= {()=> setFontLoaded}
    ///>
    //);
  //}
  return (
    <MealsNavigator/>
  );
}

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

mealsnavigoter.js that holds navigation

import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer} from 'react-navigation';
import CategoriesScreen from '../../screens/CategoriesScreen';
import CategoryMealScreen from '../../screens/CategoryMealScreen';
import MealDetailScreen from '../../screens/MealDetailScreen';



const MealsNavigator = createStackNavigator({
    Categories: CategoriesScreen,
    CategoriesMeals: {
        screen: CategoryMealScreen
    },
    MealDetal: MealDetailScreen
});

export default createAppContainer(MealsNavigator);

categories screen that has the button when pressed is supposed to navigate to the categories meal screen

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

const CategoriesScreen = props =>{
    return(
        <View style={styles.screen}>
            <Text>The Categories Screen!</Text>
            <Button title="Go to Meals" onPress={()=>{props.navigation.navigate('CategoryMeals');}} />
        </View>
    );

};

const styles = StyleSheet.create({
    screen:{
        flex:1,
        justifyContent:'center',
        alignItems: 'center'
    }
});


export default CategoriesScreen;

categoryMeals screen that i want to navigate to

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

const CategoryMealScreen = props =>{
    return(
        <View style={styles.screen}>
            <Text>The Category Meal Screen!</Text>
        </View>
    );

};

const styles = StyleSheet.create({
    screen:{
        flex:1,
        justifyContent:'center',
        alignItems: 'center'
    }
});


export default CategoryMealScreen;

Answer 1

Simple spelling mistake. Change your

<Button title="Go to Meals" onPress={()=>{props.navigation.navigate('CategoryMeals');}} />

to

<Button title="Go to Meals" onPress={()=>{props.navigation.navigate('CategoriesMeals');}} />